diff --git a/vue/docs/404.html b/vue/docs/404.html
index 94540200668..5f67ac73336 100644
--- a/vue/docs/404.html
+++ b/vue/docs/404.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/CChart.api.html b/vue/docs/api/CChart.api.html
index d1e8a7c44a7..86274392552 100644
--- a/vue/docs/api/CChart.api.html
+++ b/vue/docs/api/CChart.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordion.api.html b/vue/docs/api/accordion/CAccordion.api.html
index 055a18138ce..18fd2e214d8 100644
--- a/vue/docs/api/accordion/CAccordion.api.html
+++ b/vue/docs/api/accordion/CAccordion.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionBody.api.html b/vue/docs/api/accordion/CAccordionBody.api.html
index 47c0be21b7f..1d0332fa163 100644
--- a/vue/docs/api/accordion/CAccordionBody.api.html
+++ b/vue/docs/api/accordion/CAccordionBody.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionButton.api.html b/vue/docs/api/accordion/CAccordionButton.api.html
index 16d59244de9..1c59233226c 100644
--- a/vue/docs/api/accordion/CAccordionButton.api.html
+++ b/vue/docs/api/accordion/CAccordionButton.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionHeader.api.html b/vue/docs/api/accordion/CAccordionHeader.api.html
index 8af90698bb5..46d52fbbd18 100644
--- a/vue/docs/api/accordion/CAccordionHeader.api.html
+++ b/vue/docs/api/accordion/CAccordionHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionItem.api.html b/vue/docs/api/accordion/CAccordionItem.api.html
index c9b0eccc900..80c3d15f5e6 100644
--- a/vue/docs/api/accordion/CAccordionItem.api.html
+++ b/vue/docs/api/accordion/CAccordionItem.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/alert/CAlert.api.html b/vue/docs/api/alert/CAlert.api.html
index 07c48c26f15..889f91cc8cf 100644
--- a/vue/docs/api/alert/CAlert.api.html
+++ b/vue/docs/api/alert/CAlert.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/alert/CAlertHeading.api.html b/vue/docs/api/alert/CAlertHeading.api.html
index 08db9d6fe8c..7950bd6e278 100644
--- a/vue/docs/api/alert/CAlertHeading.api.html
+++ b/vue/docs/api/alert/CAlertHeading.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/alert/CAlertLink.api.html b/vue/docs/api/alert/CAlertLink.api.html
index bdf381716e3..24aa6e7d7ef 100644
--- a/vue/docs/api/alert/CAlertLink.api.html
+++ b/vue/docs/api/alert/CAlertLink.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/avatar/CAvatar.api.html b/vue/docs/api/avatar/CAvatar.api.html
index 043aa7fa6a3..d7389dbd146 100644
--- a/vue/docs/api/avatar/CAvatar.api.html
+++ b/vue/docs/api/avatar/CAvatar.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/backdrop/CBackdrop.api.html b/vue/docs/api/backdrop/CBackdrop.api.html
index d50a37a77e7..75841bc9ba0 100644
--- a/vue/docs/api/backdrop/CBackdrop.api.html
+++ b/vue/docs/api/backdrop/CBackdrop.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/badge/CBadge.api.html b/vue/docs/api/badge/CBadge.api.html
index 6154ffee75b..0b70d661473 100644
--- a/vue/docs/api/badge/CBadge.api.html
+++ b/vue/docs/api/badge/CBadge.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/breadcrumb/CBreadcrumb.api.html b/vue/docs/api/breadcrumb/CBreadcrumb.api.html
index 9386c4f79aa..5e8ee52f9e3 100644
--- a/vue/docs/api/breadcrumb/CBreadcrumb.api.html
+++ b/vue/docs/api/breadcrumb/CBreadcrumb.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html b/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html
index 0a51afde894..79e006a1be8 100644
--- a/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html
+++ b/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/button-group/CButtonGroup.api.html b/vue/docs/api/button-group/CButtonGroup.api.html
index 8d659e62258..94e0057576d 100644
--- a/vue/docs/api/button-group/CButtonGroup.api.html
+++ b/vue/docs/api/button-group/CButtonGroup.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/button-group/CButtonToolbar.api.html b/vue/docs/api/button-group/CButtonToolbar.api.html
index 883a4995e7c..8223036b220 100644
--- a/vue/docs/api/button-group/CButtonToolbar.api.html
+++ b/vue/docs/api/button-group/CButtonToolbar.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/button/CButton.api.html b/vue/docs/api/button/CButton.api.html
index f1a984f55be..f112580746f 100644
--- a/vue/docs/api/button/CButton.api.html
+++ b/vue/docs/api/button/CButton.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/calendar/CCalendar.api.html b/vue/docs/api/calendar/CCalendar.api.html
index 13a370b815c..e6c894e7fa5 100644
--- a/vue/docs/api/calendar/CCalendar.api.html
+++ b/vue/docs/api/calendar/CCalendar.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/callout/CCallout.api.html b/vue/docs/api/callout/CCallout.api.html
index 1d2a2ad5229..12ec40d3bbf 100644
--- a/vue/docs/api/callout/CCallout.api.html
+++ b/vue/docs/api/callout/CCallout.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCard.api.html b/vue/docs/api/card/CCard.api.html
index b901903dea7..f2a5d4c0076 100644
--- a/vue/docs/api/card/CCard.api.html
+++ b/vue/docs/api/card/CCard.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardBody.api.html b/vue/docs/api/card/CCardBody.api.html
index d711527f745..599e028049e 100644
--- a/vue/docs/api/card/CCardBody.api.html
+++ b/vue/docs/api/card/CCardBody.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardFooter.api.html b/vue/docs/api/card/CCardFooter.api.html
index 2cd34514c7d..1378779a0ed 100644
--- a/vue/docs/api/card/CCardFooter.api.html
+++ b/vue/docs/api/card/CCardFooter.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardGroup.api.html b/vue/docs/api/card/CCardGroup.api.html
index f361031cbea..f6b737c5b45 100644
--- a/vue/docs/api/card/CCardGroup.api.html
+++ b/vue/docs/api/card/CCardGroup.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardHeader.api.html b/vue/docs/api/card/CCardHeader.api.html
index 44c8f263da4..5ebf853e3ee 100644
--- a/vue/docs/api/card/CCardHeader.api.html
+++ b/vue/docs/api/card/CCardHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardImage.api.html b/vue/docs/api/card/CCardImage.api.html
index ac44d85fa9e..e31f2f14b4b 100644
--- a/vue/docs/api/card/CCardImage.api.html
+++ b/vue/docs/api/card/CCardImage.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardImageOverlay.api.html b/vue/docs/api/card/CCardImageOverlay.api.html
index f3988866a1c..59f79f12be2 100644
--- a/vue/docs/api/card/CCardImageOverlay.api.html
+++ b/vue/docs/api/card/CCardImageOverlay.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardLink.api.html b/vue/docs/api/card/CCardLink.api.html
index 5a426193320..bcd3e87aa33 100644
--- a/vue/docs/api/card/CCardLink.api.html
+++ b/vue/docs/api/card/CCardLink.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardSubtitle.api.html b/vue/docs/api/card/CCardSubtitle.api.html
index f89e51eaad0..f71ced574ab 100644
--- a/vue/docs/api/card/CCardSubtitle.api.html
+++ b/vue/docs/api/card/CCardSubtitle.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardText.api.html b/vue/docs/api/card/CCardText.api.html
index c9dbe6c3e3c..a9477c4aa5a 100644
--- a/vue/docs/api/card/CCardText.api.html
+++ b/vue/docs/api/card/CCardText.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardTitle.api.html b/vue/docs/api/card/CCardTitle.api.html
index b7f494c27eb..1d470fa548f 100644
--- a/vue/docs/api/card/CCardTitle.api.html
+++ b/vue/docs/api/card/CCardTitle.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/carousel/CCarousel.api.html b/vue/docs/api/carousel/CCarousel.api.html
index 65080a4ea95..7ea1d69a866 100644
--- a/vue/docs/api/carousel/CCarousel.api.html
+++ b/vue/docs/api/carousel/CCarousel.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/carousel/CCarouselCaption.api.html b/vue/docs/api/carousel/CCarouselCaption.api.html
index b9c2e1d9222..0936e6597ba 100644
--- a/vue/docs/api/carousel/CCarouselCaption.api.html
+++ b/vue/docs/api/carousel/CCarouselCaption.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/carousel/CCarouselItem.api.html b/vue/docs/api/carousel/CCarouselItem.api.html
index a152407391b..3c635a3f5a1 100644
--- a/vue/docs/api/carousel/CCarouselItem.api.html
+++ b/vue/docs/api/carousel/CCarouselItem.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/close-button/CCloseButton.api.html b/vue/docs/api/close-button/CCloseButton.api.html
index d386cb3ef7a..a6ed4dccc88 100644
--- a/vue/docs/api/close-button/CCloseButton.api.html
+++ b/vue/docs/api/close-button/CCloseButton.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/collapse/CCollapse.api.html b/vue/docs/api/collapse/CCollapse.api.html
index fdce7f93ba7..0c24f5c0ff6 100644
--- a/vue/docs/api/collapse/CCollapse.api.html
+++ b/vue/docs/api/collapse/CCollapse.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/conditional-teleport/CConditionalTeleport.api.html b/vue/docs/api/conditional-teleport/CConditionalTeleport.api.html
index 793a11a75fb..82c306d3edd 100644
--- a/vue/docs/api/conditional-teleport/CConditionalTeleport.api.html
+++ b/vue/docs/api/conditional-teleport/CConditionalTeleport.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/coreui-icons-vue/src/CIcon.api.html b/vue/docs/api/coreui-icons-vue/src/CIcon.api.html
index 04e3258de28..24f67612b65 100644
--- a/vue/docs/api/coreui-icons-vue/src/CIcon.api.html
+++ b/vue/docs/api/coreui-icons-vue/src/CIcon.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/coreui-icons-vue/src/CIconSvg.api.html b/vue/docs/api/coreui-icons-vue/src/CIconSvg.api.html
new file mode 100644
index 00000000000..126cc8337ed
--- /dev/null
+++ b/vue/docs/api/coreui-icons-vue/src/CIconSvg.api.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
+    <script>
+      const userMode = localStorage.getItem('coreui-vue-docs-theme')
+      const systemDarkMode =
+        window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
+        document.documentElement.dataset.coreuiTheme = 'dark'
+      }
+    </script>
+    <link rel="canonical" href="https://coreui.io/vue/docs/api/coreui-icons-vue/src/CIconSvg.api.html"><link rel="icon" href="/vue/docs/favicons/favicon-96x96.png"><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <!--vuepress-ssr-resources-->
+  </head>
+  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-KX4JH47"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    <div id="app"><!--vuepress-ssr-app--></div>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
+  </body>
+</html>
diff --git a/vue/docs/api/date-picker/CDatePicker.api.html b/vue/docs/api/date-picker/CDatePicker.api.html
index c8bc8528fd2..d1deefdd81a 100644
--- a/vue/docs/api/date-picker/CDatePicker.api.html
+++ b/vue/docs/api/date-picker/CDatePicker.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/date-range-picker/CDateRangePicker.api.html b/vue/docs/api/date-range-picker/CDateRangePicker.api.html
index 8f67382837f..434a2f33e60 100644
--- a/vue/docs/api/date-range-picker/CDateRangePicker.api.html
+++ b/vue/docs/api/date-range-picker/CDateRangePicker.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdown.api.html b/vue/docs/api/dropdown/CDropdown.api.html
index 7b3ffcef0c9..99ffec020b7 100644
--- a/vue/docs/api/dropdown/CDropdown.api.html
+++ b/vue/docs/api/dropdown/CDropdown.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownDivider.api.html b/vue/docs/api/dropdown/CDropdownDivider.api.html
index ee7474fa037..31ec6f52fdf 100644
--- a/vue/docs/api/dropdown/CDropdownDivider.api.html
+++ b/vue/docs/api/dropdown/CDropdownDivider.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownHeader.api.html b/vue/docs/api/dropdown/CDropdownHeader.api.html
index 665f74a0f87..da868675813 100644
--- a/vue/docs/api/dropdown/CDropdownHeader.api.html
+++ b/vue/docs/api/dropdown/CDropdownHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownItem.api.html b/vue/docs/api/dropdown/CDropdownItem.api.html
index bb9c7257b26..ac93f4c5bbc 100644
--- a/vue/docs/api/dropdown/CDropdownItem.api.html
+++ b/vue/docs/api/dropdown/CDropdownItem.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownMenu.api.html b/vue/docs/api/dropdown/CDropdownMenu.api.html
index 79ff1968dd2..9634bb3b3db 100644
--- a/vue/docs/api/dropdown/CDropdownMenu.api.html
+++ b/vue/docs/api/dropdown/CDropdownMenu.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownToggle.api.html b/vue/docs/api/dropdown/CDropdownToggle.api.html
index 33f4cb5f820..68c6154bfcd 100644
--- a/vue/docs/api/dropdown/CDropdownToggle.api.html
+++ b/vue/docs/api/dropdown/CDropdownToggle.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/footer/CFooter.api.html b/vue/docs/api/footer/CFooter.api.html
index 10f1740e8a1..b778c3bd20b 100644
--- a/vue/docs/api/footer/CFooter.api.html
+++ b/vue/docs/api/footer/CFooter.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CForm.api.html b/vue/docs/api/form/CForm.api.html
index 80f79171088..bad1b0af21d 100644
--- a/vue/docs/api/form/CForm.api.html
+++ b/vue/docs/api/form/CForm.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormCheck.api.html b/vue/docs/api/form/CFormCheck.api.html
index 9e2bc120767..1f98631ad51 100644
--- a/vue/docs/api/form/CFormCheck.api.html
+++ b/vue/docs/api/form/CFormCheck.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormControl.api.html b/vue/docs/api/form/CFormControl.api.html
index 4575d015934..c46f1075b35 100644
--- a/vue/docs/api/form/CFormControl.api.html
+++ b/vue/docs/api/form/CFormControl.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormControlValidation.api.html b/vue/docs/api/form/CFormControlValidation.api.html
index ab574f63bbe..bece18ea2fd 100644
--- a/vue/docs/api/form/CFormControlValidation.api.html
+++ b/vue/docs/api/form/CFormControlValidation.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormControlWrapper.api.html b/vue/docs/api/form/CFormControlWrapper.api.html
index 4ce689e5a3d..730d1ead09e 100644
--- a/vue/docs/api/form/CFormControlWrapper.api.html
+++ b/vue/docs/api/form/CFormControlWrapper.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormFeedback.api.html b/vue/docs/api/form/CFormFeedback.api.html
index 31ff9575795..a488de34f69 100644
--- a/vue/docs/api/form/CFormFeedback.api.html
+++ b/vue/docs/api/form/CFormFeedback.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormFloating.api.html b/vue/docs/api/form/CFormFloating.api.html
index d5a9a312e12..29b2c25275e 100644
--- a/vue/docs/api/form/CFormFloating.api.html
+++ b/vue/docs/api/form/CFormFloating.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormInput.api.html b/vue/docs/api/form/CFormInput.api.html
index c5f09b565de..6c8b19a3703 100644
--- a/vue/docs/api/form/CFormInput.api.html
+++ b/vue/docs/api/form/CFormInput.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormLabel.api.html b/vue/docs/api/form/CFormLabel.api.html
index ea0020df21e..4ebcbf5e31e 100644
--- a/vue/docs/api/form/CFormLabel.api.html
+++ b/vue/docs/api/form/CFormLabel.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormRange.api.html b/vue/docs/api/form/CFormRange.api.html
index b1de824fd56..0fb62ff923f 100644
--- a/vue/docs/api/form/CFormRange.api.html
+++ b/vue/docs/api/form/CFormRange.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormSelect.api.html b/vue/docs/api/form/CFormSelect.api.html
index 9c160c2eaeb..e010e37d052 100644
--- a/vue/docs/api/form/CFormSelect.api.html
+++ b/vue/docs/api/form/CFormSelect.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormSwitch.api.html b/vue/docs/api/form/CFormSwitch.api.html
index 293f4dfea8b..adce4b364ba 100644
--- a/vue/docs/api/form/CFormSwitch.api.html
+++ b/vue/docs/api/form/CFormSwitch.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormText.api.html b/vue/docs/api/form/CFormText.api.html
index 42c6b717c72..fad27ee2dd6 100644
--- a/vue/docs/api/form/CFormText.api.html
+++ b/vue/docs/api/form/CFormText.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormTextarea.api.html b/vue/docs/api/form/CFormTextarea.api.html
index 6a1bf0ed8f5..b3bfd39cfbb 100644
--- a/vue/docs/api/form/CFormTextarea.api.html
+++ b/vue/docs/api/form/CFormTextarea.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CInputGroup.api.html b/vue/docs/api/form/CInputGroup.api.html
index ee9ba5b90cf..7ac656ce5e9 100644
--- a/vue/docs/api/form/CInputGroup.api.html
+++ b/vue/docs/api/form/CInputGroup.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CInputGroupText.api.html b/vue/docs/api/form/CInputGroupText.api.html
index be3d0512fc2..9ff7348893b 100644
--- a/vue/docs/api/form/CInputGroupText.api.html
+++ b/vue/docs/api/form/CInputGroupText.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/grid/CCol.api.html b/vue/docs/api/grid/CCol.api.html
index 98fb259bbce..4b1736735e4 100644
--- a/vue/docs/api/grid/CCol.api.html
+++ b/vue/docs/api/grid/CCol.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/grid/CContainer.api.html b/vue/docs/api/grid/CContainer.api.html
index 0fe2b7373d8..8a552ea7114 100644
--- a/vue/docs/api/grid/CContainer.api.html
+++ b/vue/docs/api/grid/CContainer.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/grid/CRow.api.html b/vue/docs/api/grid/CRow.api.html
index e6eca0cf8a6..a174af07d67 100644
--- a/vue/docs/api/grid/CRow.api.html
+++ b/vue/docs/api/grid/CRow.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeader.api.html b/vue/docs/api/header/CHeader.api.html
index 628e8bc06dd..cb3de4d2ff8 100644
--- a/vue/docs/api/header/CHeader.api.html
+++ b/vue/docs/api/header/CHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderBrand.api.html b/vue/docs/api/header/CHeaderBrand.api.html
index f2ed256a685..9be772631f9 100644
--- a/vue/docs/api/header/CHeaderBrand.api.html
+++ b/vue/docs/api/header/CHeaderBrand.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderDivider.api.html b/vue/docs/api/header/CHeaderDivider.api.html
index e92b86c3e12..6313e57d8c4 100644
--- a/vue/docs/api/header/CHeaderDivider.api.html
+++ b/vue/docs/api/header/CHeaderDivider.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderNav.api.html b/vue/docs/api/header/CHeaderNav.api.html
index 2d8c50d9102..8cf3bd0c7cb 100644
--- a/vue/docs/api/header/CHeaderNav.api.html
+++ b/vue/docs/api/header/CHeaderNav.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderText.api.html b/vue/docs/api/header/CHeaderText.api.html
index 26c70653c8d..caa6b1da1ca 100644
--- a/vue/docs/api/header/CHeaderText.api.html
+++ b/vue/docs/api/header/CHeaderText.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderToggler.api.html b/vue/docs/api/header/CHeaderToggler.api.html
index 905d4248e40..17a7941e3b4 100644
--- a/vue/docs/api/header/CHeaderToggler.api.html
+++ b/vue/docs/api/header/CHeaderToggler.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/image/CImage.api.html b/vue/docs/api/image/CImage.api.html
index 46397992087..dac0293336f 100644
--- a/vue/docs/api/image/CImage.api.html
+++ b/vue/docs/api/image/CImage.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/link/CLink.api.html b/vue/docs/api/link/CLink.api.html
index 81283c7650b..07aa8cb01d5 100644
--- a/vue/docs/api/link/CLink.api.html
+++ b/vue/docs/api/link/CLink.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/list-group/CListGroup.api.html b/vue/docs/api/list-group/CListGroup.api.html
index 8aedc65ccce..168fecfb134 100644
--- a/vue/docs/api/list-group/CListGroup.api.html
+++ b/vue/docs/api/list-group/CListGroup.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/list-group/CListGroupItem.api.html b/vue/docs/api/list-group/CListGroupItem.api.html
index b2fee7f6700..4e2d1880195 100644
--- a/vue/docs/api/list-group/CListGroupItem.api.html
+++ b/vue/docs/api/list-group/CListGroupItem.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/loading-button/CLoadingButton.api.html b/vue/docs/api/loading-button/CLoadingButton.api.html
index 5d25c276358..d17df359e64 100644
--- a/vue/docs/api/loading-button/CLoadingButton.api.html
+++ b/vue/docs/api/loading-button/CLoadingButton.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModal.api.html b/vue/docs/api/modal/CModal.api.html
index a80a1cfd374..9c6871e519a 100644
--- a/vue/docs/api/modal/CModal.api.html
+++ b/vue/docs/api/modal/CModal.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalBody.api.html b/vue/docs/api/modal/CModalBody.api.html
index d354753c5a8..7110b17946f 100644
--- a/vue/docs/api/modal/CModalBody.api.html
+++ b/vue/docs/api/modal/CModalBody.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalFooter.api.html b/vue/docs/api/modal/CModalFooter.api.html
index 77498ca02c2..39e890b3410 100644
--- a/vue/docs/api/modal/CModalFooter.api.html
+++ b/vue/docs/api/modal/CModalFooter.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalHeader.api.html b/vue/docs/api/modal/CModalHeader.api.html
index 94836e291c6..6dc2a34a801 100644
--- a/vue/docs/api/modal/CModalHeader.api.html
+++ b/vue/docs/api/modal/CModalHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalTitle.api.html b/vue/docs/api/modal/CModalTitle.api.html
index 3748ba1ab58..f4d6126c837 100644
--- a/vue/docs/api/modal/CModalTitle.api.html
+++ b/vue/docs/api/modal/CModalTitle.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/multi-select/CMultiSelect.api.html b/vue/docs/api/multi-select/CMultiSelect.api.html
index e88e1302f14..82601e68bfd 100644
--- a/vue/docs/api/multi-select/CMultiSelect.api.html
+++ b/vue/docs/api/multi-select/CMultiSelect.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/multi-select/CMultiSelectNativeSelect.api.html b/vue/docs/api/multi-select/CMultiSelectNativeSelect.api.html
index a5d523bb231..214a6916559 100644
--- a/vue/docs/api/multi-select/CMultiSelectNativeSelect.api.html
+++ b/vue/docs/api/multi-select/CMultiSelectNativeSelect.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/multi-select/CMultiSelectOptions.api.html b/vue/docs/api/multi-select/CMultiSelectOptions.api.html
index 9d4c6f219e4..c539a880000 100644
--- a/vue/docs/api/multi-select/CMultiSelectOptions.api.html
+++ b/vue/docs/api/multi-select/CMultiSelectOptions.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/multi-select/CMultiSelectSelection.api.html b/vue/docs/api/multi-select/CMultiSelectSelection.api.html
index c926e4720cc..5be1807f2e1 100644
--- a/vue/docs/api/multi-select/CMultiSelectSelection.api.html
+++ b/vue/docs/api/multi-select/CMultiSelectSelection.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNav.api.html b/vue/docs/api/nav/CNav.api.html
index 301fcb4e130..8f20e1374cf 100644
--- a/vue/docs/api/nav/CNav.api.html
+++ b/vue/docs/api/nav/CNav.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavGroup.api.html b/vue/docs/api/nav/CNavGroup.api.html
index a07b42deedf..997e41271f1 100644
--- a/vue/docs/api/nav/CNavGroup.api.html
+++ b/vue/docs/api/nav/CNavGroup.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavGroupItems.api.html b/vue/docs/api/nav/CNavGroupItems.api.html
index 971547aa6e1..d9193de9240 100644
--- a/vue/docs/api/nav/CNavGroupItems.api.html
+++ b/vue/docs/api/nav/CNavGroupItems.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavItem.api.html b/vue/docs/api/nav/CNavItem.api.html
index 8dc37da2fdf..c27f4bdcb9b 100644
--- a/vue/docs/api/nav/CNavItem.api.html
+++ b/vue/docs/api/nav/CNavItem.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavLink.api.html b/vue/docs/api/nav/CNavLink.api.html
index 78bc94754cd..eb7a4114608 100644
--- a/vue/docs/api/nav/CNavLink.api.html
+++ b/vue/docs/api/nav/CNavLink.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavTitle.api.html b/vue/docs/api/nav/CNavTitle.api.html
index 3ac1c41f33e..4fd90acecf6 100644
--- a/vue/docs/api/nav/CNavTitle.api.html
+++ b/vue/docs/api/nav/CNavTitle.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbar.api.html b/vue/docs/api/navbar/CNavbar.api.html
index df831206739..849a89f4d3c 100644
--- a/vue/docs/api/navbar/CNavbar.api.html
+++ b/vue/docs/api/navbar/CNavbar.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarBrand.api.html b/vue/docs/api/navbar/CNavbarBrand.api.html
index 0bc52ea2552..bf5e3b89a51 100644
--- a/vue/docs/api/navbar/CNavbarBrand.api.html
+++ b/vue/docs/api/navbar/CNavbarBrand.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarNav.api.html b/vue/docs/api/navbar/CNavbarNav.api.html
index 3a5750846f6..8b59a046971 100644
--- a/vue/docs/api/navbar/CNavbarNav.api.html
+++ b/vue/docs/api/navbar/CNavbarNav.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarText.api.html b/vue/docs/api/navbar/CNavbarText.api.html
index 4b71d39883b..feb8147dd59 100644
--- a/vue/docs/api/navbar/CNavbarText.api.html
+++ b/vue/docs/api/navbar/CNavbarText.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarToggler.api.html b/vue/docs/api/navbar/CNavbarToggler.api.html
index 3d55ee0d82d..b9a83522868 100644
--- a/vue/docs/api/navbar/CNavbarToggler.api.html
+++ b/vue/docs/api/navbar/CNavbarToggler.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvas.api.html b/vue/docs/api/offcanvas/COffcanvas.api.html
index 54fcd4fec38..17f3615633c 100644
--- a/vue/docs/api/offcanvas/COffcanvas.api.html
+++ b/vue/docs/api/offcanvas/COffcanvas.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvasBody.api.html b/vue/docs/api/offcanvas/COffcanvasBody.api.html
index 10c0bb81b1a..a297061c516 100644
--- a/vue/docs/api/offcanvas/COffcanvasBody.api.html
+++ b/vue/docs/api/offcanvas/COffcanvasBody.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvasHeader.api.html b/vue/docs/api/offcanvas/COffcanvasHeader.api.html
index d73f2254936..671eb719859 100644
--- a/vue/docs/api/offcanvas/COffcanvasHeader.api.html
+++ b/vue/docs/api/offcanvas/COffcanvasHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvasTitle.api.html b/vue/docs/api/offcanvas/COffcanvasTitle.api.html
index da15d5defda..c524e630767 100644
--- a/vue/docs/api/offcanvas/COffcanvasTitle.api.html
+++ b/vue/docs/api/offcanvas/COffcanvasTitle.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/pagination/CPagination.api.html b/vue/docs/api/pagination/CPagination.api.html
index 4e4ef5a81c4..a17a6f3ec79 100644
--- a/vue/docs/api/pagination/CPagination.api.html
+++ b/vue/docs/api/pagination/CPagination.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/pagination/CPaginationItem.api.html b/vue/docs/api/pagination/CPaginationItem.api.html
index 8a66b5f3767..535c78df394 100644
--- a/vue/docs/api/pagination/CPaginationItem.api.html
+++ b/vue/docs/api/pagination/CPaginationItem.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/pagination/CSmartPagination.api.html b/vue/docs/api/pagination/CSmartPagination.api.html
index 11f1f1b46c7..ea0b1192a1a 100644
--- a/vue/docs/api/pagination/CSmartPagination.api.html
+++ b/vue/docs/api/pagination/CSmartPagination.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/picker/CPicker.api.html b/vue/docs/api/picker/CPicker.api.html
index 34dcff8cc16..54244eb7a04 100644
--- a/vue/docs/api/picker/CPicker.api.html
+++ b/vue/docs/api/picker/CPicker.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/placeholder/CPlaceholder.api.html b/vue/docs/api/placeholder/CPlaceholder.api.html
index a3ee03ddf87..acd1b654c02 100644
--- a/vue/docs/api/placeholder/CPlaceholder.api.html
+++ b/vue/docs/api/placeholder/CPlaceholder.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/popover/CPopover.api.html b/vue/docs/api/popover/CPopover.api.html
index cf20b568b64..f2a60788266 100644
--- a/vue/docs/api/popover/CPopover.api.html
+++ b/vue/docs/api/popover/CPopover.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/progress/CProgress.api.html b/vue/docs/api/progress/CProgress.api.html
index a45fd813708..56ffc56bcc5 100644
--- a/vue/docs/api/progress/CProgress.api.html
+++ b/vue/docs/api/progress/CProgress.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/progress/CProgressBar.api.html b/vue/docs/api/progress/CProgressBar.api.html
index d2b17cb7671..9b112b7559f 100644
--- a/vue/docs/api/progress/CProgressBar.api.html
+++ b/vue/docs/api/progress/CProgressBar.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/progress/CProgressStacked.api.html b/vue/docs/api/progress/CProgressStacked.api.html
index 45273c27646..c76ac74a385 100644
--- a/vue/docs/api/progress/CProgressStacked.api.html
+++ b/vue/docs/api/progress/CProgressStacked.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/rating/CRating.api.html b/vue/docs/api/rating/CRating.api.html
index 4afa05a85d3..6645cffa0cf 100644
--- a/vue/docs/api/rating/CRating.api.html
+++ b/vue/docs/api/rating/CRating.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebar.api.html b/vue/docs/api/sidebar/CSidebar.api.html
index e6571b7daa7..1dd159d7d2e 100644
--- a/vue/docs/api/sidebar/CSidebar.api.html
+++ b/vue/docs/api/sidebar/CSidebar.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarBrand.api.html b/vue/docs/api/sidebar/CSidebarBrand.api.html
index 181287c5c71..977ba070eec 100644
--- a/vue/docs/api/sidebar/CSidebarBrand.api.html
+++ b/vue/docs/api/sidebar/CSidebarBrand.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarFooter.api.html b/vue/docs/api/sidebar/CSidebarFooter.api.html
index c7e30a9713a..42be28cae34 100644
--- a/vue/docs/api/sidebar/CSidebarFooter.api.html
+++ b/vue/docs/api/sidebar/CSidebarFooter.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarHeader.api.html b/vue/docs/api/sidebar/CSidebarHeader.api.html
index c3023d6087e..7b08a2ba7b8 100644
--- a/vue/docs/api/sidebar/CSidebarHeader.api.html
+++ b/vue/docs/api/sidebar/CSidebarHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarNav.api.html b/vue/docs/api/sidebar/CSidebarNav.api.html
index d2fefa8c9e4..514d9aaf6e7 100644
--- a/vue/docs/api/sidebar/CSidebarNav.api.html
+++ b/vue/docs/api/sidebar/CSidebarNav.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarToggler.api.html b/vue/docs/api/sidebar/CSidebarToggler.api.html
index 80aebaccfb1..a37cb5edef1 100644
--- a/vue/docs/api/sidebar/CSidebarToggler.api.html
+++ b/vue/docs/api/sidebar/CSidebarToggler.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/smart-pagination/CSmartPagination.api.html b/vue/docs/api/smart-pagination/CSmartPagination.api.html
index 9ace5edbdb3..7bdad4bb19f 100644
--- a/vue/docs/api/smart-pagination/CSmartPagination.api.html
+++ b/vue/docs/api/smart-pagination/CSmartPagination.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/smart-table/CSmartTable.api.html b/vue/docs/api/smart-table/CSmartTable.api.html
index f34deb15456..cf416a1f3b4 100644
--- a/vue/docs/api/smart-table/CSmartTable.api.html
+++ b/vue/docs/api/smart-table/CSmartTable.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/smart-table/CSmartTableBody.api.html b/vue/docs/api/smart-table/CSmartTableBody.api.html
index ee57563487e..95379cb5dcd 100644
--- a/vue/docs/api/smart-table/CSmartTableBody.api.html
+++ b/vue/docs/api/smart-table/CSmartTableBody.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/smart-table/CSmartTableCleaner.api.html b/vue/docs/api/smart-table/CSmartTableCleaner.api.html
index 61d245f4c4f..af6697e8157 100644
--- a/vue/docs/api/smart-table/CSmartTableCleaner.api.html
+++ b/vue/docs/api/smart-table/CSmartTableCleaner.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/smart-table/CSmartTableFilter.api.html b/vue/docs/api/smart-table/CSmartTableFilter.api.html
index c12bb3df17e..05d39443203 100644
--- a/vue/docs/api/smart-table/CSmartTableFilter.api.html
+++ b/vue/docs/api/smart-table/CSmartTableFilter.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/smart-table/CSmartTableHead.api.html b/vue/docs/api/smart-table/CSmartTableHead.api.html
index 3c39a20b1ea..aae0d19aa44 100644
--- a/vue/docs/api/smart-table/CSmartTableHead.api.html
+++ b/vue/docs/api/smart-table/CSmartTableHead.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/smart-table/CSmartTableItemsPerPageSelector.api.html b/vue/docs/api/smart-table/CSmartTableItemsPerPageSelector.api.html
index e54dfc4635e..c59cded9ad3 100644
--- a/vue/docs/api/smart-table/CSmartTableItemsPerPageSelector.api.html
+++ b/vue/docs/api/smart-table/CSmartTableItemsPerPageSelector.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/spinner/CSpinner.api.html b/vue/docs/api/spinner/CSpinner.api.html
index cc38e450b0f..797e80e883c 100644
--- a/vue/docs/api/spinner/CSpinner.api.html
+++ b/vue/docs/api/spinner/CSpinner.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTable.api.html b/vue/docs/api/table/CTable.api.html
index b8c025fe967..94adabf3b73 100644
--- a/vue/docs/api/table/CTable.api.html
+++ b/vue/docs/api/table/CTable.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableBody.api.html b/vue/docs/api/table/CTableBody.api.html
index 2ce39499587..4f5cf833e59 100644
--- a/vue/docs/api/table/CTableBody.api.html
+++ b/vue/docs/api/table/CTableBody.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableCaption.api.html b/vue/docs/api/table/CTableCaption.api.html
index 155d1ef9dc0..af9476386ef 100644
--- a/vue/docs/api/table/CTableCaption.api.html
+++ b/vue/docs/api/table/CTableCaption.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableDataCell.api.html b/vue/docs/api/table/CTableDataCell.api.html
index 8a65f578a5b..f34bf6a37b7 100644
--- a/vue/docs/api/table/CTableDataCell.api.html
+++ b/vue/docs/api/table/CTableDataCell.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableFoot.api.html b/vue/docs/api/table/CTableFoot.api.html
index 57276151e70..eac01a1c027 100644
--- a/vue/docs/api/table/CTableFoot.api.html
+++ b/vue/docs/api/table/CTableFoot.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableHead.api.html b/vue/docs/api/table/CTableHead.api.html
index f1468699030..e62268c9155 100644
--- a/vue/docs/api/table/CTableHead.api.html
+++ b/vue/docs/api/table/CTableHead.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableHeaderCell.api.html b/vue/docs/api/table/CTableHeaderCell.api.html
index 96d27b5e532..9c12b00a990 100644
--- a/vue/docs/api/table/CTableHeaderCell.api.html
+++ b/vue/docs/api/table/CTableHeaderCell.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableRow.api.html b/vue/docs/api/table/CTableRow.api.html
index 28ee784fd8d..b5215972b78 100644
--- a/vue/docs/api/table/CTableRow.api.html
+++ b/vue/docs/api/table/CTableRow.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTab.api.html b/vue/docs/api/tabs/CTab.api.html
index 4441335ea8f..915e4bcdbe5 100644
--- a/vue/docs/api/tabs/CTab.api.html
+++ b/vue/docs/api/tabs/CTab.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabContent.api.html b/vue/docs/api/tabs/CTabContent.api.html
index 8bad44d00c5..c94c1e0c522 100644
--- a/vue/docs/api/tabs/CTabContent.api.html
+++ b/vue/docs/api/tabs/CTabContent.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabList.api.html b/vue/docs/api/tabs/CTabList.api.html
index b6bf3877327..10a14d79e07 100644
--- a/vue/docs/api/tabs/CTabList.api.html
+++ b/vue/docs/api/tabs/CTabList.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabPane.api.html b/vue/docs/api/tabs/CTabPane.api.html
index f4d9ba1c8e6..e26ca211357 100644
--- a/vue/docs/api/tabs/CTabPane.api.html
+++ b/vue/docs/api/tabs/CTabPane.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabPanel.api.html b/vue/docs/api/tabs/CTabPanel.api.html
index 0fe6fe3d9ed..ad88a1343ba 100644
--- a/vue/docs/api/tabs/CTabPanel.api.html
+++ b/vue/docs/api/tabs/CTabPanel.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabs.api.html b/vue/docs/api/tabs/CTabs.api.html
index bb24a53e8fd..dcc0f170b13 100644
--- a/vue/docs/api/tabs/CTabs.api.html
+++ b/vue/docs/api/tabs/CTabs.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/time-picker/CTimePicker.api.html b/vue/docs/api/time-picker/CTimePicker.api.html
index efe8ebae76d..5c8ab4cabab 100644
--- a/vue/docs/api/time-picker/CTimePicker.api.html
+++ b/vue/docs/api/time-picker/CTimePicker.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/time-picker/CTimePickerRollCol.api.html b/vue/docs/api/time-picker/CTimePickerRollCol.api.html
index afed9051d2d..0ca76a18f91 100644
--- a/vue/docs/api/time-picker/CTimePickerRollCol.api.html
+++ b/vue/docs/api/time-picker/CTimePickerRollCol.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToast.api.html b/vue/docs/api/toast/CToast.api.html
index d2df2799dcc..ce2c32db535 100644
--- a/vue/docs/api/toast/CToast.api.html
+++ b/vue/docs/api/toast/CToast.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToastBody.api.html b/vue/docs/api/toast/CToastBody.api.html
index 09d1276ddf3..4c162c530ed 100644
--- a/vue/docs/api/toast/CToastBody.api.html
+++ b/vue/docs/api/toast/CToastBody.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToastClose.api.html b/vue/docs/api/toast/CToastClose.api.html
index 1b75d46c276..49353daa6ea 100644
--- a/vue/docs/api/toast/CToastClose.api.html
+++ b/vue/docs/api/toast/CToastClose.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToastHeader.api.html b/vue/docs/api/toast/CToastHeader.api.html
index 01d54fb3f63..3660f55c399 100644
--- a/vue/docs/api/toast/CToastHeader.api.html
+++ b/vue/docs/api/toast/CToastHeader.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToaster.api.html b/vue/docs/api/toast/CToaster.api.html
index 09e5a32b5d9..7feb162d294 100644
--- a/vue/docs/api/toast/CToaster.api.html
+++ b/vue/docs/api/toast/CToaster.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tooltip/CTooltip.api.html b/vue/docs/api/tooltip/CTooltip.api.html
index 7424ad930fe..9f5058ba715 100644
--- a/vue/docs/api/tooltip/CTooltip.api.html
+++ b/vue/docs/api/tooltip/CTooltip.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/virtual-scroller/CVirtualScroller.api.html b/vue/docs/api/virtual-scroller/CVirtualScroller.api.html
index 57da6b865f1..9397e36b928 100644
--- a/vue/docs/api/virtual-scroller/CVirtualScroller.api.html
+++ b/vue/docs/api/virtual-scroller/CVirtualScroller.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsA.api.html b/vue/docs/api/widgets/CWidgetStatsA.api.html
index 559eea08db6..b67f3a82b2b 100644
--- a/vue/docs/api/widgets/CWidgetStatsA.api.html
+++ b/vue/docs/api/widgets/CWidgetStatsA.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsB.api.html b/vue/docs/api/widgets/CWidgetStatsB.api.html
index 4f5d867b09e..63086ffaeec 100644
--- a/vue/docs/api/widgets/CWidgetStatsB.api.html
+++ b/vue/docs/api/widgets/CWidgetStatsB.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsC.api.html b/vue/docs/api/widgets/CWidgetStatsC.api.html
index ae85577c375..169e8910bec 100644
--- a/vue/docs/api/widgets/CWidgetStatsC.api.html
+++ b/vue/docs/api/widgets/CWidgetStatsC.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsD.api.html b/vue/docs/api/widgets/CWidgetStatsD.api.html
index f8e3b650388..7a5de608a10 100644
--- a/vue/docs/api/widgets/CWidgetStatsD.api.html
+++ b/vue/docs/api/widgets/CWidgetStatsD.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsE.api.html b/vue/docs/api/widgets/CWidgetStatsE.api.html
index 5aff3a30494..0fbb45a25e7 100644
--- a/vue/docs/api/widgets/CWidgetStatsE.api.html
+++ b/vue/docs/api/widgets/CWidgetStatsE.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsF.api.html b/vue/docs/api/widgets/CWidgetStatsF.api.html
index 909264877bf..d6152a258f8 100644
--- a/vue/docs/api/widgets/CWidgetStatsF.api.html
+++ b/vue/docs/api/widgets/CWidgetStatsF.api.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/assets/404.html-B1Fx-RCH.js b/vue/docs/assets/404.html-RliG702a.js
similarity index 92%
rename from vue/docs/assets/404.html-B1Fx-RCH.js
rename to vue/docs/assets/404.html-RliG702a.js
index 128524486cc..9bb521149ce 100644
--- a/vue/docs/assets/404.html-B1Fx-RCH.js
+++ b/vue/docs/assets/404.html-RliG702a.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createBaseVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, e as createBaseVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("p", null, "404 Not Found", -1);
 const _hoisted_2 = [
diff --git a/vue/docs/assets/CAccordion.api.html-CCgXqfRP.js b/vue/docs/assets/CAccordion.api.html-BmmCbR4F.js
similarity index 67%
rename from vue/docs/assets/CAccordion.api.html-CCgXqfRP.js
rename to vue/docs/assets/CAccordion.api.html-BmmCbR4F.js
index 4abab297972..ea5ad0cd802 100644
--- a/vue/docs/assets/CAccordion.api.html-CCgXqfRP.js
+++ b/vue/docs/assets/CAccordion.api.html-BmmCbR4F.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordion" tabindex="-1">CAccordion <a class="anchor-link" href="#caccordion" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordion <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordion <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordion&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>always-open</strong></td><td>Make accordion items stay open when another item is opened</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>flush</strong></td><td>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordion" tabindex="-1">CAccordion <a class="anchor-link" href="#caccordion" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordion <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordion <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordion&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>always-open</strong></td><td>Make accordion items stay open when another item is opened</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>flush</strong></td><td>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAccordionBody.api.html-BXRTlfny.js b/vue/docs/assets/CAccordionBody.api.html-DnDWpn--.js
similarity index 55%
rename from vue/docs/assets/CAccordionBody.api.html-BXRTlfny.js
rename to vue/docs/assets/CAccordionBody.api.html-DnDWpn--.js
index a3ffca99f99..0ae89876831 100644
--- a/vue/docs/assets/CAccordionBody.api.html-BXRTlfny.js
+++ b/vue/docs/assets/CAccordionBody.api.html-DnDWpn--.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionbody" tabindex="-1">CAccordionBody <a class="anchor-link" href="#caccordionbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionbody" tabindex="-1">CAccordionBody <a class="anchor-link" href="#caccordionbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAccordionButton.api.html-JC9LLjmn.js b/vue/docs/assets/CAccordionButton.api.html-BFZVkVlR.js
similarity index 55%
rename from vue/docs/assets/CAccordionButton.api.html-JC9LLjmn.js
rename to vue/docs/assets/CAccordionButton.api.html-BFZVkVlR.js
index 2f3685ab1b8..6e9d46ce3f8 100644
--- a/vue/docs/assets/CAccordionButton.api.html-JC9LLjmn.js
+++ b/vue/docs/assets/CAccordionButton.api.html-BFZVkVlR.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionbutton" tabindex="-1">CAccordionButton <a class="anchor-link" href="#caccordionbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionbutton" tabindex="-1">CAccordionButton <a class="anchor-link" href="#caccordionbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAccordionHeader.api.html-DGQX2wqH.js b/vue/docs/assets/CAccordionHeader.api.html-D3E3-RrY.js
similarity index 55%
rename from vue/docs/assets/CAccordionHeader.api.html-DGQX2wqH.js
rename to vue/docs/assets/CAccordionHeader.api.html-D3E3-RrY.js
index 6c7384cd767..15e2d3cb8bf 100644
--- a/vue/docs/assets/CAccordionHeader.api.html-DGQX2wqH.js
+++ b/vue/docs/assets/CAccordionHeader.api.html-D3E3-RrY.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionheader" tabindex="-1">CAccordionHeader <a class="anchor-link" href="#caccordionheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionheader" tabindex="-1">CAccordionHeader <a class="anchor-link" href="#caccordionheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAccordionItem.api.html-BpbqLkXq.js b/vue/docs/assets/CAccordionItem.api.html-B_Gvnaeq.js
similarity index 62%
rename from vue/docs/assets/CAccordionItem.api.html-BpbqLkXq.js
rename to vue/docs/assets/CAccordionItem.api.html-B_Gvnaeq.js
index f609e882e83..3c75f25e17f 100644
--- a/vue/docs/assets/CAccordionItem.api.html-BpbqLkXq.js
+++ b/vue/docs/assets/CAccordionItem.api.html-B_Gvnaeq.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionitem" tabindex="-1">CAccordionItem <a class="anchor-link" href="#caccordionitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>The item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionitem" tabindex="-1">CAccordionItem <a class="anchor-link" href="#caccordionitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>The item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAlert.api.html-DJfiMGtZ.js b/vue/docs/assets/CAlert.api.html-BXjHGX6m.js
similarity index 75%
rename from vue/docs/assets/CAlert.api.html-DJfiMGtZ.js
rename to vue/docs/assets/CAlert.api.html-BXjHGX6m.js
index 9523e25bb12..42cf9df6369 100644
--- a/vue/docs/assets/CAlert.api.html-DJfiMGtZ.js
+++ b/vue/docs/assets/CAlert.api.html-BXjHGX6m.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlert <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlert&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to alert and allow it to self dismisss.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the alert variant to a solid.</td><td>string</td><td><code>&#39;solid&#39;</code></td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlert <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlert&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to alert and allow it to self dismisss.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the alert variant to a solid.</td><td>string</td><td><code>&#39;solid&#39;</code></td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAlertHeading.api.html-D0Fv3SkG.js b/vue/docs/assets/CAlertHeading.api.html-DoJskrT2.js
similarity index 63%
rename from vue/docs/assets/CAlertHeading.api.html-D0Fv3SkG.js
rename to vue/docs/assets/CAlertHeading.api.html-DoJskrT2.js
index cd297c56c43..ad4299724c0 100644
--- a/vue/docs/assets/CAlertHeading.api.html-D0Fv3SkG.js
+++ b/vue/docs/assets/CAlertHeading.api.html-DoJskrT2.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlertHeading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlertHeading <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlertHeading&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h4&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlertHeading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlertHeading <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlertHeading&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h4&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAlertLink.api.html-DT7bhrUL.js b/vue/docs/assets/CAlertLink.api.html-Be4cejDR.js
similarity index 56%
rename from vue/docs/assets/CAlertLink.api.html-DT7bhrUL.js
rename to vue/docs/assets/CAlertLink.api.html-Be4cejDR.js
index ce2f705bdd8..f303909c7dc 100644
--- a/vue/docs/assets/CAlertLink.api.html-DT7bhrUL.js
+++ b/vue/docs/assets/CAlertLink.api.html-Be4cejDR.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calertlink" tabindex="-1">CAlertLink <a class="anchor-link" href="#calertlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlertLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlertLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlertLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calertlink" tabindex="-1">CAlertLink <a class="anchor-link" href="#calertlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlertLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlertLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlertLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CAvatar.api.html-CouQnPfO.js b/vue/docs/assets/CAvatar.api.html-BTqEczbV.js
similarity index 82%
rename from vue/docs/assets/CAvatar.api.html-CouQnPfO.js
rename to vue/docs/assets/CAvatar.api.html-BTqEczbV.js
index 2dc85b5455a..d3608cee543 100644
--- a/vue/docs/assets/CAvatar.api.html-CouQnPfO.js
+++ b/vue/docs/assets/CAvatar.api.html-BTqEczbV.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAvatar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAvatar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/avatar/CAvatar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>src</strong></td><td>The src attribute for the img element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>status</strong></td><td>Sets the color context of the status indicator to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAvatar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAvatar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/avatar/CAvatar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>src</strong></td><td>The src attribute for the img element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>status</strong></td><td>Sets the color context of the status indicator to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CBackdrop.api.html-DPM6F3Ms.js b/vue/docs/assets/CBackdrop.api.html-DAmzayp3.js
similarity index 64%
rename from vue/docs/assets/CBackdrop.api.html-DPM6F3Ms.js
rename to vue/docs/assets/CBackdrop.api.html-DAmzayp3.js
index aa2610249fd..43bf3626041 100644
--- a/vue/docs/assets/CBackdrop.api.html-DPM6F3Ms.js
+++ b/vue/docs/assets/CBackdrop.api.html-DAmzayp3.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbackdrop" tabindex="-1">CBackdrop <a class="anchor-link" href="#cbackdrop" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBackdrop <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBackdrop <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/backdrop/CBackdrop&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>visible</strong></td><td>Toggle the visibility of modal component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbackdrop" tabindex="-1">CBackdrop <a class="anchor-link" href="#cbackdrop" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBackdrop <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBackdrop <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/backdrop/CBackdrop&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>visible</strong></td><td>Toggle the visibility of modal component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CBadge.api.html-D2uxambY.js b/vue/docs/assets/CBadge.api.html-CgAts6f4.js
similarity index 84%
rename from vue/docs/assets/CBadge.api.html-D2uxambY.js
rename to vue/docs/assets/CBadge.api.html-CgAts6f4.js
index f2c316d0d4e..98b5ebdc080 100644
--- a/vue/docs/assets/CBadge.api.html-D2uxambY.js
+++ b/vue/docs/assets/CBadge.api.html-CgAts6f4.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBadge <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBadge <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/badge/CBadge&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Position badge in one of the corners of a link or button.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom-start&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBadge <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBadge <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/badge/CBadge&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Position badge in one of the corners of a link or button.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom-start&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CBreadcrumb.api.html-D3NX_pJM.js b/vue/docs/assets/CBreadcrumb.api.html-DqwjKss4.js
similarity index 54%
rename from vue/docs/assets/CBreadcrumb.api.html-D3NX_pJM.js
rename to vue/docs/assets/CBreadcrumb.api.html-DqwjKss4.js
index 37cff3ed697..df996037c94 100644
--- a/vue/docs/assets/CBreadcrumb.api.html-D3NX_pJM.js
+++ b/vue/docs/assets/CBreadcrumb.api.html-DqwjKss4.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbreadcrumb" tabindex="-1">CBreadcrumb <a class="anchor-link" href="#cbreadcrumb" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBreadcrumb <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBreadcrumb <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/breadcrumb/CBreadcrumb&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbreadcrumb" tabindex="-1">CBreadcrumb <a class="anchor-link" href="#cbreadcrumb" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBreadcrumb <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBreadcrumb <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/breadcrumb/CBreadcrumb&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CBreadcrumbItem.api.html-BdrNJeRK.js b/vue/docs/assets/CBreadcrumbItem.api.html-r9RgIwJD.js
similarity index 65%
rename from vue/docs/assets/CBreadcrumbItem.api.html-BdrNJeRK.js
rename to vue/docs/assets/CBreadcrumbItem.api.html-r9RgIwJD.js
index 882691d2887..cd56aeddd1e 100644
--- a/vue/docs/assets/CBreadcrumbItem.api.html-BdrNJeRK.js
+++ b/vue/docs/assets/CBreadcrumbItem.api.html-r9RgIwJD.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbreadcrumbitem" tabindex="-1">CBreadcrumbItem <a class="anchor-link" href="#cbreadcrumbitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBreadcrumbItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBreadcrumbItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/breadcrumb/CBreadcrumbItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The <code>href</code> attribute for the inner link component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbreadcrumbitem" tabindex="-1">CBreadcrumbItem <a class="anchor-link" href="#cbreadcrumbitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBreadcrumbItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBreadcrumbItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/breadcrumb/CBreadcrumbItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The <code>href</code> attribute for the inner link component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CButton.api.html-S2e0JYUT.js b/vue/docs/assets/CButton.api.html-ekRjLD2P.js
similarity index 82%
rename from vue/docs/assets/CButton.api.html-S2e0JYUT.js
rename to vue/docs/assets/CButton.api.html-ekRjLD2P.js
index 6f06228312c..558086887ca 100644
--- a/vue/docs/assets/CButton.api.html-S2e0JYUT.js
+++ b/vue/docs/assets/CButton.api.html-ekRjLD2P.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button/CButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of button. Always specify the type attribute for the <code>&lt;button&gt;</code> element.<br>Different browsers may use different default types for the <code>&lt;button&gt;</code> element.</td><td>string</td><td><code>&#39;button&#39;</code>, <code>&#39;submit&#39;</code>, <code>&#39;reset&#39;</code></td><td>&#39;button&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the button.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button/CButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of button. Always specify the type attribute for the <code>&lt;button&gt;</code> element.<br>Different browsers may use different default types for the <code>&lt;button&gt;</code> element.</td><td>string</td><td><code>&#39;button&#39;</code>, <code>&#39;submit&#39;</code>, <code>&#39;reset&#39;</code></td><td>&#39;button&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the button.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CButtonGroup.api.html-CNYwPqP9.js b/vue/docs/assets/CButtonGroup.api.html-D0mJf4Og.js
similarity index 66%
rename from vue/docs/assets/CButtonGroup.api.html-CNYwPqP9.js
rename to vue/docs/assets/CButtonGroup.api.html-D0mJf4Og.js
index 67ed1c3dad5..3de720abb1f 100644
--- a/vue/docs/assets/CButtonGroup.api.html-CNYwPqP9.js
+++ b/vue/docs/assets/CButtonGroup.api.html-D0mJf4Og.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbuttongroup" tabindex="-1">CButtonGroup <a class="anchor-link" href="#cbuttongroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButtonGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButtonGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button-group/CButtonGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>vertical</strong></td><td>Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbuttongroup" tabindex="-1">CButtonGroup <a class="anchor-link" href="#cbuttongroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButtonGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButtonGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button-group/CButtonGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>vertical</strong></td><td>Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CButtonToolbar.api.html-BCPhzaLb.js b/vue/docs/assets/CButtonToolbar.api.html-IKoND_KL.js
similarity index 55%
rename from vue/docs/assets/CButtonToolbar.api.html-BCPhzaLb.js
rename to vue/docs/assets/CButtonToolbar.api.html-IKoND_KL.js
index c51925503a4..92283769f12 100644
--- a/vue/docs/assets/CButtonToolbar.api.html-BCPhzaLb.js
+++ b/vue/docs/assets/CButtonToolbar.api.html-IKoND_KL.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbuttontoolbar" tabindex="-1">CButtonToolbar <a class="anchor-link" href="#cbuttontoolbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButtonToolbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButtonToolbar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button-group/CButtonToolbar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbuttontoolbar" tabindex="-1">CButtonToolbar <a class="anchor-link" href="#cbuttontoolbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButtonToolbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButtonToolbar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button-group/CButtonToolbar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCalendar.api.html-B_m_ZnQs.js b/vue/docs/assets/CCalendar.api.html-C4aT9FYA.js
similarity index 87%
rename from vue/docs/assets/CCalendar.api.html-B_m_ZnQs.js
rename to vue/docs/assets/CCalendar.api.html-C4aT9FYA.js
index 2a6495d1031..16875cce8ca 100644
--- a/vue/docs/assets/CCalendar.api.html-B_m_ZnQs.js
+++ b/vue/docs/assets/CCalendar.api.html-C4aT9FYA.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccalendar" tabindex="-1">CCalendar <a class="anchor-link" href="#ccalendar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCalendar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCalendar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/calendar/CCalendar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>range</strong></td><td>Allow range selection.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-hover</strong></td><td>Callback fired when the user hovers over the calendar cell.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>calendar-date-change</strong></td><td>Callback fired when the calendar date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccalendar" tabindex="-1">CCalendar <a class="anchor-link" href="#ccalendar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCalendar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCalendar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/calendar/CCalendar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>range</strong></td><td>Allow range selection.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-hover</strong></td><td>Callback fired when the user hovers over the calendar cell.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>calendar-date-change</strong></td><td>Callback fired when the calendar date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCallout.api.html-Ce91fCqR.js b/vue/docs/assets/CCallout.api.html-DiF4unWf.js
similarity index 67%
rename from vue/docs/assets/CCallout.api.html-Ce91fCqR.js
rename to vue/docs/assets/CCallout.api.html-DiF4unWf.js
index d263fbf0160..a4a57e1be11 100644
--- a/vue/docs/assets/CCallout.api.html-Ce91fCqR.js
+++ b/vue/docs/assets/CCallout.api.html-DiF4unWf.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccallout" tabindex="-1">CCallout <a class="anchor-link" href="#ccallout" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCallout <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCallout <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/callout/CCallout&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccallout" tabindex="-1">CCallout <a class="anchor-link" href="#ccallout" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCallout <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCallout <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/callout/CCallout&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCard.api.html-YiMTrKiJ.js b/vue/docs/assets/CCard.api.html-BmbaZsmK.js
similarity index 79%
rename from vue/docs/assets/CCard.api.html-YiMTrKiJ.js
rename to vue/docs/assets/CCard.api.html-BmbaZsmK.js
index def634509f5..b9c3bad5e76 100644
--- a/vue/docs/assets/CCard.api.html-YiMTrKiJ.js
+++ b/vue/docs/assets/CCard.api.html-BmbaZsmK.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCard <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCard <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCard&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCard <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCard <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCard&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardBody.api.html-B_R1oJ7-.js b/vue/docs/assets/CCardBody.api.html-D0-tGYrD.js
similarity index 56%
rename from vue/docs/assets/CCardBody.api.html-B_R1oJ7-.js
rename to vue/docs/assets/CCardBody.api.html-D0-tGYrD.js
index c993fa4680b..fe2578a95fa 100644
--- a/vue/docs/assets/CCardBody.api.html-B_R1oJ7-.js
+++ b/vue/docs/assets/CCardBody.api.html-D0-tGYrD.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardbody" tabindex="-1">CCardBody <a class="anchor-link" href="#ccardbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardbody" tabindex="-1">CCardBody <a class="anchor-link" href="#ccardbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardFooter.api.html-LhV_NaZN.js b/vue/docs/assets/CCardFooter.api.html-CiSjk2NS.js
similarity index 53%
rename from vue/docs/assets/CCardFooter.api.html-LhV_NaZN.js
rename to vue/docs/assets/CCardFooter.api.html-CiSjk2NS.js
index 637c5f0e61a..62805ce05cb 100644
--- a/vue/docs/assets/CCardFooter.api.html-LhV_NaZN.js
+++ b/vue/docs/assets/CCardFooter.api.html-CiSjk2NS.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardfooter" tabindex="-1">CCardFooter <a class="anchor-link" href="#ccardfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardfooter" tabindex="-1">CCardFooter <a class="anchor-link" href="#ccardfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardGroup.api.html-DqVXXbib.js b/vue/docs/assets/CCardGroup.api.html-BABSBoJe.js
similarity index 56%
rename from vue/docs/assets/CCardGroup.api.html-DqVXXbib.js
rename to vue/docs/assets/CCardGroup.api.html-BABSBoJe.js
index 057df05267c..77abac0864d 100644
--- a/vue/docs/assets/CCardGroup.api.html-DqVXXbib.js
+++ b/vue/docs/assets/CCardGroup.api.html-BABSBoJe.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardgroup" tabindex="-1">CCardGroup <a class="anchor-link" href="#ccardgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardgroup" tabindex="-1">CCardGroup <a class="anchor-link" href="#ccardgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardHeader.api.html-9jD1WYwA.js b/vue/docs/assets/CCardHeader.api.html-D5ZqQVdw.js
similarity index 62%
rename from vue/docs/assets/CCardHeader.api.html-9jD1WYwA.js
rename to vue/docs/assets/CCardHeader.api.html-D5ZqQVdw.js
index 9ed724a14ec..54b4eaed490 100644
--- a/vue/docs/assets/CCardHeader.api.html-9jD1WYwA.js
+++ b/vue/docs/assets/CCardHeader.api.html-D5ZqQVdw.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardImage.api.html-BRUhG_Yf.js b/vue/docs/assets/CCardImage.api.html-BBnb9-GW.js
similarity index 67%
rename from vue/docs/assets/CCardImage.api.html-BRUhG_Yf.js
rename to vue/docs/assets/CCardImage.api.html-BBnb9-GW.js
index 106b8c57c2f..54f2c21eabf 100644
--- a/vue/docs/assets/CCardImage.api.html-BRUhG_Yf.js
+++ b/vue/docs/assets/CCardImage.api.html-BBnb9-GW.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardimage" tabindex="-1">CCardImage <a class="anchor-link" href="#ccardimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;img&#39;</td></tr><tr><td><strong>orientation</strong></td><td>Optionally orientate the image to the top, bottom.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardimage" tabindex="-1">CCardImage <a class="anchor-link" href="#ccardimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;img&#39;</td></tr><tr><td><strong>orientation</strong></td><td>Optionally orientate the image to the top, bottom.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardImageOverlay.api.html-CUiA6mv_.js b/vue/docs/assets/CCardImageOverlay.api.html-TpPKznie.js
similarity index 55%
rename from vue/docs/assets/CCardImageOverlay.api.html-CUiA6mv_.js
rename to vue/docs/assets/CCardImageOverlay.api.html-TpPKznie.js
index a83f5005f17..dcf897cffd6 100644
--- a/vue/docs/assets/CCardImageOverlay.api.html-CUiA6mv_.js
+++ b/vue/docs/assets/CCardImageOverlay.api.html-TpPKznie.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardimageoverlay" tabindex="-1">CCardImageOverlay <a class="anchor-link" href="#ccardimageoverlay" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardImageOverlay <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardImageOverlay <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardImageOverlay&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardimageoverlay" tabindex="-1">CCardImageOverlay <a class="anchor-link" href="#ccardimageoverlay" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardImageOverlay <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardImageOverlay <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardImageOverlay&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardLink.api.html-DIAX7995.js b/vue/docs/assets/CCardLink.api.html-MlyoVRZ4.js
similarity index 64%
rename from vue/docs/assets/CCardLink.api.html-DIAX7995.js
rename to vue/docs/assets/CCardLink.api.html-MlyoVRZ4.js
index 95dd88771b6..05d326c320d 100644
--- a/vue/docs/assets/CCardLink.api.html-DIAX7995.js
+++ b/vue/docs/assets/CCardLink.api.html-MlyoVRZ4.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardlink" tabindex="-1">CCardLink <a class="anchor-link" href="#ccardlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>&#39;#&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardlink" tabindex="-1">CCardLink <a class="anchor-link" href="#ccardlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>&#39;#&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardSubtitle.api.html-BCXp-tN1.js b/vue/docs/assets/CCardSubtitle.api.html-Cl-ezx9Z.js
similarity index 63%
rename from vue/docs/assets/CCardSubtitle.api.html-BCXp-tN1.js
rename to vue/docs/assets/CCardSubtitle.api.html-Cl-ezx9Z.js
index 32a3c5f680f..a9e17957d1b 100644
--- a/vue/docs/assets/CCardSubtitle.api.html-BCXp-tN1.js
+++ b/vue/docs/assets/CCardSubtitle.api.html-Cl-ezx9Z.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardSubtitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardSubtitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardSubtitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardSubtitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardSubtitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardSubtitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardText.api.html-DLOvyrds.js b/vue/docs/assets/CCardText.api.html-CeB8bETl.js
similarity index 64%
rename from vue/docs/assets/CCardText.api.html-DLOvyrds.js
rename to vue/docs/assets/CCardText.api.html-CeB8bETl.js
index 36ceda93b2e..8f0e0072fae 100644
--- a/vue/docs/assets/CCardText.api.html-DLOvyrds.js
+++ b/vue/docs/assets/CCardText.api.html-CeB8bETl.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;p&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;p&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCardTitle.api.html-BnqOTLmE.js b/vue/docs/assets/CCardTitle.api.html-BIewfA00.js
similarity index 65%
rename from vue/docs/assets/CCardTitle.api.html-BnqOTLmE.js
rename to vue/docs/assets/CCardTitle.api.html-BIewfA00.js
index 2cd599a397f..82b1773efb9 100644
--- a/vue/docs/assets/CCardTitle.api.html-BnqOTLmE.js
+++ b/vue/docs/assets/CCardTitle.api.html-BIewfA00.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCarousel.api.html-wBjQKaU8.js b/vue/docs/assets/CCarousel.api.html-B6WYH3KM.js
similarity index 76%
rename from vue/docs/assets/CCarousel.api.html-wBjQKaU8.js
rename to vue/docs/assets/CCarousel.api.html-B6WYH3KM.js
index 27e04f7f923..c3530f7fa86 100644
--- a/vue/docs/assets/CCarousel.api.html-wBjQKaU8.js
+++ b/vue/docs/assets/CCarousel.api.html-B6WYH3KM.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarousel" tabindex="-1">CCarousel <a class="anchor-link" href="#ccarousel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarousel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarousel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarousel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>controls</strong></td><td>Adding in the previous and next controls.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>dark</strong></td><td>Add darker controls, indicators, and captions.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>index</strong></td><td>index of the active item.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>indicators</strong></td><td>Adding indicators at the bottom of the carousel for each item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td><td>boolean|number</td><td>-</td><td>5000</td></tr><tr><td><strong>pause</strong></td><td>If set to &#39;hover&#39;, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won&#39;t pause it.</td><td>boolean|string</td><td>-</td><td>&#39;hover&#39;</td></tr><tr><td><strong>transition</strong></td><td>Set type of the transition.</td><td>string</td><td><code>&#39;crossfade&#39;</code>, <code>&#39;slide&#39;</code></td><td>&#39;slide&#39;</td></tr><tr><td><strong>wrap</strong></td><td>Set whether the carousel should cycle continuously or have hard stops.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarousel" tabindex="-1">CCarousel <a class="anchor-link" href="#ccarousel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarousel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarousel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarousel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>controls</strong></td><td>Adding in the previous and next controls.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>dark</strong></td><td>Add darker controls, indicators, and captions.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>index</strong></td><td>index of the active item.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>indicators</strong></td><td>Adding indicators at the bottom of the carousel for each item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td><td>boolean|number</td><td>-</td><td>5000</td></tr><tr><td><strong>pause</strong></td><td>If set to &#39;hover&#39;, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won&#39;t pause it.</td><td>boolean|string</td><td>-</td><td>&#39;hover&#39;</td></tr><tr><td><strong>transition</strong></td><td>Set type of the transition.</td><td>string</td><td><code>&#39;crossfade&#39;</code>, <code>&#39;slide&#39;</code></td><td>&#39;slide&#39;</td></tr><tr><td><strong>wrap</strong></td><td>Set whether the carousel should cycle continuously or have hard stops.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCarouselCaption.api.html-B6Up5MSy.js b/vue/docs/assets/CCarouselCaption.api.html-CJ2Co3Eg.js
similarity index 55%
rename from vue/docs/assets/CCarouselCaption.api.html-B6Up5MSy.js
rename to vue/docs/assets/CCarouselCaption.api.html-CJ2Co3Eg.js
index da65caa18b0..33f96c4af15 100644
--- a/vue/docs/assets/CCarouselCaption.api.html-B6Up5MSy.js
+++ b/vue/docs/assets/CCarouselCaption.api.html-CJ2Co3Eg.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarouselcaption" tabindex="-1">CCarouselCaption <a class="anchor-link" href="#ccarouselcaption" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarouselCaption <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarouselCaption <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarouselCaption&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarouselcaption" tabindex="-1">CCarouselCaption <a class="anchor-link" href="#ccarouselcaption" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarouselCaption <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarouselCaption <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarouselCaption&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCarouselItem.api.html-Cs9oiIYu.js b/vue/docs/assets/CCarouselItem.api.html-Bx_efOFH.js
similarity index 63%
rename from vue/docs/assets/CCarouselItem.api.html-Cs9oiIYu.js
rename to vue/docs/assets/CCarouselItem.api.html-Bx_efOFH.js
index c2bfce42c07..d210d5fbd83 100644
--- a/vue/docs/assets/CCarouselItem.api.html-Cs9oiIYu.js
+++ b/vue/docs/assets/CCarouselItem.api.html-Bx_efOFH.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarouselitem" tabindex="-1">CCarouselItem <a class="anchor-link" href="#ccarouselitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarouselItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarouselItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarouselItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item.</td><td>boolean|number</td><td>-</td><td>false</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarouselitem" tabindex="-1">CCarouselItem <a class="anchor-link" href="#ccarouselitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarouselItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarouselItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarouselItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item.</td><td>boolean|number</td><td>-</td><td>false</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CChart.api.html-DQIVenaZ.js b/vue/docs/assets/CChart.api.html-BFRT-Fhg.js
similarity index 82%
rename from vue/docs/assets/CChart.api.html-DQIVenaZ.js
rename to vue/docs/assets/CChart.api.html-BFRT-Fhg.js
index 9baf9749cd9..d5c2bbae115 100644
--- a/vue/docs/assets/CChart.api.html-DQIVenaZ.js
+++ b/vue/docs/assets/CChart.api.html-BFRT-Fhg.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cchart" tabindex="-1">CChart <a class="anchor-link" href="#cchart" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CChart <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs/src/CChart&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-tooltips</strong></td><td>Enables custom html based tooltips instead of standard tooltips.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>data</strong></td><td>The data object that is passed into the Chart.js chart (more info).</td><td>ChartData | ((canvas: HTMLCanvasElement) =&gt; ChartData)</td><td>-</td><td>-</td></tr><tr><td><strong>height</strong></td><td>Height attribute applied to the rendered canvas.<br><code>@default</code> 150</td><td>number</td><td>-</td><td>150</td></tr><tr><td><strong>id</strong></td><td>ID attribute applied to the rendered canvas.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>The options object that is passed into the Chart.js chartRef.value.<br><br>{@link https://www.chartjs.org/docs/latest/general/options.html More Info}</td><td>ChartOptions</td><td>-</td><td>-</td></tr><tr><td><strong>plugins</strong></td><td>The plugins array that is passed into the Chart.js chart (more info)<br><br>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}</td><td>Plugin[]</td><td>-</td><td>-</td></tr><tr><td><strong>redraw</strong></td><td>If true, will tear down and redraw chart on all updates.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Chart.js chart type.<br><code>@type</code> &#39;line&#39; | &#39;bar&#39; | &#39;radar&#39; | &#39;doughnut&#39; | &#39;polarArea&#39; | &#39;bubble&#39; | &#39;pie&#39; | &#39;scatter&#39;</td><td>ChartType</td><td>-</td><td>&#39;bar&#39;</td></tr><tr><td><strong>width</strong></td><td>Width attribute applied to the rendered canvas.<br><code>@default</code> 300</td><td>number</td><td>-</td><td>300</td></tr><tr><td><strong>wrapper</strong></td><td>Put the chart into the wrapper div element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>get-dataset-at-event</strong></td><td>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td><td></td></tr><tr><td><strong>get-element-at-event</strong></td><td>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td><td></td></tr><tr><td><strong>get-elements-at-event</strong></td><td>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cchart" tabindex="-1">CChart <a class="anchor-link" href="#cchart" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CChart <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs/src/CChart&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-tooltips</strong></td><td>Enables custom html based tooltips instead of standard tooltips.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>data</strong></td><td>The data object that is passed into the Chart.js chart (more info).</td><td>ChartData | ((canvas: HTMLCanvasElement) =&gt; ChartData)</td><td>-</td><td>-</td></tr><tr><td><strong>height</strong></td><td>Height attribute applied to the rendered canvas.<br><code>@default</code> 150</td><td>number</td><td>-</td><td>150</td></tr><tr><td><strong>id</strong></td><td>ID attribute applied to the rendered canvas.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>The options object that is passed into the Chart.js chartRef.value.<br><br>{@link https://www.chartjs.org/docs/latest/general/options.html More Info}</td><td>ChartOptions</td><td>-</td><td>-</td></tr><tr><td><strong>plugins</strong></td><td>The plugins array that is passed into the Chart.js chart (more info)<br><br>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}</td><td>Plugin[]</td><td>-</td><td>-</td></tr><tr><td><strong>redraw</strong></td><td>If true, will tear down and redraw chart on all updates.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Chart.js chart type.<br><code>@type</code> &#39;line&#39; | &#39;bar&#39; | &#39;radar&#39; | &#39;doughnut&#39; | &#39;polarArea&#39; | &#39;bubble&#39; | &#39;pie&#39; | &#39;scatter&#39;</td><td>ChartType</td><td>-</td><td>&#39;bar&#39;</td></tr><tr><td><strong>width</strong></td><td>Width attribute applied to the rendered canvas.<br><code>@default</code> 300</td><td>number</td><td>-</td><td>300</td></tr><tr><td><strong>wrapper</strong></td><td>Put the chart into the wrapper div element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>get-dataset-at-event</strong></td><td>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td><td></td></tr><tr><td><strong>get-element-at-event</strong></td><td>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td><td></td></tr><tr><td><strong>get-elements-at-event</strong></td><td>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCloseButton.api.html-CvTwawLT.js b/vue/docs/assets/CCloseButton.api.html-X5Fmd0Tk.js
similarity index 70%
rename from vue/docs/assets/CCloseButton.api.html-CvTwawLT.js
rename to vue/docs/assets/CCloseButton.api.html-X5Fmd0Tk.js
index d301c922b46..3ea6381e958 100644
--- a/vue/docs/assets/CCloseButton.api.html-CvTwawLT.js
+++ b/vue/docs/assets/CCloseButton.api.html-X5Fmd0Tk.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCloseButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCloseButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/close-button/CCloseButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>dark</strong></td><td>Invert the default color.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>white</strong></td><td>Change the default color to white.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the component.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCloseButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCloseButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/close-button/CCloseButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>dark</strong></td><td>Invert the default color.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>white</strong></td><td>Change the default color to white.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the component.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCol.api.html-_3c0EEkS.js b/vue/docs/assets/CCol.api.html-DFGWxu75.js
similarity index 80%
rename from vue/docs/assets/CCol.api.html-_3c0EEkS.js
rename to vue/docs/assets/CCol.api.html-DFGWxu75.js
index 82bbd922910..85d09a8b528 100644
--- a/vue/docs/assets/CCol.api.html-_3c0EEkS.js
+++ b/vue/docs/assets/CCol.api.html-DFGWxu75.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CCollapse.api.html-DPM8RIAO.js b/vue/docs/assets/CCollapse.api.html-zVmsFw74.js
similarity index 71%
rename from vue/docs/assets/CCollapse.api.html-DPM8RIAO.js
rename to vue/docs/assets/CCollapse.api.html-zVmsFw74.js
index b4d013c7afa..a754cafa797 100644
--- a/vue/docs/assets/CCollapse.api.html-DPM8RIAO.js
+++ b/vue/docs/assets/CCollapse.api.html-zVmsFw74.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCollapse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCollapse <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/collapse/CCollapse&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>horizontal</strong></td><td>Set horizontal collapsing to transition the width instead of height.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCollapse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCollapse <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/collapse/CCollapse&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>horizontal</strong></td><td>Set horizontal collapsing to transition the width instead of height.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CConditionalTeleport.api.html-Cc5-XAf0.js b/vue/docs/assets/CConditionalTeleport.api.html-7PMLb_Wk.js
similarity index 66%
rename from vue/docs/assets/CConditionalTeleport.api.html-Cc5-XAf0.js
rename to vue/docs/assets/CConditionalTeleport.api.html-7PMLb_Wk.js
index 06f5bcc3e1d..4437145edfc 100644
--- a/vue/docs/assets/CConditionalTeleport.api.html-Cc5-XAf0.js
+++ b/vue/docs/assets/CConditionalTeleport.api.html-7PMLb_Wk.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cconditionalteleport" tabindex="-1">CConditionalTeleport <a class="anchor-link" href="#cconditionalteleport" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CConditionalTeleport <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CConditionalTeleport <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/conditional-teleport/CConditionalTeleport&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>An HTML element or function that returns a single element, with <code>document.body</code> as the default.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>teleport</strong></td><td>Render some children into a different part of the DOM</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cconditionalteleport" tabindex="-1">CConditionalTeleport <a class="anchor-link" href="#cconditionalteleport" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CConditionalTeleport <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CConditionalTeleport <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/conditional-teleport/CConditionalTeleport&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>An HTML element or function that returns a single element, with <code>document.body</code> as the default.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>teleport</strong></td><td>Render some children into a different part of the DOM</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CContainer.api.html-DdB48bcN.js b/vue/docs/assets/CContainer.api.html-CJReqk6k.js
similarity index 72%
rename from vue/docs/assets/CContainer.api.html-DdB48bcN.js
rename to vue/docs/assets/CContainer.api.html-CJReqk6k.js
index 8e04639f27a..ed96c78a30f 100644
--- a/vue/docs/assets/CContainer.api.html-DdB48bcN.js
+++ b/vue/docs/assets/CContainer.api.html-CJReqk6k.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CDatePicker.api.html-BmlaHdUZ.js b/vue/docs/assets/CDatePicker.api.html-BmlaHdUZ.js
new file mode 100644
index 00000000000..a55aece4abe
--- /dev/null
+++ b/vue/docs/assets/CDatePicker.api.html-BmlaHdUZ.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDatePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-picker/CDatePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.<br><br><strong>[Deprecated since v5.3.0]</strong> The name attributes for input element is generated based on this property until you define name prop ex.:<br>- {id}-date</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>The name attribute for the input element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select date&#39;</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-change</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:date</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 6);
+const _hoisted_7 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CDatePicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDatePicker.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/date-picker/CDatePicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/date-picker/CDatePicker.api.html"}]]},"headers":[{"level":3,"title":"CDatePicker","slug":"cdatepicker","link":"#cdatepicker","children":[]}],"filePathRelative":"api/date-picker/CDatePicker.api.md"}');
+export {
+  CDatePicker_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDatePicker.api.html-CU5snrq0.js b/vue/docs/assets/CDatePicker.api.html-CU5snrq0.js
deleted file mode 100644
index d0aff5fb31e..00000000000
--- a/vue/docs/assets/CDatePicker.api.html-CU5snrq0.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDatePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-picker/CDatePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.<br><br>The name attribute for the input element is generated based on the <code>id</code> property:<br>- {id}-date</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select date&#39;</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-change</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:date</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 6);
-const _hoisted_7 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CDatePicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDatePicker.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/date-picker/CDatePicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/date-picker/CDatePicker.api.html"}]]},"headers":[{"level":3,"title":"CDatePicker","slug":"cdatepicker","link":"#cdatepicker","children":[]}],"filePathRelative":"api/date-picker/CDatePicker.api.md"}');
-export {
-  CDatePicker_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CDateRangePicker.api.html-BI3YUNG-.js b/vue/docs/assets/CDateRangePicker.api.html-BI3YUNG-.js
deleted file mode 100644
index 041d0216447..00000000000
--- a/vue/docs/assets/CDateRangePicker.api.html-BI3YUNG-.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDateRangePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-range-picker/CDateRangePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>2</td></tr><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>close-on-select</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>If true the dropdown will be immediately closed after submitting the full date.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.<br><br>The name attributes for input elements are generated based on the <code>id</code> property:<br>- {id}-start-date<br>- {id}-end-date</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string | string[]</td><td>-</td><td>() =&gt; [&#39;Start date&#39;, &#39;End date&#39;]</td></tr><tr><td><strong>ranges</strong></td><td>Predefined date ranges the user can select from.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>separator</strong></td><td>Default icon or character character that separates two dates.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>today-button</strong></td><td>Toggle visibility or set the content of today button.</td><td>boolean|string</td><td>-</td><td>&#39;Today&#39;</td></tr><tr><td><strong>today-button-color</strong></td><td>Sets the color context of the today button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>today-button-size</strong></td><td>Size the today button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>today-button-variant</strong></td><td>Set the today button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:start-date</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr><tr><td><strong>update:end-date</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 6);
-const _hoisted_7 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CDateRangePicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDateRangePicker.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/date-range-picker/CDateRangePicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/date-range-picker/CDateRangePicker.api.html"}]]},"headers":[{"level":3,"title":"CDateRangePicker","slug":"cdaterangepicker","link":"#cdaterangepicker","children":[]}],"filePathRelative":"api/date-range-picker/CDateRangePicker.api.md"}');
-export {
-  CDateRangePicker_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CDateRangePicker.api.html-Hlubmql2.js b/vue/docs/assets/CDateRangePicker.api.html-Hlubmql2.js
new file mode 100644
index 00000000000..3c2eda5e8d8
--- /dev/null
+++ b/vue/docs/assets/CDateRangePicker.api.html-Hlubmql2.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDateRangePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-range-picker/CDateRangePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>2</td></tr><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>close-on-select</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>If true the dropdown will be immediately closed after submitting the full date.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix &quot;-start-date&quot; and &quot;-end-date&quot; will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.<br><br><strong>[Deprecated since v5.3.0]</strong> If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.:<br>- {id}-start-date<br>- {id}-end-date</td><td>string | [string, string]</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix &quot;-start-date&quot; and &quot;-end-date&quot; will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately.<br><br>Example for single string: &#39;date-input&#39;<br>Result: &#39;date-input-start-date&#39;, &#39;date-input-end-date&#39;<br><br>Example for array: [&#39;start-date-input&#39;, &#39;end-date-input&#39;]<br>Result: &#39;start-date-input&#39;, &#39;end-date-input&#39;</td><td>string | [string, string]</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string | [string, string]</td><td>-</td><td>() =&gt; [&#39;Start date&#39;, &#39;End date&#39;]</td></tr><tr><td><strong>ranges</strong></td><td>Predefined date ranges the user can select from.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>separator</strong></td><td>Default icon or character character that separates two dates.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>today-button</strong></td><td>Toggle visibility or set the content of today button.</td><td>boolean|string</td><td>-</td><td>&#39;Today&#39;</td></tr><tr><td><strong>today-button-color</strong></td><td>Sets the color context of the today button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>today-button-size</strong></td><td>Size the today button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>today-button-variant</strong></td><td>Set the today button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:start-date</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr><tr><td><strong>update:end-date</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 6);
+const _hoisted_7 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CDateRangePicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDateRangePicker.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/date-range-picker/CDateRangePicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/date-range-picker/CDateRangePicker.api.html"}]]},"headers":[{"level":3,"title":"CDateRangePicker","slug":"cdaterangepicker","link":"#cdaterangepicker","children":[]}],"filePathRelative":"api/date-range-picker/CDateRangePicker.api.md"}');
+export {
+  CDateRangePicker_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDropdown.api.html-D62WSwCI.js b/vue/docs/assets/CDropdown.api.html-DGIxjfQ3.js
similarity index 87%
rename from vue/docs/assets/CDropdown.api.html-D62WSwCI.js
rename to vue/docs/assets/CDropdown.api.html-DGIxjfQ3.js
index b68abe0d4d3..16d374dfc04 100644
--- a/vue/docs/assets/CDropdown.api.html-D62WSwCI.js
+++ b/vue/docs/assets/CDropdown.api.html-DGIxjfQ3.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdown <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdown <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdown&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Set aligment of dropdown menu.</td><td>string | Alignments</td><td><code>{ &#39;start&#39; | &#39;end&#39; | { xs: &#39;start&#39; | &#39;end&#39; } | { sm: &#39;start&#39; | &#39;end&#39; } | { md: &#39;start&#39; | &#39;end&#39; } | { lg: &#39;start&#39; | &#39;end&#39; } | { xl: &#39;start&#39; | &#39;end&#39;} | { xxl: &#39;start&#39; | &#39;end&#39;} }</code></td><td>-</td></tr><tr><td><strong>auto-close</strong></td><td>Configure the auto close behavior of the dropdown:<br>- <code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- <code>false</code> - 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>- <code>&#39;inside&#39;</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- <code>&#39;outside&#39;</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme to match a dark navbar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>direction</strong></td><td>Sets a specified direction and location of the dropdown menu.</td><td>string</td><td><code>&#39;center&#39;</code>, <code>&#39;dropup&#39;</code>, <code>&#39;dropup-center&#39;</code>, <code>&#39;dropend&#39;</code>, <code>&#39;dropstart&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>offset</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Offset of the dropdown menu relative to its target.</td><td>array</td><td>-</td><td>[0, 2]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td><code>&#39;auto&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-start&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;right-start&#39;</code>, <code>&#39;right&#39;</code>, <code>&#39;right-end&#39;</code>, <code>&#39;left-start&#39;</code>, <code>&#39;left&#39;</code>, <code>&#39;left-end&#39;</code></td><td>&#39;bottom-start&#39;</td></tr><tr><td><strong>popper</strong></td><td>If you want to disable dynamic positioning set this property to <code>true</code>.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>teleport</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Generates dropdown menu using Teleport.</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</td><td>string</td><td><code>&#39;btn-group&#39;</code>, <code>&#39;dropdown&#39;</code>, <code>&#39;input-group&#39;</code>, <code>&#39;nav-item&#39;</code></td><td>&#39;btn-group&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of dropdown menu component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdown <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdown <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdown&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Set aligment of dropdown menu.</td><td>string | Alignments</td><td><code>{ &#39;start&#39; | &#39;end&#39; | { xs: &#39;start&#39; | &#39;end&#39; } | { sm: &#39;start&#39; | &#39;end&#39; } | { md: &#39;start&#39; | &#39;end&#39; } | { lg: &#39;start&#39; | &#39;end&#39; } | { xl: &#39;start&#39; | &#39;end&#39;} | { xxl: &#39;start&#39; | &#39;end&#39;} }</code></td><td>-</td></tr><tr><td><strong>auto-close</strong></td><td>Configure the auto close behavior of the dropdown:<br>- <code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- <code>false</code> - 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>- <code>&#39;inside&#39;</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- <code>&#39;outside&#39;</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme to match a dark navbar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>direction</strong></td><td>Sets a specified direction and location of the dropdown menu.</td><td>string</td><td><code>&#39;center&#39;</code>, <code>&#39;dropup&#39;</code>, <code>&#39;dropup-center&#39;</code>, <code>&#39;dropend&#39;</code>, <code>&#39;dropstart&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>offset</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Offset of the dropdown menu relative to its target.</td><td>array</td><td>-</td><td>[0, 2]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td><code>&#39;auto&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-start&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;right-start&#39;</code>, <code>&#39;right&#39;</code>, <code>&#39;right-end&#39;</code>, <code>&#39;left-start&#39;</code>, <code>&#39;left&#39;</code>, <code>&#39;left-end&#39;</code></td><td>&#39;bottom-start&#39;</td></tr><tr><td><strong>popper</strong></td><td>If you want to disable dynamic positioning set this property to <code>true</code>.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>teleport</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Generates dropdown menu using Teleport.</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</td><td>string</td><td><code>&#39;btn-group&#39;</code>, <code>&#39;dropdown&#39;</code>, <code>&#39;input-group&#39;</code>, <code>&#39;nav-item&#39;</code></td><td>&#39;btn-group&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of dropdown menu component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CDropdownDivider.api.html-CbdalXg1.js b/vue/docs/assets/CDropdownDivider.api.html-VSQ_XlFl.js
similarity index 55%
rename from vue/docs/assets/CDropdownDivider.api.html-CbdalXg1.js
rename to vue/docs/assets/CDropdownDivider.api.html-VSQ_XlFl.js
index d26f1c352aa..a6b25c80419 100644
--- a/vue/docs/assets/CDropdownDivider.api.html-CbdalXg1.js
+++ b/vue/docs/assets/CDropdownDivider.api.html-VSQ_XlFl.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdowndivider" tabindex="-1">CDropdownDivider <a class="anchor-link" href="#cdropdowndivider" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownDivider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownDivider <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownDivider&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdowndivider" tabindex="-1">CDropdownDivider <a class="anchor-link" href="#cdropdowndivider" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownDivider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownDivider <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownDivider&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CDropdownHeader.api.html-CWfJRgQK.js b/vue/docs/assets/CDropdownHeader.api.html-Cxpz-KV-.js
similarity index 63%
rename from vue/docs/assets/CDropdownHeader.api.html-CWfJRgQK.js
rename to vue/docs/assets/CDropdownHeader.api.html-Cxpz-KV-.js
index bd853d8123d..a874a61efc1 100644
--- a/vue/docs/assets/CDropdownHeader.api.html-CWfJRgQK.js
+++ b/vue/docs/assets/CDropdownHeader.api.html-Cxpz-KV-.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CDropdownItem.api.html-I17bWEzI.js b/vue/docs/assets/CDropdownItem.api.html-BVulLqSR.js
similarity index 68%
rename from vue/docs/assets/CDropdownItem.api.html-I17bWEzI.js
rename to vue/docs/assets/CDropdownItem.api.html-BVulLqSR.js
index b8c0bf937f2..7d2f0c1f37f 100644
--- a/vue/docs/assets/CDropdownItem.api.html-I17bWEzI.js
+++ b/vue/docs/assets/CDropdownItem.api.html-BVulLqSR.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownitem" tabindex="-1">CDropdownItem <a class="anchor-link" href="#cdropdownitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownitem" tabindex="-1">CDropdownItem <a class="anchor-link" href="#cdropdownitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CDropdownMenu.api.html-ozovUzWv.js b/vue/docs/assets/CDropdownMenu.api.html-BckpImA4.js
similarity index 64%
rename from vue/docs/assets/CDropdownMenu.api.html-ozovUzWv.js
rename to vue/docs/assets/CDropdownMenu.api.html-BckpImA4.js
index 5f1bb602e69..8bae8636275 100644
--- a/vue/docs/assets/CDropdownMenu.api.html-ozovUzWv.js
+++ b/vue/docs/assets/CDropdownMenu.api.html-BckpImA4.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownmenu" tabindex="-1">CDropdownMenu <a class="anchor-link" href="#cdropdownmenu" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownMenu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownMenu <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownMenu&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td><code>&#39;div&#39;</code>, <code>&#39;ul&#39;</code></td><td>&#39;div&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownmenu" tabindex="-1">CDropdownMenu <a class="anchor-link" href="#cdropdownmenu" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownMenu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownMenu <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownMenu&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td><code>&#39;div&#39;</code>, <code>&#39;ul&#39;</code></td><td>&#39;div&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CDropdownToggle.api.html-CgArM2Dq.js b/vue/docs/assets/CDropdownToggle.api.html-unfICPox.js
similarity index 80%
rename from vue/docs/assets/CDropdownToggle.api.html-CgArM2Dq.js
rename to vue/docs/assets/CDropdownToggle.api.html-unfICPox.js
index 703a1a9aaa3..4835bc48569 100644
--- a/vue/docs/assets/CDropdownToggle.api.html-CgArM2Dq.js
+++ b/vue/docs/assets/CDropdownToggle.api.html-unfICPox.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdowntoggle" tabindex="-1">CDropdownToggle <a class="anchor-link" href="#cdropdowntoggle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownToggle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownToggle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownToggle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>caret</strong></td><td>Enables pseudo element caret on toggler.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>custom</strong></td><td>Create a custom toggler which accepts any content.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>nav-link</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>If a dropdown <code>variant</code> is set to <code>nav-item</code> then render the toggler as a link instead of a button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>split</strong></td><td>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>.dropdown-toggle-split</code> className for proper spacing around the dropdown caret.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br><code>@type</code> &#39;hover&#39; | &#39;focus&#39; | &#39;click&#39;</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdowntoggle" tabindex="-1">CDropdownToggle <a class="anchor-link" href="#cdropdowntoggle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownToggle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownToggle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownToggle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>caret</strong></td><td>Enables pseudo element caret on toggler.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>custom</strong></td><td>Create a custom toggler which accepts any content.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>nav-link</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>If a dropdown <code>variant</code> is set to <code>nav-item</code> then render the toggler as a link instead of a button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>split</strong></td><td>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>.dropdown-toggle-split</code> className for proper spacing around the dropdown caret.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br><code>@type</code> &#39;hover&#39; | &#39;focus&#39; | &#39;click&#39;</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFooter.api.html-CTDUziBO.js b/vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js
similarity index 50%
rename from vue/docs/assets/CFooter.api.html-CTDUziBO.js
rename to vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js
index 49b91244af7..cb9bee49f9f 100644
--- a/vue/docs/assets/CFooter.api.html-CTDUziBO.js
+++ b/vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cfooter" tabindex="-1">CFooter <a class="anchor-link" href="#cfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/footer/CFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>position</strong></td><td>Place footer in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cfooter" tabindex="-1">CFooter <a class="anchor-link" href="#cfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/footer/CFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>position</strong></td><td>Place footer in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CForm.api.html-BjVNGcqA.js b/vue/docs/assets/CForm.api.html-2ixEm0A1.js
similarity index 67%
rename from vue/docs/assets/CForm.api.html-BjVNGcqA.js
rename to vue/docs/assets/CForm.api.html-2ixEm0A1.js
index 414f6ce3b0b..10adc94a4e7 100644
--- a/vue/docs/assets/CForm.api.html-BjVNGcqA.js
+++ b/vue/docs/assets/CForm.api.html-2ixEm0A1.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cform" tabindex="-1">CForm <a class="anchor-link" href="#cform" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CForm <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CForm&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>validated</strong></td><td>Mark a form as validated. If you set it <code>true</code>, all validation styles will be applied to the forms component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cform" tabindex="-1">CForm <a class="anchor-link" href="#cform" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CForm <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CForm&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>validated</strong></td><td>Mark a form as validated. If you set it <code>true</code>, all validation styles will be applied to the forms component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormCheck.api.html-CLNwvt7F.js b/vue/docs/assets/CFormCheck.api.html-Bf9lhFvH.js
similarity index 86%
rename from vue/docs/assets/CFormCheck.api.html-CLNwvt7F.js
rename to vue/docs/assets/CFormCheck.api.html-Bf9lhFvH.js
index 575d9ea70e2..141b90e2f07 100644
--- a/vue/docs/assets/CFormCheck.api.html-CLNwvt7F.js
+++ b/vue/docs/assets/CFormCheck.api.html-Bf9lhFvH.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormControl.api.html-D9-r3st8.js b/vue/docs/assets/CFormControl.api.html-D9-r3st8.js
new file mode 100644
index 00000000000..c85cfccfc1a
--- /dev/null
+++ b/vue/docs/assets/CFormControl.api.html-D9-r3st8.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrol" tabindex="-1">CFormControl <a class="anchor-link" href="#cformcontrol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormControl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormControl <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControl&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="undefined" tabindex="-1">undefined <a class="anchor-link" href="#undefined" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">undefined</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token keyword">undefined</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControl&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 4);
+const _hoisted_5 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CFormControl_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormControl.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormControl.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormControl.api.html"}]]},"headers":[{"level":3,"title":"CFormControl","slug":"cformcontrol","link":"#cformcontrol","children":[]},{"level":3,"title":"undefined","slug":"undefined","link":"#undefined","children":[]}],"filePathRelative":"api/form/CFormControl.api.md"}');
+export {
+  CFormControl_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormControl.api.html-DulT1GYX.js b/vue/docs/assets/CFormControl.api.html-DulT1GYX.js
deleted file mode 100644
index b368465a143..00000000000
--- a/vue/docs/assets/CFormControl.api.html-DulT1GYX.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrol" tabindex="-1">CFormControl <a class="anchor-link" href="#cformcontrol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormControl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormControl <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControl&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="undefined" tabindex="-1">undefined <a class="anchor-link" href="#undefined" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">undefined</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token keyword">undefined</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControl&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 4);
-const _hoisted_5 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CFormControl_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormControl.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormControl.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormControl.api.html"}]]},"headers":[{"level":3,"title":"CFormControl","slug":"cformcontrol","link":"#cformcontrol","children":[]},{"level":3,"title":"undefined","slug":"undefined","link":"#undefined","children":[]}],"filePathRelative":"api/form/CFormControl.api.md"}');
-export {
-  CFormControl_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormControlValidation.api.html-Uo6SZBwL.js b/vue/docs/assets/CFormControlValidation.api.html-CDKpaVG3.js
similarity index 72%
rename from vue/docs/assets/CFormControlValidation.api.html-Uo6SZBwL.js
rename to vue/docs/assets/CFormControlValidation.api.html-CDKpaVG3.js
index 4782e5231b5..d013b3979eb 100644
--- a/vue/docs/assets/CFormControlValidation.api.html-Uo6SZBwL.js
+++ b/vue/docs/assets/CFormControlValidation.api.html-CDKpaVG3.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrolvalidation" tabindex="-1">CFormControlValidation <a class="anchor-link" href="#cformcontrolvalidation" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormControlValidation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormControlValidation <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControlValidation&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrolvalidation" tabindex="-1">CFormControlValidation <a class="anchor-link" href="#cformcontrolvalidation" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormControlValidation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormControlValidation <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControlValidation&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormControlWrapper.api.html-DD-MZHrX.js b/vue/docs/assets/CFormControlWrapper.api.html-D75G__Lh.js
similarity index 69%
rename from vue/docs/assets/CFormControlWrapper.api.html-DD-MZHrX.js
rename to vue/docs/assets/CFormControlWrapper.api.html-D75G__Lh.js
index 8767491433b..caf2049a020 100644
--- a/vue/docs/assets/CFormControlWrapper.api.html-DD-MZHrX.js
+++ b/vue/docs/assets/CFormControlWrapper.api.html-D75G__Lh.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrolwrapper" tabindex="-1">CFormControlWrapper <a class="anchor-link" href="#cformcontrolwrapper" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormControlWrapper <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormControlWrapper <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControlWrapper&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrolwrapper" tabindex="-1">CFormControlWrapper <a class="anchor-link" href="#cformcontrolwrapper" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormControlWrapper <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormControlWrapper <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormControlWrapper&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormFeedback.api.html-Blp_lXIj.js b/vue/docs/assets/CFormFeedback.api.html-Cs8xHqDe.js
similarity index 68%
rename from vue/docs/assets/CFormFeedback.api.html-Blp_lXIj.js
rename to vue/docs/assets/CFormFeedback.api.html-Cs8xHqDe.js
index 77c55ae71b2..62d15bc2259 100644
--- a/vue/docs/assets/CFormFeedback.api.html-Blp_lXIj.js
+++ b/vue/docs/assets/CFormFeedback.api.html-Cs8xHqDe.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFeedback <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFeedback <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFeedback&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>invalid</strong></td><td>Method called immediately after the <code>value</code> prop changes.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip</strong></td><td>If your form layout allows it, you can display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFeedback <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFeedback <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFeedback&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>invalid</strong></td><td>Method called immediately after the <code>value</code> prop changes.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip</strong></td><td>If your form layout allows it, you can display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormFloating.api.html-0A1fU8zv.js b/vue/docs/assets/CFormFloating.api.html-C-X3BFM6.js
similarity index 54%
rename from vue/docs/assets/CFormFloating.api.html-0A1fU8zv.js
rename to vue/docs/assets/CFormFloating.api.html-C-X3BFM6.js
index afb967ed4c6..c50fa656207 100644
--- a/vue/docs/assets/CFormFloating.api.html-0A1fU8zv.js
+++ b/vue/docs/assets/CFormFloating.api.html-C-X3BFM6.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformfloating" tabindex="-1">CFormFloating <a class="anchor-link" href="#cformfloating" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFloating <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFloating <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFloating&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformfloating" tabindex="-1">CFormFloating <a class="anchor-link" href="#cformfloating" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFloating <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFloating <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFloating&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormInput.api.html-DWatkuyl.js b/vue/docs/assets/CFormInput.api.html-CVvr0T_h.js
similarity index 85%
rename from vue/docs/assets/CFormInput.api.html-DWatkuyl.js
rename to vue/docs/assets/CFormInput.api.html-CVvr0T_h.js
index 98fd1e9b597..7eaf57cdf52 100644
--- a/vue/docs/assets/CFormInput.api.html-DWatkuyl.js
+++ b/vue/docs/assets/CFormInput.api.html-CVvr0T_h.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormInput <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormInput&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>File|number|string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;color&#39; | &#39;file&#39; | &#39;text&#39; | string</code></td><td>&#39;text&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormInput <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormInput&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>File|number|string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;color&#39; | &#39;file&#39; | &#39;text&#39; | string</code></td><td>&#39;text&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormLabel.api.html-DIJltcDf.js b/vue/docs/assets/CFormLabel.api.html-CpQQKu1b.js
similarity index 65%
rename from vue/docs/assets/CFormLabel.api.html-DIJltcDf.js
rename to vue/docs/assets/CFormLabel.api.html-CpQQKu1b.js
index 252bc52adf6..568d9a7e2b6 100644
--- a/vue/docs/assets/CFormLabel.api.html-DIJltcDf.js
+++ b/vue/docs/assets/CFormLabel.api.html-CpQQKu1b.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformlabel" tabindex="-1">CFormLabel <a class="anchor-link" href="#cformlabel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormLabel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormLabel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>A string of all className you want to be applied to the component, and override standard className value.</td><td>array|string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformlabel" tabindex="-1">CFormLabel <a class="anchor-link" href="#cformlabel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormLabel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormLabel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>A string of all className you want to be applied to the component, and override standard className value.</td><td>array|string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormRange.api.html-BkimLsL0.js b/vue/docs/assets/CFormRange.api.html-C4Wns1Lr.js
similarity index 78%
rename from vue/docs/assets/CFormRange.api.html-BkimLsL0.js
rename to vue/docs/assets/CFormRange.api.html-C4Wns1Lr.js
index 2f0ad790adc..11eda2e6d24 100644
--- a/vue/docs/assets/CFormRange.api.html-BkimLsL0.js
+++ b/vue/docs/assets/CFormRange.api.html-C4Wns1Lr.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformrange" tabindex="-1">CFormRange <a class="anchor-link" href="#cformrange" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormRange <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormRange <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormRange&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>max</strong></td><td>Specifies the maximum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>min</strong></td><td>Specifies the minimum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>steps</strong></td><td>Specifies the interval between legal numbers in the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.<br><code>@controllable</code> onChange</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformrange" tabindex="-1">CFormRange <a class="anchor-link" href="#cformrange" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormRange <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormRange <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormRange&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>max</strong></td><td>Specifies the maximum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>min</strong></td><td>Specifies the minimum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>steps</strong></td><td>Specifies the interval between legal numbers in the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.<br><code>@controllable</code> onChange</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormSelect.api.html-Znx-Qdx4.js b/vue/docs/assets/CFormSelect.api.html-4dvFandI.js
similarity index 84%
rename from vue/docs/assets/CFormSelect.api.html-Znx-Qdx4.js
rename to vue/docs/assets/CFormSelect.api.html-4dvFandI.js
index d61a51a8115..6eea7d099c4 100644
--- a/vue/docs/assets/CFormSelect.api.html-Znx-Qdx4.js
+++ b/vue/docs/assets/CFormSelect.api.html-4dvFandI.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformselect" tabindex="-1">CFormSelect <a class="anchor-link" href="#cformselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>html-size</strong></td><td>Specifies the number of visible options in a drop-down list.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>Options list of the select component. Available keys: <code>label</code>, <code>value</code>, <code>disabled</code>.<br>Examples:<br>- <code>:options=&quot;[{ value: &#39;js&#39;, label: &#39;JavaScript&#39; }, { value: &#39;html&#39;, label: &#39;HTML&#39;, disabled: true }]&quot;</code><br>- <code>:options=&quot;[&#39;js&#39;, &#39;html&#39;]&quot;</code></td><td>Option[] | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when when a user changes the selected option of a <code>&lt;select&gt;</code> element.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformselect" tabindex="-1">CFormSelect <a class="anchor-link" href="#cformselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>html-size</strong></td><td>Specifies the number of visible options in a drop-down list.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>Options list of the select component. Available keys: <code>label</code>, <code>value</code>, <code>disabled</code>.<br>Examples:<br>- <code>:options=&quot;[{ value: &#39;js&#39;, label: &#39;JavaScript&#39; }, { value: &#39;html&#39;, label: &#39;HTML&#39;, disabled: true }]&quot;</code><br>- <code>:options=&quot;[&#39;js&#39;, &#39;html&#39;]&quot;</code></td><td>Option[] | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when when a user changes the selected option of a <code>&lt;select&gt;</code> element.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormSwitch.api.html-COUzNUFt.js b/vue/docs/assets/CFormSwitch.api.html-CyrjItfh.js
similarity index 77%
rename from vue/docs/assets/CFormSwitch.api.html-COUzNUFt.js
rename to vue/docs/assets/CFormSwitch.api.html-CyrjItfh.js
index e4b2bc49358..736e5b53ab2 100644
--- a/vue/docs/assets/CFormSwitch.api.html-COUzNUFt.js
+++ b/vue/docs/assets/CFormSwitch.api.html-CyrjItfh.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSwitch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSwitch <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSwitch&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component large or extra large. Works only with <code>switch</code>.</td><td>string</td><td><code>&#39;lg&#39; | &#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSwitch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSwitch <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSwitch&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component large or extra large. Works only with <code>switch</code>.</td><td>string</td><td><code>&#39;lg&#39; | &#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormText.api.html-30wocJd2.js b/vue/docs/assets/CFormText.api.html-CpJOPSQg.js
similarity index 64%
rename from vue/docs/assets/CFormText.api.html-30wocJd2.js
rename to vue/docs/assets/CFormText.api.html-CpJOPSQg.js
index 7d77b79f07b..62e99260c9c 100644
--- a/vue/docs/assets/CFormText.api.html-30wocJd2.js
+++ b/vue/docs/assets/CFormText.api.html-CpJOPSQg.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CFormTextarea.api.html-Cz-QEqc-.js b/vue/docs/assets/CFormTextarea.api.html-DMhqjvWY.js
similarity index 83%
rename from vue/docs/assets/CFormTextarea.api.html-Cz-QEqc-.js
rename to vue/docs/assets/CFormTextarea.api.html-DMhqjvWY.js
index 3fd428be96e..6208c83e7f9 100644
--- a/vue/docs/assets/CFormTextarea.api.html-Cz-QEqc-.js
+++ b/vue/docs/assets/CFormTextarea.api.html-DMhqjvWY.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormTextarea <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormTextarea <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormTextarea&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormTextarea <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormTextarea <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormTextarea&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CHeader.api.html-DYJ2DbMA.js b/vue/docs/assets/CHeader.api.html-CJg_IEiF.js
similarity index 69%
rename from vue/docs/assets/CHeader.api.html-DYJ2DbMA.js
rename to vue/docs/assets/CHeader.api.html-CJg_IEiF.js
index 764c09f2a2e..ca11cdff4e2 100644
--- a/vue/docs/assets/CHeader.api.html-DYJ2DbMA.js
+++ b/vue/docs/assets/CHeader.api.html-CJg_IEiF.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place header in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place header in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CHeaderBrand.api.html-DZviNjBB.js b/vue/docs/assets/CHeaderBrand.api.html-4A7AgRNX.js
similarity index 62%
rename from vue/docs/assets/CHeaderBrand.api.html-DZviNjBB.js
rename to vue/docs/assets/CHeaderBrand.api.html-4A7AgRNX.js
index 0152211c762..0d5b61bedc9 100644
--- a/vue/docs/assets/CHeaderBrand.api.html-DZviNjBB.js
+++ b/vue/docs/assets/CHeaderBrand.api.html-4A7AgRNX.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheaderbrand" tabindex="-1">CHeaderBrand <a class="anchor-link" href="#cheaderbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheaderbrand" tabindex="-1">CHeaderBrand <a class="anchor-link" href="#cheaderbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CHeaderDivider.api.html-Dxr15zWG.js b/vue/docs/assets/CHeaderDivider.api.html-DKNK6-VZ.js
similarity index 54%
rename from vue/docs/assets/CHeaderDivider.api.html-Dxr15zWG.js
rename to vue/docs/assets/CHeaderDivider.api.html-DKNK6-VZ.js
index 4ead88b2145..478d352ac1f 100644
--- a/vue/docs/assets/CHeaderDivider.api.html-Dxr15zWG.js
+++ b/vue/docs/assets/CHeaderDivider.api.html-DKNK6-VZ.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheaderdivider" tabindex="-1">CHeaderDivider <a class="anchor-link" href="#cheaderdivider" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderDivider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderDivider <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderDivider&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheaderdivider" tabindex="-1">CHeaderDivider <a class="anchor-link" href="#cheaderdivider" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderDivider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderDivider <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderDivider&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CHeaderNav.api.html-CVpRI11a.js b/vue/docs/assets/CHeaderNav.api.html-Bbsph2xH.js
similarity index 65%
rename from vue/docs/assets/CHeaderNav.api.html-CVpRI11a.js
rename to vue/docs/assets/CHeaderNav.api.html-Bbsph2xH.js
index e9565f2a843..4ab74694af9 100644
--- a/vue/docs/assets/CHeaderNav.api.html-CVpRI11a.js
+++ b/vue/docs/assets/CHeaderNav.api.html-Bbsph2xH.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadernav" tabindex="-1">CHeaderNav <a class="anchor-link" href="#cheadernav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadernav" tabindex="-1">CHeaderNav <a class="anchor-link" href="#cheadernav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CHeaderText.api.html-BrKDOelw.js b/vue/docs/assets/CHeaderText.api.html-dosyBX2D.js
similarity index 53%
rename from vue/docs/assets/CHeaderText.api.html-BrKDOelw.js
rename to vue/docs/assets/CHeaderText.api.html-dosyBX2D.js
index 567db24d4f2..6c12e529d76 100644
--- a/vue/docs/assets/CHeaderText.api.html-BrKDOelw.js
+++ b/vue/docs/assets/CHeaderText.api.html-dosyBX2D.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadertext" tabindex="-1">CHeaderText <a class="anchor-link" href="#cheadertext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadertext" tabindex="-1">CHeaderText <a class="anchor-link" href="#cheadertext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CHeaderToggler.api.html-glxtGeI8.js b/vue/docs/assets/CHeaderToggler.api.html-BlIes8qe.js
similarity index 54%
rename from vue/docs/assets/CHeaderToggler.api.html-glxtGeI8.js
rename to vue/docs/assets/CHeaderToggler.api.html-BlIes8qe.js
index ce00d4dacf0..5229ef3af65 100644
--- a/vue/docs/assets/CHeaderToggler.api.html-glxtGeI8.js
+++ b/vue/docs/assets/CHeaderToggler.api.html-BlIes8qe.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadertoggler" tabindex="-1">CHeaderToggler <a class="anchor-link" href="#cheadertoggler" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderToggler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderToggler <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderToggler&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadertoggler" tabindex="-1">CHeaderToggler <a class="anchor-link" href="#cheadertoggler" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderToggler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderToggler <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderToggler&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CIcon.api.html-Pbl12hew.js b/vue/docs/assets/CIcon.api.html-B3u-PJZc.js
similarity index 75%
rename from vue/docs/assets/CIcon.api.html-Pbl12hew.js
rename to vue/docs/assets/CIcon.api.html-B3u-PJZc.js
index ab06922c437..d06b0505c3f 100644
--- a/vue/docs/assets/CIcon.api.html-Pbl12hew.js
+++ b/vue/docs/assets/CIcon.api.html-B3u-PJZc.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cicon" tabindex="-1">CIcon <a class="anchor-link" href="#cicon" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CIcon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue/src/CIcon&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>content</strong></td><td>Use <code>:icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string|array</td><td>-</td><td>-</td></tr><tr><td><strong>custom-class-name</strong></td><td>Use for replacing default CIcon component classes. Prop is overriding the &#39;size&#39; prop.</td><td>string|array|object</td><td>-</td><td>-</td></tr><tr><td><strong>icon</strong></td><td>Name of the icon placed in React object or SVG content.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>Use <code>icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size of the icon. Available sizes: &#39;sm&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;xxl&#39;, &#39;3xl...9xl&#39;, &#39;custom&#39;, &#39;custom-size&#39;.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title tag content.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>use</strong></td><td>If defined component will be rendered using &#39;use&#39; tag.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cicon" tabindex="-1">CIcon <a class="anchor-link" href="#cicon" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CIcon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue/src/CIcon&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>content</strong></td><td>Use <code>:icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string|array</td><td>-</td><td>-</td></tr><tr><td><strong>custom-class-name</strong></td><td>Use for replacing default CIcon component classes. Prop is overriding the &#39;size&#39; prop.</td><td>string|array|object</td><td>-</td><td>-</td></tr><tr><td><strong>icon</strong></td><td>Name of the icon placed in React object or SVG content.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>Use <code>icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size of the icon. Available sizes: &#39;sm&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;xxl&#39;, &#39;3xl...9xl&#39;, &#39;custom&#39;, &#39;custom-size&#39;.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title tag content.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>use</strong></td><td>If defined component will be rendered using &#39;use&#39; tag.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CIconSvg.api.html-DboTNlH1.js b/vue/docs/assets/CIconSvg.api.html-DboTNlH1.js
new file mode 100644
index 00000000000..4378294d44a
--- /dev/null
+++ b/vue/docs/assets/CIconSvg.api.html-DboTNlH1.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ciconsvg" tabindex="-1">CIconSvg <a class="anchor-link" href="#ciconsvg" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIconSvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CIconSvg <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue/src/CIconSvg&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>Use for replacing default CIconSvg component classes. Prop is overriding the &#39;size&#39; prop.</td><td>string|array|object</td><td>-</td><td>-</td></tr><tr><td><strong>height</strong></td><td>The height attribute defines the vertical length of an icon.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size of the icon. Available sizes: &#39;sm&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;xxl&#39;, &#39;3xl...9xl&#39;, &#39;custom&#39;, &#39;custom-size&#39;.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title tag content.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>width</strong></td><td>The width attribute defines the horizontal length of an icon.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_5 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CIconSvg_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CIconSvg.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/coreui-icons-vue/src/CIconSvg.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/coreui-icons-vue/src/CIconSvg.api.html"}]]},"headers":[{"level":3,"title":"CIconSvg","slug":"ciconsvg","link":"#ciconsvg","children":[]}],"filePathRelative":"api/coreui-icons-vue/src/CIconSvg.api.md"}');
+export {
+  CIconSvg_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CImage.api.html-DMywvO2K.js b/vue/docs/assets/CImage.api.html-C1zwuBO9.js
similarity index 69%
rename from vue/docs/assets/CImage.api.html-DMywvO2K.js
rename to vue/docs/assets/CImage.api.html-C1zwuBO9.js
index c6b4d9833d5..eef37fa7226 100644
--- a/vue/docs/assets/CImage.api.html-DMywvO2K.js
+++ b/vue/docs/assets/CImage.api.html-C1zwuBO9.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cimage" tabindex="-1">CImage <a class="anchor-link" href="#cimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/image/CImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the horizontal aligment.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Make image responsive.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>rounded</strong></td><td>Make image rounded.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>thumbnail</strong></td><td>Give an image a rounded 1px border appearance.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cimage" tabindex="-1">CImage <a class="anchor-link" href="#cimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/image/CImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the horizontal aligment.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Make image responsive.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>rounded</strong></td><td>Make image rounded.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>thumbnail</strong></td><td>Give an image a rounded 1px border appearance.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CInputGroup.api.html-BI6IyylY.js b/vue/docs/assets/CInputGroup.api.html-B9Jacvbh.js
similarity index 62%
rename from vue/docs/assets/CInputGroup.api.html-BI6IyylY.js
rename to vue/docs/assets/CInputGroup.api.html-B9Jacvbh.js
index c26e8f13641..81de88e3124 100644
--- a/vue/docs/assets/CInputGroup.api.html-BI6IyylY.js
+++ b/vue/docs/assets/CInputGroup.api.html-B9Jacvbh.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cinputgroup" tabindex="-1">CInputGroup <a class="anchor-link" href="#cinputgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CInputGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CInputGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CInputGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cinputgroup" tabindex="-1">CInputGroup <a class="anchor-link" href="#cinputgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CInputGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CInputGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CInputGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CInputGroupText.api.html-vqsqCFC5.js b/vue/docs/assets/CInputGroupText.api.html-nYw0lYnn.js
similarity index 63%
rename from vue/docs/assets/CInputGroupText.api.html-vqsqCFC5.js
rename to vue/docs/assets/CInputGroupText.api.html-nYw0lYnn.js
index afb567ef2f3..4a63b0f4b86 100644
--- a/vue/docs/assets/CInputGroupText.api.html-vqsqCFC5.js
+++ b/vue/docs/assets/CInputGroupText.api.html-nYw0lYnn.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cinputgrouptext" tabindex="-1">CInputGroupText <a class="anchor-link" href="#cinputgrouptext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CInputGroupText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CInputGroupText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CInputGroupText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cinputgrouptext" tabindex="-1">CInputGroupText <a class="anchor-link" href="#cinputgrouptext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CInputGroupText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CInputGroupText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CInputGroupText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CLink.api.html-DOUEZfTt.js b/vue/docs/assets/CLink.api.html-6FAjEedH.js
similarity index 73%
rename from vue/docs/assets/CLink.api.html-DOUEZfTt.js
rename to vue/docs/assets/CLink.api.html-6FAjEedH.js
index 52d08c89455..1ac84c88129 100644
--- a/vue/docs/assets/CLink.api.html-DOUEZfTt.js
+++ b/vue/docs/assets/CLink.api.html-6FAjEedH.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clink" tabindex="-1">CLink <a class="anchor-link" href="#clink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/link/CLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the component.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clink" tabindex="-1">CLink <a class="anchor-link" href="#clink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/link/CLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the component.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CListGroup.api.html-BqZfzYr_.js b/vue/docs/assets/CListGroup.api.html-CWB2ebuP.js
similarity index 69%
rename from vue/docs/assets/CListGroup.api.html-BqZfzYr_.js
rename to vue/docs/assets/CListGroup.api.html-CWB2ebuP.js
index 64fe47c6f3f..4d0496072b1 100644
--- a/vue/docs/assets/CListGroup.api.html-BqZfzYr_.js
+++ b/vue/docs/assets/CListGroup.api.html-CWB2ebuP.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>flush</strong></td><td>Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>&lt;CCard&gt;</code>)</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type.</td><td>string</td><td><code>&#39;horizontal&#39;</code>, <code>&#39;horizontal-sm&#39;</code>, <code>&#39;horizontal-md&#39;</code>, <code>&#39;horizontal-lg&#39;</code>, <code>&#39;horizontal-xl&#39;</code>, <code>&#39;horizontal-xxl&#39;</code>, ``</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>flush</strong></td><td>Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>&lt;CCard&gt;</code>)</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type.</td><td>string</td><td><code>&#39;horizontal&#39;</code>, <code>&#39;horizontal-sm&#39;</code>, <code>&#39;horizontal-md&#39;</code>, <code>&#39;horizontal-lg&#39;</code>, <code>&#39;horizontal-xl&#39;</code>, <code>&#39;horizontal-xxl&#39;</code>, ``</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CListGroupItem.api.html-DrZDBS4q.js b/vue/docs/assets/CListGroupItem.api.html-B75RiEoP.js
similarity index 71%
rename from vue/docs/assets/CListGroupItem.api.html-DrZDBS4q.js
rename to vue/docs/assets/CListGroupItem.api.html-B75RiEoP.js
index 8aeb4f5173e..5ed139400cb 100644
--- a/vue/docs/assets/CListGroupItem.api.html-DrZDBS4q.js
+++ b/vue/docs/assets/CListGroupItem.api.html-B75RiEoP.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroupItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroupItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroupItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroupItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroupItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroupItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CLoadingButton.api.html-CHbOzqNb.js b/vue/docs/assets/CLoadingButton.api.html-DlKJUvsa.js
similarity index 73%
rename from vue/docs/assets/CLoadingButton.api.html-CHbOzqNb.js
rename to vue/docs/assets/CLoadingButton.api.html-DlKJUvsa.js
index 012ab38f186..d6223950d49 100644
--- a/vue/docs/assets/CLoadingButton.api.html-CHbOzqNb.js
+++ b/vue/docs/assets/CLoadingButton.api.html-DlKJUvsa.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cloadingbutton" tabindex="-1">CLoadingButton <a class="anchor-link" href="#cloadingbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CLoadingButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CLoadingButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/loading-button/CLoadingButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled-on-loading</strong></td><td>Makes button disabled when loading.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>Loading state (set to true to start animation).</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>spinner-type</strong></td><td>Sets type of spinner.<br><code>@default</code> &#39;border&#39;</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>timeout</strong></td><td>Automatically starts loading animation and stops after a determined amount of milliseconds.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on a component.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cloadingbutton" tabindex="-1">CLoadingButton <a class="anchor-link" href="#cloadingbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CLoadingButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CLoadingButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/loading-button/CLoadingButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled-on-loading</strong></td><td>Makes button disabled when loading.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>Loading state (set to true to start animation).</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>spinner-type</strong></td><td>Sets type of spinner.<br><code>@default</code> &#39;border&#39;</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>timeout</strong></td><td>Automatically starts loading animation and stops after a determined amount of milliseconds.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on a component.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CModal.api.html-BCUFPKPI.js b/vue/docs/assets/CModal.api.html-8P7cw-ZY.js
similarity index 83%
rename from vue/docs/assets/CModal.api.html-BCUFPKPI.js
rename to vue/docs/assets/CModal.api.html-8P7cw-ZY.js
index 4e718c04a2e..26eab14a97c 100644
--- a/vue/docs/assets/CModal.api.html-BCUFPKPI.js
+++ b/vue/docs/assets/CModal.api.html-8P7cw-ZY.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModal <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModal&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Align the modal in the center or top of the screen.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;center&#39;</code></td><td>&#39;top&#39;</td></tr><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>content-class-name</strong></td><td>A string of all className you want applied to the modal content component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>focus</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Puts the focus on the modal when shown.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>fullscreen</strong></td><td>Set modal to covers the entire user viewport</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the modal when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>scrollable</strong></td><td>Create a scrollable modal that allows scrolling the modal body.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Remove animation to create modal that simply appear rather than fade in to view.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>unmount-on-close</strong></td><td>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>close-prevented</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModal <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModal&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Align the modal in the center or top of the screen.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;center&#39;</code></td><td>&#39;top&#39;</td></tr><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>content-class-name</strong></td><td>A string of all className you want applied to the modal content component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>focus</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Puts the focus on the modal when shown.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>fullscreen</strong></td><td>Set modal to covers the entire user viewport</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the modal when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>scrollable</strong></td><td>Create a scrollable modal that allows scrolling the modal body.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Remove animation to create modal that simply appear rather than fade in to view.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>unmount-on-close</strong></td><td>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>close-prevented</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CModalBody.api.html-B4PDRuiq.js b/vue/docs/assets/CModalBody.api.html-CHE1pY1A.js
similarity index 56%
rename from vue/docs/assets/CModalBody.api.html-B4PDRuiq.js
rename to vue/docs/assets/CModalBody.api.html-CHE1pY1A.js
index 19865d2d7f4..5ad4921386d 100644
--- a/vue/docs/assets/CModalBody.api.html-B4PDRuiq.js
+++ b/vue/docs/assets/CModalBody.api.html-CHE1pY1A.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalbody" tabindex="-1">CModalBody <a class="anchor-link" href="#cmodalbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalbody" tabindex="-1">CModalBody <a class="anchor-link" href="#cmodalbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CModalFooter.api.html-I3zNFYrU.js b/vue/docs/assets/CModalFooter.api.html-BsNGmVfu.js
similarity index 54%
rename from vue/docs/assets/CModalFooter.api.html-I3zNFYrU.js
rename to vue/docs/assets/CModalFooter.api.html-BsNGmVfu.js
index 94ca3cc3e86..d6fcd939345 100644
--- a/vue/docs/assets/CModalFooter.api.html-I3zNFYrU.js
+++ b/vue/docs/assets/CModalFooter.api.html-BsNGmVfu.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalfooter" tabindex="-1">CModalFooter <a class="anchor-link" href="#cmodalfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalfooter" tabindex="-1">CModalFooter <a class="anchor-link" href="#cmodalfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CModalHeader.api.html-BEbIxHSk.js b/vue/docs/assets/CModalHeader.api.html-Dg9LwxqA.js
similarity index 62%
rename from vue/docs/assets/CModalHeader.api.html-BEbIxHSk.js
rename to vue/docs/assets/CModalHeader.api.html-Dg9LwxqA.js
index 9518e41efe7..d6508836528 100644
--- a/vue/docs/assets/CModalHeader.api.html-BEbIxHSk.js
+++ b/vue/docs/assets/CModalHeader.api.html-Dg9LwxqA.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalheader" tabindex="-1">CModalHeader <a class="anchor-link" href="#cmodalheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Add a close button component to the header.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalheader" tabindex="-1">CModalHeader <a class="anchor-link" href="#cmodalheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Add a close button component to the header.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CModalTitle.api.html-Dsn_5uO1.js b/vue/docs/assets/CModalTitle.api.html-BBDuhOrq.js
similarity index 62%
rename from vue/docs/assets/CModalTitle.api.html-Dsn_5uO1.js
rename to vue/docs/assets/CModalTitle.api.html-BBDuhOrq.js
index 9a96e5e799d..c7e7908ce28 100644
--- a/vue/docs/assets/CModalTitle.api.html-Dsn_5uO1.js
+++ b/vue/docs/assets/CModalTitle.api.html-BBDuhOrq.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodaltitle" tabindex="-1">CModalTitle <a class="anchor-link" href="#cmodaltitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodaltitle" tabindex="-1">CModalTitle <a class="anchor-link" href="#cmodaltitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CMultiSelect.api.html-B9pw_7rn.js b/vue/docs/assets/CMultiSelect.api.html-B9pw_7rn.js
new file mode 100644
index 00000000000..a8502b367dc
--- /dev/null
+++ b/vue/docs/assets/CMultiSelect.api.html-B9pw_7rn.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-create-options</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Allow users to create options if they are not in the list of options.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>cleaner</strong></td><td>Enables selection cleaner element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>clear-search-on-select</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Clear current search on selecting an item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>Set the id attribute for the native select element.<br><br><strong>[Deprecated since v5.3.0]</strong> The name attribute for the native select element is generated based on the <code>id</code> property:<br>- <code>&lt;select name=&quot;\\{id\\}-multi-select&quot; /&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When set, the options list will have a loading style: loading spinner and reduced opacity.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>multiple</strong></td><td>It specifies that multiple options can be selected at once.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>The name attribute for the select element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>List of option elements.</td><td>(Option | OptionsGroup)[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>options-max-height</strong></td><td>Sets maxHeight of options list.<br><code>@default</code> &#39;auto&#39;</td><td>number|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>options-style</strong></td><td>Sets option style.<br><code>@default</code> &#39;checkbox&#39;</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the search input.<br><code>@default</code> &#39;Select...&#39;&#39;</td><td>string</td><td>-</td><td>&#39;Select...&#39;</td></tr><tr><td><strong>required</strong></td><td>When it is present, it indicates that the user must choose a value before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>reset-selection-on-options-change</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>Determines whether the selected options should be cleared when the options list is updated. When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>search</strong></td><td>Enables search input element.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>search-no-results-label</strong></td><td>Sets the label for no results when filtering.</td><td>string</td><td>-</td><td>&#39;no items&#39;</td></tr><tr><td><strong>select-all</strong></td><td>Enables select all button.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>select-all-label</strong></td><td>Sets the select all button label.<br><code>@default</code> &#39;Select all options&#39;</td><td>string</td><td>-</td><td>&#39;Select all options&#39;</td></tr><tr><td><strong>selection-type</strong></td><td>Sets the selection style.<br><code>@default</code> &#39;tags&#39;</td><td>string</td><td><code>&#39;counter&#39;</code>, <code>&#39;tags&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;tags&#39;</td></tr><tr><td><strong>selection-type-counter-text</strong></td><td>Sets the counter selection label.<br><code>@default</code> &#39;item(s) selected&#39;</td><td>string</td><td>-</td><td>&#39;item(s) selected&#39;</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>virtual-scroller</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enable virtual scroller for the options list.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of multi select dropdown.<br><code>@default</code> false</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible-items</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Amount of visible items when virtualScroller is set to <code>true</code>.</td><td>number</td><td>-</td><td>10</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected option. [docs]</td><td></td></tr><tr><td><strong>filter-change</strong></td><td>Execute a function when the filter value changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>The callback is fired when the Multi Select component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>The callback is fired when the Multi Select component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_7 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CMultiSelect_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelect.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/multi-select/CMultiSelect.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelect.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelect","slug":"cmultiselect","link":"#cmultiselect","children":[]}],"filePathRelative":"api/multi-select/CMultiSelect.api.md"}');
+export {
+  CMultiSelect_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CMultiSelect.api.html-BmAsQVzE.js b/vue/docs/assets/CMultiSelect.api.html-BmAsQVzE.js
deleted file mode 100644
index 210fa908f35..00000000000
--- a/vue/docs/assets/CMultiSelect.api.html-BmAsQVzE.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-create-options</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Allow users to create options if they are not in the list of options.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>cleaner</strong></td><td>Enables selection cleaner element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>clear-search-on-select</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Clear current search on selecting an item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When set, the options list will have a loading style: loading spinner and reduced opacity.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>multiple</strong></td><td>It specifies that multiple options can be selected at once.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>options</strong></td><td>List of option elements.</td><td>(Option | OptionsGroup)[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>options-max-height</strong></td><td>Sets maxHeight of options list.<br><code>@default</code> &#39;auto&#39;</td><td>number|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>options-style</strong></td><td>Sets option style.<br><code>@default</code> &#39;checkbox&#39;</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the search input.<br><code>@default</code> &#39;Select...&#39;&#39;</td><td>string</td><td>-</td><td>&#39;Select...&#39;</td></tr><tr><td><strong>required</strong></td><td>When it is present, it indicates that the user must choose a value before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>search</strong></td><td>Enables search input element.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>search-no-results-label</strong></td><td>Sets the label for no results when filtering.</td><td>string</td><td>-</td><td>&#39;no items&#39;</td></tr><tr><td><strong>select-all</strong></td><td>Enables select all button.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>select-all-label</strong></td><td>Sets the select all button label.<br><code>@default</code> &#39;Select all options&#39;</td><td>string</td><td>-</td><td>&#39;Select all options&#39;</td></tr><tr><td><strong>selection-type</strong></td><td>Sets the selection style.<br><code>@default</code> &#39;tags&#39;</td><td>string</td><td><code>&#39;counter&#39;</code>, <code>&#39;tags&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;tags&#39;</td></tr><tr><td><strong>selection-type-counter-text</strong></td><td>Sets the counter selection label.<br><code>@default</code> &#39;item(s) selected&#39;</td><td>string</td><td>-</td><td>&#39;item(s) selected&#39;</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>virtual-scroller</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enable virtual scroller for the options list.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of multi select dropdown.<br><code>@default</code> false</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible-items</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Amount of visible items when virtualScroller is set to <code>true</code>.</td><td>number</td><td>-</td><td>10</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected option. [docs]</td><td></td></tr><tr><td><strong>filter-change</strong></td><td>Execute a function when the filter value changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>The callback is fired when the Multi Select component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>The callback is fired when the Multi Select component requests to be shown.</td><td></td></tr></tbody></table>', 6);
-const _hoisted_7 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CMultiSelect_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelect.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/multi-select/CMultiSelect.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelect.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelect","slug":"cmultiselect","link":"#cmultiselect","children":[]}],"filePathRelative":"api/multi-select/CMultiSelect.api.md"}');
-export {
-  CMultiSelect_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CMultiSelectNativeSelect.api.html-BmnaF-ZV.js b/vue/docs/assets/CMultiSelectNativeSelect.api.html-Mfuatll8.js
similarity index 67%
rename from vue/docs/assets/CMultiSelectNativeSelect.api.html-BmnaF-ZV.js
rename to vue/docs/assets/CMultiSelectNativeSelect.api.html-Mfuatll8.js
index a76b6232c34..772dfb3610f 100644
--- a/vue/docs/assets/CMultiSelectNativeSelect.api.html-BmnaF-ZV.js
+++ b/vue/docs/assets/CMultiSelectNativeSelect.api.html-Mfuatll8.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectgroupoption" tabindex="-1">CMultiSelectGroupOption <a class="anchor-link" href="#cmultiselectgroupoption" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelectGroupOption <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelectGroupOption <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelectNativeSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectgroupoption" tabindex="-1">CMultiSelectGroupOption <a class="anchor-link" href="#cmultiselectgroupoption" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelectGroupOption <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelectGroupOption <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelectNativeSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CMultiSelectOptions.api.html-BqQlwptE.js b/vue/docs/assets/CMultiSelectOptions.api.html-DivQq4t9.js
similarity index 64%
rename from vue/docs/assets/CMultiSelectOptions.api.html-BqQlwptE.js
rename to vue/docs/assets/CMultiSelectOptions.api.html-DivQq4t9.js
index 9859e359286..3667cab2d27 100644
--- a/vue/docs/assets/CMultiSelectOptions.api.html-BqQlwptE.js
+++ b/vue/docs/assets/CMultiSelectOptions.api.html-DivQq4t9.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectoptions" tabindex="-1">CMultiSelectOptions <a class="anchor-link" href="#cmultiselectoptions" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelectOptions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelectOptions <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelectOptions&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>option-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectoptions" tabindex="-1">CMultiSelectOptions <a class="anchor-link" href="#cmultiselectoptions" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelectOptions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelectOptions <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelectOptions&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>option-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CMultiSelectSelection.api.html-Dutv3Y68.js b/vue/docs/assets/CMultiSelectSelection.api.html-D2u4Hpu2.js
similarity index 64%
rename from vue/docs/assets/CMultiSelectSelection.api.html-Dutv3Y68.js
rename to vue/docs/assets/CMultiSelectSelection.api.html-D2u4Hpu2.js
index 42acf1f22e8..9897fc20894 100644
--- a/vue/docs/assets/CMultiSelectSelection.api.html-Dutv3Y68.js
+++ b/vue/docs/assets/CMultiSelectSelection.api.html-D2u4Hpu2.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectselection" tabindex="-1">CMultiSelectSelection <a class="anchor-link" href="#cmultiselectselection" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelectSelection <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelectSelection <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelectSelection&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>remove</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectselection" tabindex="-1">CMultiSelectSelection <a class="anchor-link" href="#cmultiselectselection" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelectSelection <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelectSelection <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelectSelection&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>remove</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNav.api.html-BixfBxUo.js b/vue/docs/assets/CNav.api.html-CHflKJ-r.js
similarity index 69%
rename from vue/docs/assets/CNav.api.html-BixfBxUo.js
rename to vue/docs/assets/CNav.api.html-CHflKJ-r.js
index c2ab81a565f..51751455128 100644
--- a/vue/docs/assets/CNav.api.html-BixfBxUo.js
+++ b/vue/docs/assets/CNav.api.html-CHflKJ-r.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavGroup.api.html-DjoL3rDD.js b/vue/docs/assets/CNavGroup.api.html-B69rD5K0.js
similarity index 71%
rename from vue/docs/assets/CNavGroup.api.html-DjoL3rDD.js
rename to vue/docs/assets/CNavGroup.api.html-B69rD5K0.js
index 0a722752b19..5a39fe5448e 100644
--- a/vue/docs/assets/CNavGroup.api.html-DjoL3rDD.js
+++ b/vue/docs/assets/CNavGroup.api.html-B69rD5K0.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavgroup" tabindex="-1">CNavGroup <a class="anchor-link" href="#cnavgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>compact</strong></td><td>Make nav group more compact by cutting all <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Show nav group items.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>visible-change</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavgroup" tabindex="-1">CNavGroup <a class="anchor-link" href="#cnavgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>compact</strong></td><td>Make nav group more compact by cutting all <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Show nav group items.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>visible-change</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavGroupItems.api.html-iDaB1GPK.js b/vue/docs/assets/CNavGroupItems.api.html-MzViYoW-.js
similarity index 54%
rename from vue/docs/assets/CNavGroupItems.api.html-iDaB1GPK.js
rename to vue/docs/assets/CNavGroupItems.api.html-MzViYoW-.js
index bce3aa819fa..5faa048c431 100644
--- a/vue/docs/assets/CNavGroupItems.api.html-iDaB1GPK.js
+++ b/vue/docs/assets/CNavGroupItems.api.html-MzViYoW-.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavgroupitems" tabindex="-1">CNavGroupItems <a class="anchor-link" href="#cnavgroupitems" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavGroupItems <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavGroupItems <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavGroupItems&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavgroupitems" tabindex="-1">CNavGroupItems <a class="anchor-link" href="#cnavgroupitems" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavGroupItems <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavGroupItems <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavGroupItems&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavItem.api.html-BEXD-jT_.js b/vue/docs/assets/CNavItem.api.html-BluVGAkl.js
similarity index 64%
rename from vue/docs/assets/CNavItem.api.html-BEXD-jT_.js
rename to vue/docs/assets/CNavItem.api.html-BluVGAkl.js
index 678a4a0d264..04e299fbad6 100644
--- a/vue/docs/assets/CNavItem.api.html-BEXD-jT_.js
+++ b/vue/docs/assets/CNavItem.api.html-BluVGAkl.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavLink.api.html-B1Fra5GG.js b/vue/docs/assets/CNavLink.api.html-BLbL7bWh.js
similarity index 68%
rename from vue/docs/assets/CNavLink.api.html-B1Fra5GG.js
rename to vue/docs/assets/CNavLink.api.html-BLbL7bWh.js
index 99d0f5cbf78..a424f1f44e6 100644
--- a/vue/docs/assets/CNavLink.api.html-B1Fra5GG.js
+++ b/vue/docs/assets/CNavLink.api.html-BLbL7bWh.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavlink" tabindex="-1">CNavLink <a class="anchor-link" href="#cnavlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavlink" tabindex="-1">CNavLink <a class="anchor-link" href="#cnavlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavTitle.api.html-CWU7sJed.js b/vue/docs/assets/CNavTitle.api.html-B5pzzmsO.js
similarity index 64%
rename from vue/docs/assets/CNavTitle.api.html-CWU7sJed.js
rename to vue/docs/assets/CNavTitle.api.html-B5pzzmsO.js
index 02527542225..3e11ecaa3e9 100644
--- a/vue/docs/assets/CNavTitle.api.html-CWU7sJed.js
+++ b/vue/docs/assets/CNavTitle.api.html-B5pzzmsO.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavtitle" tabindex="-1">CNavTitle <a class="anchor-link" href="#cnavtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavtitle" tabindex="-1">CNavTitle <a class="anchor-link" href="#cnavtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavbar.api.html-BeCcpzSN.js b/vue/docs/assets/CNavbar.api.html-D6jrKQQE.js
similarity index 78%
rename from vue/docs/assets/CNavbar.api.html-BeCcpzSN.js
rename to vue/docs/assets/CNavbar.api.html-D6jrKQQE.js
index b094828f266..e57f88138c0 100644
--- a/vue/docs/assets/CNavbar.api.html-BeCcpzSN.js
+++ b/vue/docs/assets/CNavbar.api.html-D6jrKQQE.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;nav&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>expand</strong></td><td>Defines the responsive breakpoint to determine when content collapses.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Place component in non-static positions.</td><td>string</td><td><code>&#39;fixed-top&#39;</code>, <code>&#39;fixed-bottom&#39;</code>, <code>&#39;sticky-top&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;nav&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>expand</strong></td><td>Defines the responsive breakpoint to determine when content collapses.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Place component in non-static positions.</td><td>string</td><td><code>&#39;fixed-top&#39;</code>, <code>&#39;fixed-bottom&#39;</code>, <code>&#39;sticky-top&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavbarBrand.api.html-J_G_IdJv.js b/vue/docs/assets/CNavbarBrand.api.html-iAKNmT2K.js
similarity index 65%
rename from vue/docs/assets/CNavbarBrand.api.html-J_G_IdJv.js
rename to vue/docs/assets/CNavbarBrand.api.html-iAKNmT2K.js
index cbd660a4b5d..2481a166638 100644
--- a/vue/docs/assets/CNavbarBrand.api.html-J_G_IdJv.js
+++ b/vue/docs/assets/CNavbarBrand.api.html-iAKNmT2K.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbarbrand" tabindex="-1">CNavbarBrand <a class="anchor-link" href="#cnavbarbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbarbrand" tabindex="-1">CNavbarBrand <a class="anchor-link" href="#cnavbarbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavbarNav.api.html-Cd7uTEsr.js b/vue/docs/assets/CNavbarNav.api.html-DTmYoiRc.js
similarity index 65%
rename from vue/docs/assets/CNavbarNav.api.html-Cd7uTEsr.js
rename to vue/docs/assets/CNavbarNav.api.html-DTmYoiRc.js
index ae9d1e65ea1..2143a2e69df 100644
--- a/vue/docs/assets/CNavbarNav.api.html-Cd7uTEsr.js
+++ b/vue/docs/assets/CNavbarNav.api.html-DTmYoiRc.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavbarText.api.html-BvWhRe00.js b/vue/docs/assets/CNavbarText.api.html-DhRgVY0Q.js
similarity index 53%
rename from vue/docs/assets/CNavbarText.api.html-BvWhRe00.js
rename to vue/docs/assets/CNavbarText.api.html-DhRgVY0Q.js
index a1ef512f867..daf5fa4176b 100644
--- a/vue/docs/assets/CNavbarText.api.html-BvWhRe00.js
+++ b/vue/docs/assets/CNavbarText.api.html-DhRgVY0Q.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbartext" tabindex="-1">CNavbarText <a class="anchor-link" href="#cnavbartext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbartext" tabindex="-1">CNavbarText <a class="anchor-link" href="#cnavbartext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CNavbarToggler.api.html-VWI7FIAd.js b/vue/docs/assets/CNavbarToggler.api.html-BHSE5jxT.js
similarity index 54%
rename from vue/docs/assets/CNavbarToggler.api.html-VWI7FIAd.js
rename to vue/docs/assets/CNavbarToggler.api.html-BHSE5jxT.js
index 5f8df28faab..6b635d6f109 100644
--- a/vue/docs/assets/CNavbarToggler.api.html-VWI7FIAd.js
+++ b/vue/docs/assets/CNavbarToggler.api.html-BHSE5jxT.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbartoggler" tabindex="-1">CNavbarToggler <a class="anchor-link" href="#cnavbartoggler" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarToggler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarToggler <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarToggler&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbartoggler" tabindex="-1">CNavbarToggler <a class="anchor-link" href="#cnavbartoggler" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarToggler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarToggler <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarToggler&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/COffcanvas.api.html-C17Hgo5q.js b/vue/docs/assets/COffcanvas.api.html--9epuLuW.js
similarity index 77%
rename from vue/docs/assets/COffcanvas.api.html-C17Hgo5q.js
rename to vue/docs/assets/COffcanvas.api.html--9epuLuW.js
index 0185a168af2..361888c7c26 100644
--- a/vue/docs/assets/COffcanvas.api.html-C17Hgo5q.js
+++ b/vue/docs/assets/COffcanvas.api.html--9epuLuW.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvas" tabindex="-1">COffcanvas <a class="anchor-link" href="#coffcanvas" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvas <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvas <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvas&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the offcanvas when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr><tr><td><strong>responsive</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</td><td>boolean|string</td><td><code>boolean | &#39;sm&#39; | &#39;md&#39; | &#39;lg&#39; | &#39;xl&#39; | &#39;xxl&#39;</code></td><td>true</td></tr><tr><td><strong>scroll</strong></td><td>Allow body scrolling while offcanvas is open</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of offcanvas component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvas" tabindex="-1">COffcanvas <a class="anchor-link" href="#coffcanvas" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvas <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvas <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvas&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the offcanvas when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr><tr><td><strong>responsive</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</td><td>boolean|string</td><td><code>boolean | &#39;sm&#39; | &#39;md&#39; | &#39;lg&#39; | &#39;xl&#39; | &#39;xxl&#39;</code></td><td>true</td></tr><tr><td><strong>scroll</strong></td><td>Allow body scrolling while offcanvas is open</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of offcanvas component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/COffcanvasBody.api.html-7xNiFQIc.js b/vue/docs/assets/COffcanvasBody.api.html-DpuEcC8p.js
similarity index 55%
rename from vue/docs/assets/COffcanvasBody.api.html-7xNiFQIc.js
rename to vue/docs/assets/COffcanvasBody.api.html-DpuEcC8p.js
index 209234e3374..1dfdaff11ee 100644
--- a/vue/docs/assets/COffcanvasBody.api.html-7xNiFQIc.js
+++ b/vue/docs/assets/COffcanvasBody.api.html-DpuEcC8p.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvasbody" tabindex="-1">COffcanvasBody <a class="anchor-link" href="#coffcanvasbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvasbody" tabindex="-1">COffcanvasBody <a class="anchor-link" href="#coffcanvasbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/COffcanvasHeader.api.html-z90OVBc1.js b/vue/docs/assets/COffcanvasHeader.api.html-CA3y4VF-.js
similarity index 55%
rename from vue/docs/assets/COffcanvasHeader.api.html-z90OVBc1.js
rename to vue/docs/assets/COffcanvasHeader.api.html-CA3y4VF-.js
index 8f4fbbf04c5..27d0ff23fa7 100644
--- a/vue/docs/assets/COffcanvasHeader.api.html-z90OVBc1.js
+++ b/vue/docs/assets/COffcanvasHeader.api.html-CA3y4VF-.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvasheader" tabindex="-1">COffcanvasHeader <a class="anchor-link" href="#coffcanvasheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvasheader" tabindex="-1">COffcanvasHeader <a class="anchor-link" href="#coffcanvasheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/COffcanvasTitle.api.html-C6NXTtFn.js b/vue/docs/assets/COffcanvasTitle.api.html-BCDNOR0i.js
similarity index 63%
rename from vue/docs/assets/COffcanvasTitle.api.html-C6NXTtFn.js
rename to vue/docs/assets/COffcanvasTitle.api.html-BCDNOR0i.js
index c12dac7e23f..d45f7c0ce53 100644
--- a/vue/docs/assets/COffcanvasTitle.api.html-C6NXTtFn.js
+++ b/vue/docs/assets/COffcanvasTitle.api.html-BCDNOR0i.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvastitle" tabindex="-1">COffcanvasTitle <a class="anchor-link" href="#coffcanvastitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvastitle" tabindex="-1">COffcanvasTitle <a class="anchor-link" href="#coffcanvastitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CPagination.api.html-BFRDJVfm.js b/vue/docs/assets/CPagination.api.html-mFhXc4Yf.js
similarity index 65%
rename from vue/docs/assets/CPagination.api.html-BFRDJVfm.js
rename to vue/docs/assets/CPagination.api.html-mFhXc4Yf.js
index 8808f208f53..dccc0ca8045 100644
--- a/vue/docs/assets/CPagination.api.html-BFRDJVfm.js
+++ b/vue/docs/assets/CPagination.api.html-mFhXc4Yf.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpagination" tabindex="-1">CPagination <a class="anchor-link" href="#cpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the alignment of pagination components.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpagination" tabindex="-1">CPagination <a class="anchor-link" href="#cpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the alignment of pagination components.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CPaginationItem.api.html-BeMGgnpT.js b/vue/docs/assets/CPaginationItem.api.html-Bsa5oQkt.js
similarity index 68%
rename from vue/docs/assets/CPaginationItem.api.html-BeMGgnpT.js
rename to vue/docs/assets/CPaginationItem.api.html-Bsa5oQkt.js
index 31cdb16ea1e..ab723dcf061 100644
--- a/vue/docs/assets/CPaginationItem.api.html-BeMGgnpT.js
+++ b/vue/docs/assets/CPaginationItem.api.html-Bsa5oQkt.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpaginationitem" tabindex="-1">CPaginationItem <a class="anchor-link" href="#cpaginationitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPaginationItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPaginationItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPaginationItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpaginationitem" tabindex="-1">CPaginationItem <a class="anchor-link" href="#cpaginationitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPaginationItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPaginationItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPaginationItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CPicker.api.html-9VeqvbFd.js b/vue/docs/assets/CPicker.api.html-Da5Hysn9.js
similarity index 75%
rename from vue/docs/assets/CPicker.api.html-9VeqvbFd.js
rename to vue/docs/assets/CPicker.api.html-Da5Hysn9.js
index 07aa3c49dfa..0bfe3fb79f3 100644
--- a/vue/docs/assets/CPicker.api.html-9VeqvbFd.js
+++ b/vue/docs/assets/CPicker.api.html-Da5Hysn9.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpicker" tabindex="-1">CPicker <a class="anchor-link" href="#cpicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/picker/CPicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong></td><td>Set container type for the component.</td><td>string</td><td><code>dropdown</code>, <code>inline</code></td><td>&#39;dropdown&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>dropdown-class-names</strong></td><td>A string of all className you want applied to the dropdown menu.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpicker" tabindex="-1">CPicker <a class="anchor-link" href="#cpicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/picker/CPicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong></td><td>Set container type for the component.</td><td>string</td><td><code>dropdown</code>, <code>inline</code></td><td>&#39;dropdown&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>dropdown-class-names</strong></td><td>A string of all className you want applied to the dropdown menu.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CPlaceholder.api.html-Bg2cOzGv.js b/vue/docs/assets/CPlaceholder.api.html-CpcOzpbr.js
similarity index 78%
rename from vue/docs/assets/CPlaceholder.api.html-Bg2cOzGv.js
rename to vue/docs/assets/CPlaceholder.api.html-CpcOzpbr.js
index 4ce3268ee06..06d22a06dd9 100644
--- a/vue/docs/assets/CPlaceholder.api.html-Bg2cOzGv.js
+++ b/vue/docs/assets/CPlaceholder.api.html-CpcOzpbr.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPlaceholder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPlaceholder <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/placeholder/CPlaceholder&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong></td><td>Set animation type to better convey the perception of something being actively loaded.</td><td>string</td><td><code>&#39;glow&#39;</code>, <code>&#39;wave&#39;</code></td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component extra small, small, or large.</td><td>string</td><td><code>&#39;xs&#39;</code>, <code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>xs</strong></td><td>The number of columns on extra small devices (&lt;576px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns on small devices (&lt;768px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns on medium devices (&lt;992px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns on large devices (&lt;1200px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns on X-Large devices (&lt;1400px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns on XX-Large devices (≥1400px).</td><td>number</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPlaceholder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPlaceholder <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/placeholder/CPlaceholder&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong></td><td>Set animation type to better convey the perception of something being actively loaded.</td><td>string</td><td><code>&#39;glow&#39;</code>, <code>&#39;wave&#39;</code></td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component extra small, small, or large.</td><td>string</td><td><code>&#39;xs&#39;</code>, <code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>xs</strong></td><td>The number of columns on extra small devices (&lt;576px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns on small devices (&lt;768px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns on medium devices (&lt;992px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns on large devices (&lt;1200px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns on X-Large devices (&lt;1400px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns on XX-Large devices (≥1400px).</td><td>number</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CPopover.api.html-D9o0t5Mg.js b/vue/docs/assets/CPopover.api.html-ymVfjSSe.js
similarity index 84%
rename from vue/docs/assets/CPopover.api.html-D9o0t5Mg.js
rename to vue/docs/assets/CPopover.api.html-ymVfjSSe.js
index a8ee50d0112..dd4387236f0 100644
--- a/vue/docs/assets/CPopover.api.html-D9o0t5Mg.js
+++ b/vue/docs/assets/CPopover.api.html-ymVfjSSe.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpopover" tabindex="-1">CPopover <a class="anchor-link" href="#cpopover" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPopover <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPopover <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/popover/CPopover&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the popover.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the popover relative to its target.</td><td>array</td><td>-</td><td>[0, 8]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>&#39;click&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of popover component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpopover" tabindex="-1">CPopover <a class="anchor-link" href="#cpopover" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPopover <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPopover <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/popover/CPopover&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the popover.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the popover relative to its target.</td><td>array</td><td>-</td><td>[0, 8]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>&#39;click&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of popover component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CProgress.api.html-B8_3XJj0.js b/vue/docs/assets/CProgress.api.html-C-66SSng.js
similarity index 88%
rename from vue/docs/assets/CProgress.api.html-B8_3XJj0.js
rename to vue/docs/assets/CProgress.api.html-C-66SSng.js
index add116a037e..6a3b7166024 100644
--- a/vue/docs/assets/CProgress.api.html-B8_3XJj0.js
+++ b/vue/docs/assets/CProgress.api.html-C-66SSng.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, e as createTextVNode, b as createVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, f as createTextVNode, b as createVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogress" tabindex="-1">CProgress <a class="anchor-link" href="#cprogress" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgress <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgress&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4>', 3);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogress" tabindex="-1">CProgress <a class="anchor-link" href="#cprogress" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgress <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgress&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4>', 3);
 const _hoisted_4 = { class: "table table-striped table-api" };
 const _hoisted_5 = /* @__PURE__ */ createBaseVNode("thead", null, [
   /* @__PURE__ */ createBaseVNode("tr", null, [
diff --git a/vue/docs/assets/CProgressBar.api.html-D3vDyWpF.js b/vue/docs/assets/CProgressBar.api.html-BjA2nShz.js
similarity index 71%
rename from vue/docs/assets/CProgressBar.api.html-D3vDyWpF.js
rename to vue/docs/assets/CProgressBar.api.html-BjA2nShz.js
index 96a522c814b..1f7385f401b 100644
--- a/vue/docs/assets/CProgressBar.api.html-D3vDyWpF.js
+++ b/vue/docs/assets/CProgressBar.api.html-BjA2nShz.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressbar" tabindex="-1">CProgressBar <a class="anchor-link" href="#cprogressbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgressBar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgressBar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgressBar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animated</strong></td><td>Use to animate the stripes right to left via CSS3 animations.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>value</strong></td><td>The percent to progress the ProgressBar.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>variant</strong></td><td>Set the progress bar variant to optional striped.</td><td>string</td><td><code>&#39;striped&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressbar" tabindex="-1">CProgressBar <a class="anchor-link" href="#cprogressbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgressBar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgressBar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgressBar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animated</strong></td><td>Use to animate the stripes right to left via CSS3 animations.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>value</strong></td><td>The percent to progress the ProgressBar.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>variant</strong></td><td>Set the progress bar variant to optional striped.</td><td>string</td><td><code>&#39;striped&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CProgressStacked.api.html-DkDz4CoY.js b/vue/docs/assets/CProgressStacked.api.html-iS9rdju9.js
similarity index 55%
rename from vue/docs/assets/CProgressStacked.api.html-DkDz4CoY.js
rename to vue/docs/assets/CProgressStacked.api.html-iS9rdju9.js
index f505489fd15..358632b5d87 100644
--- a/vue/docs/assets/CProgressStacked.api.html-DkDz4CoY.js
+++ b/vue/docs/assets/CProgressStacked.api.html-iS9rdju9.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressstacked" tabindex="-1">CProgressStacked <a class="anchor-link" href="#cprogressstacked" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgressStacked <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgressStacked <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgressStacked&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressstacked" tabindex="-1">CProgressStacked <a class="anchor-link" href="#cprogressstacked" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgressStacked <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgressStacked <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgressStacked&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CRating.api.html-CNQcY5OX.js b/vue/docs/assets/CRating.api.html-CbBSuHpA.js
similarity index 82%
rename from vue/docs/assets/CRating.api.html-CNQcY5OX.js
rename to vue/docs/assets/CRating.api.html-CbBSuHpA.js
index 18781759e4a..563be251d00 100644
--- a/vue/docs/assets/CRating.api.html-CNQcY5OX.js
+++ b/vue/docs/assets/CRating.api.html-CbBSuHpA.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="crating" tabindex="-1">CRating <a class="anchor-link" href="#crating" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRating <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRating <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/rating/CRating&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-clear</strong></td><td>Enables the clearing upon clicking the selected item again.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>highlight-only-selected</strong></td><td>If enabled, only the currently selected icon will be visibly highlighted.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>item-count</strong></td><td>Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc.</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>The name attribute of the radio input elements.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>precision</strong></td><td>Minimum increment value change allowed.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or custom if you define custom icons with custom height.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;custom&#39;</code></td><td>-</td></tr><tr><td><strong>tooltips</strong></td><td>Enable tooltips with default values or set specific labels for each icon.</td><td>boolean | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>hover</strong></td><td>Execute a function when a user hover the element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="crating" tabindex="-1">CRating <a class="anchor-link" href="#crating" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRating <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRating <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/rating/CRating&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-clear</strong></td><td>Enables the clearing upon clicking the selected item again.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>highlight-only-selected</strong></td><td>If enabled, only the currently selected icon will be visibly highlighted.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>item-count</strong></td><td>Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc.</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>The name attribute of the radio input elements.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>precision</strong></td><td>Minimum increment value change allowed.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or custom if you define custom icons with custom height.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;custom&#39;</code></td><td>-</td></tr><tr><td><strong>tooltips</strong></td><td>Enable tooltips with default values or set specific labels for each icon.</td><td>boolean | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>hover</strong></td><td>Execute a function when a user hover the element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CRow.api.html-Bqs4xMB8.js b/vue/docs/assets/CRow.api.html-CIrSW5Ga.js
similarity index 79%
rename from vue/docs/assets/CRow.api.html-Bqs4xMB8.js
rename to vue/docs/assets/CRow.api.html-CIrSW5Ga.js
index b55da2313cd..9ff201ae616 100644
--- a/vue/docs/assets/CRow.api.html-Bqs4xMB8.js
+++ b/vue/docs/assets/CRow.api.html-CIrSW5Ga.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSidebar.api.html-CU-ReA5a.js b/vue/docs/assets/CSidebar.api.html-DaxOjldv.js
similarity index 78%
rename from vue/docs/assets/CSidebar.api.html-CU-ReA5a.js
rename to vue/docs/assets/CSidebar.api.html-DaxOjldv.js
index 1dcaf556c86..5d969ec1103 100644
--- a/vue/docs/assets/CSidebar.api.html-CU-ReA5a.js
+++ b/vue/docs/assets/CSidebar.api.html-DaxOjldv.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>light&#39;</code></td><td>-</td></tr><tr><td><strong>narrow</strong></td><td>Make sidebar narrow.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>overlaid</strong></td><td>Set sidebar to overlaid variant.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place sidebar in non-static positions.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>unfoldable</strong></td><td>Expand narrowed sidebar on hover.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of sidebar component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>visible-change</strong></td><td>Event emitted after visibility of component changed.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>light&#39;</code></td><td>-</td></tr><tr><td><strong>narrow</strong></td><td>Make sidebar narrow.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>overlaid</strong></td><td>Set sidebar to overlaid variant.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place sidebar in non-static positions.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>unfoldable</strong></td><td>Expand narrowed sidebar on hover.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of sidebar component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>visible-change</strong></td><td>Event emitted after visibility of component changed.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSidebarBrand.api.html-BRcYS6vj.js b/vue/docs/assets/CSidebarBrand.api.html-CMvNigzU.js
similarity index 65%
rename from vue/docs/assets/CSidebarBrand.api.html-BRcYS6vj.js
rename to vue/docs/assets/CSidebarBrand.api.html-CMvNigzU.js
index bfd71a8a4fd..abe4ac87053 100644
--- a/vue/docs/assets/CSidebarBrand.api.html-BRcYS6vj.js
+++ b/vue/docs/assets/CSidebarBrand.api.html-CMvNigzU.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarbrand" tabindex="-1">CSidebarBrand <a class="anchor-link" href="#csidebarbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarbrand" tabindex="-1">CSidebarBrand <a class="anchor-link" href="#csidebarbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSidebarFooter.api.html-ejFT7uLz.js b/vue/docs/assets/CSidebarFooter.api.html-DG6rj4Di.js
similarity index 55%
rename from vue/docs/assets/CSidebarFooter.api.html-ejFT7uLz.js
rename to vue/docs/assets/CSidebarFooter.api.html-DG6rj4Di.js
index 7c1c0ff51d9..c767bb16807 100644
--- a/vue/docs/assets/CSidebarFooter.api.html-ejFT7uLz.js
+++ b/vue/docs/assets/CSidebarFooter.api.html-DG6rj4Di.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarfooter" tabindex="-1">CSidebarFooter <a class="anchor-link" href="#csidebarfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarfooter" tabindex="-1">CSidebarFooter <a class="anchor-link" href="#csidebarfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSidebarHeader.api.html-BQRLDdkW.js b/vue/docs/assets/CSidebarHeader.api.html-UjLXre_-.js
similarity index 55%
rename from vue/docs/assets/CSidebarHeader.api.html-BQRLDdkW.js
rename to vue/docs/assets/CSidebarHeader.api.html-UjLXre_-.js
index 0ab78a7a04d..8c080d6f755 100644
--- a/vue/docs/assets/CSidebarHeader.api.html-BQRLDdkW.js
+++ b/vue/docs/assets/CSidebarHeader.api.html-UjLXre_-.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarheader" tabindex="-1">CSidebarHeader <a class="anchor-link" href="#csidebarheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarheader" tabindex="-1">CSidebarHeader <a class="anchor-link" href="#csidebarheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSidebarNav.api.html-D_E51N0Z.js b/vue/docs/assets/CSidebarNav.api.html-ZV8snc4P.js
similarity index 62%
rename from vue/docs/assets/CSidebarNav.api.html-D_E51N0Z.js
rename to vue/docs/assets/CSidebarNav.api.html-ZV8snc4P.js
index 740d959f237..064236af1a5 100644
--- a/vue/docs/assets/CSidebarNav.api.html-D_E51N0Z.js
+++ b/vue/docs/assets/CSidebarNav.api.html-ZV8snc4P.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarnav" tabindex="-1">CSidebarNav <a class="anchor-link" href="#csidebarnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string | Component</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarnav" tabindex="-1">CSidebarNav <a class="anchor-link" href="#csidebarnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string | Component</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSidebarToggler.api.html-BsbRHzMl.js b/vue/docs/assets/CSidebarToggler.api.html-CwaVG0LH.js
similarity index 55%
rename from vue/docs/assets/CSidebarToggler.api.html-BsbRHzMl.js
rename to vue/docs/assets/CSidebarToggler.api.html-CwaVG0LH.js
index 4e8e9883006..7477edc8706 100644
--- a/vue/docs/assets/CSidebarToggler.api.html-BsbRHzMl.js
+++ b/vue/docs/assets/CSidebarToggler.api.html-CwaVG0LH.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebartoggler" tabindex="-1">CSidebarToggler <a class="anchor-link" href="#csidebartoggler" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarToggler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarToggler <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarToggler&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebartoggler" tabindex="-1">CSidebarToggler <a class="anchor-link" href="#csidebartoggler" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebarToggler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebarToggler <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebarToggler&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartPagination.api.html-BZNxDexA.js b/vue/docs/assets/CSmartPagination.api.html-BikuSyAw.js
similarity index 80%
rename from vue/docs/assets/CSmartPagination.api.html-BZNxDexA.js
rename to vue/docs/assets/CSmartPagination.api.html-BikuSyAw.js
index 730ad6c5522..d86dd895a1c 100644
--- a/vue/docs/assets/CSmartPagination.api.html-BZNxDexA.js
+++ b/vue/docs/assets/CSmartPagination.api.html-BikuSyAw.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-pagination/CSmartPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Horizontall align<br><code>@default</code> &#39;start&#39;</td><td>string</td><td>-</td><td>&#39;start&#39;</td></tr><tr><td><strong>active-page</strong></td><td>Current page number<br><code>@default</code> 1</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>arrows</strong></td><td>Show/hide arrows<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>dots</strong></td><td>Show/hide dots<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>double-arrows</strong></td><td>Show double arrows buttons<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>first-button</strong></td><td>The content of &#39;firstButton&#39; button<br><code>@default</code> &#39;«&#39;</td><td>string</td><td>-</td><td>&#39;«&#39;</td></tr><tr><td><strong>last-button</strong></td><td>The content of &#39;lastButton&#39; button<br><code>@default</code> &#39;»&#39;</td><td>string</td><td>-</td><td>&#39;»&#39;</td></tr><tr><td><strong>limit</strong></td><td>Maximum items number<br><code>@default</code> 5</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>next-button</strong></td><td>The content of &#39;nextButton&#39; button<br><code>@default</code> &#39;›&#39;</td><td>string</td><td>-</td><td>&#39;›&#39;</td></tr><tr><td><strong>pages</strong></td><td>Number of pages</td><td>number</td><td>-</td><td>1000</td></tr><tr><td><strong>previous-button</strong></td><td>The content of &#39;previousButton&#39; button<br><code>@default</code> &#39;‹&#39;</td><td>string</td><td>-</td><td>&#39;‹&#39;</td></tr><tr><td><strong>size</strong></td><td>Size of pagination, valid values: &#39;sm&#39;, &#39;lg&#39;</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>On active page change callback.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-pagination/CSmartPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Horizontall align<br><code>@default</code> &#39;start&#39;</td><td>string</td><td>-</td><td>&#39;start&#39;</td></tr><tr><td><strong>active-page</strong></td><td>Current page number<br><code>@default</code> 1</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>arrows</strong></td><td>Show/hide arrows<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>dots</strong></td><td>Show/hide dots<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>double-arrows</strong></td><td>Show double arrows buttons<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>first-button</strong></td><td>The content of &#39;firstButton&#39; button<br><code>@default</code> &#39;«&#39;</td><td>string</td><td>-</td><td>&#39;«&#39;</td></tr><tr><td><strong>last-button</strong></td><td>The content of &#39;lastButton&#39; button<br><code>@default</code> &#39;»&#39;</td><td>string</td><td>-</td><td>&#39;»&#39;</td></tr><tr><td><strong>limit</strong></td><td>Maximum items number<br><code>@default</code> 5</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>next-button</strong></td><td>The content of &#39;nextButton&#39; button<br><code>@default</code> &#39;›&#39;</td><td>string</td><td>-</td><td>&#39;›&#39;</td></tr><tr><td><strong>pages</strong></td><td>Number of pages</td><td>number</td><td>-</td><td>1000</td></tr><tr><td><strong>previous-button</strong></td><td>The content of &#39;previousButton&#39; button<br><code>@default</code> &#39;‹&#39;</td><td>string</td><td>-</td><td>&#39;‹&#39;</td></tr><tr><td><strong>size</strong></td><td>Size of pagination, valid values: &#39;sm&#39;, &#39;lg&#39;</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>On active page change callback.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartPagination.api.html-DAbADGMm.js b/vue/docs/assets/CSmartPagination.api.html-CrCaD_lP.js
similarity index 80%
rename from vue/docs/assets/CSmartPagination.api.html-DAbADGMm.js
rename to vue/docs/assets/CSmartPagination.api.html-CrCaD_lP.js
index e7041399413..3183d223dcd 100644
--- a/vue/docs/assets/CSmartPagination.api.html-DAbADGMm.js
+++ b/vue/docs/assets/CSmartPagination.api.html-CrCaD_lP.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/pagination/CSmartPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Horizontall align<br><code>@default</code> &#39;start&#39;</td><td>string</td><td>-</td><td>&#39;start&#39;</td></tr><tr><td><strong>active-page</strong></td><td>Current page number<br><code>@default</code> 1</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>arrows</strong></td><td>Show/hide arrows<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>dots</strong></td><td>Show/hide dots<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>double-arrows</strong></td><td>Show double arrows buttons<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>first-button</strong></td><td>The content of &#39;firstButton&#39; button<br><code>@default</code> &#39;«&#39;</td><td>string</td><td>-</td><td>&#39;«&#39;</td></tr><tr><td><strong>last-button</strong></td><td>The content of &#39;lastButton&#39; button<br><code>@default</code> &#39;»&#39;</td><td>string</td><td>-</td><td>&#39;»&#39;</td></tr><tr><td><strong>limit</strong></td><td>Maximum items number<br><code>@default</code> 5</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>next-button</strong></td><td>The content of &#39;nextButton&#39; button<br><code>@default</code> &#39;›&#39;</td><td>string</td><td>-</td><td>&#39;›&#39;</td></tr><tr><td><strong>pages</strong></td><td>Number of pages</td><td>number</td><td>-</td><td>1000</td></tr><tr><td><strong>previous-button</strong></td><td>The content of &#39;previousButton&#39; button<br><code>@default</code> &#39;‹&#39;</td><td>string</td><td>-</td><td>&#39;‹&#39;</td></tr><tr><td><strong>size</strong></td><td>Size of pagination, valid values: &#39;sm&#39;, &#39;lg&#39;</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>On active page change callback.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/pagination/CSmartPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Horizontall align<br><code>@default</code> &#39;start&#39;</td><td>string</td><td>-</td><td>&#39;start&#39;</td></tr><tr><td><strong>active-page</strong></td><td>Current page number<br><code>@default</code> 1</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>arrows</strong></td><td>Show/hide arrows<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>dots</strong></td><td>Show/hide dots<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>double-arrows</strong></td><td>Show double arrows buttons<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>first-button</strong></td><td>The content of &#39;firstButton&#39; button<br><code>@default</code> &#39;«&#39;</td><td>string</td><td>-</td><td>&#39;«&#39;</td></tr><tr><td><strong>last-button</strong></td><td>The content of &#39;lastButton&#39; button<br><code>@default</code> &#39;»&#39;</td><td>string</td><td>-</td><td>&#39;»&#39;</td></tr><tr><td><strong>limit</strong></td><td>Maximum items number<br><code>@default</code> 5</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>next-button</strong></td><td>The content of &#39;nextButton&#39; button<br><code>@default</code> &#39;›&#39;</td><td>string</td><td>-</td><td>&#39;›&#39;</td></tr><tr><td><strong>pages</strong></td><td>Number of pages</td><td>number</td><td>-</td><td>1000</td></tr><tr><td><strong>previous-button</strong></td><td>The content of &#39;previousButton&#39; button<br><code>@default</code> &#39;‹&#39;</td><td>string</td><td>-</td><td>&#39;‹&#39;</td></tr><tr><td><strong>size</strong></td><td>Size of pagination, valid values: &#39;sm&#39;, &#39;lg&#39;</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>On active page change callback.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartTable.api.html-C_27owD5.js b/vue/docs/assets/CSmartTable.api.html-DBtpefqV.js
similarity index 93%
rename from vue/docs/assets/CSmartTable.api.html-C_27owD5.js
rename to vue/docs/assets/CSmartTable.api.html-DBtpefqV.js
index 1c3186e8e52..e0e56319fa4 100644
--- a/vue/docs/assets/CSmartTable.api.html-C_27owD5.js
+++ b/vue/docs/assets/CSmartTable.api.html-DBtpefqV.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttable" tabindex="-1">CSmartTable <a class="anchor-link" href="#csmarttable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-page</strong></td><td>Sets active page. If &#39;pagination&#39; prop is enabled, activePage is set only initially.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>cleaner</strong></td><td>When set, displays table cleaner above table, next to the table filter (or in place of table filter if <code>tableFilter</code> prop is not set)<br>Cleaner resets <code>tableFilterValue</code>, <code>columnFilterValue</code>, <code>sorterValue</code>. If clean is possible it is clickable (<code>tabIndex=&quot;0&quot;</code> <code>role=&quot;button&quot;</code>, <code>color=&quot;danger&quot;</code>), otherwise it is not clickable and transparent. Cleaner can be customized through the <code>cleanerIcon</code> slot.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>clickable-rows</strong></td><td>Style table items as clickable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter</strong></td><td>When set, displays additional filter row between table header and items, allowing filtering by specific column.<br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | ColumnFilter</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter-value</strong></td><td>Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:<br>{ user: &#39;John&#39;, age: 12 }</td><td>ColumnFilterValue</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- filter (Boolean) - removes filter from column when set to false.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- sorter (Boolean) - disables sorting of the column when set to false<br>- <a href="https://coreui.io/vue/docs/components/table.html#ctableheadercell" target="_blank" rel="noopener noreferrer">_props</a> (String/Array/Object) - add props to <code>CTableHeaderCell</code>.<br>- _style (String/Array/Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>column-sorter</strong></td><td>Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.<br><br>Sorter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic sorting inside component.<br>- resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.</td><td>boolean | Sorter</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>If <code>true</code> Displays table footer, which mirrors table header. (without column filter).<br>Or Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br><code>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]</code><br>or<br><code>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</code></td><td>boolean | (FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>header</strong></td><td>Set to false to remove table header.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>items</strong></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can customize each row by passing them by <a href="http://coreui.io/vue/docs/components/table.html#ctablerow" target="_blank" rel="noopener noreferrer">_props</a> key and single cell by <a href="http://coreui.io/vue/docs/components/table.html#ctabledatacell" target="_blank" rel="noopener noreferrer">_cellProps</a>.<br><br>Examples:<br>- <code>_props: { color: &#39;primary&#39;, align: &#39;middle&#39;}</code><br>- <code>_cellProps: { all: { class: &#39;fw-semibold&#39;}, &#39;name&#39;: { color: &#39;info&#39; }}</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>items-number</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>items-per-page</strong></td><td>Number of items per site, when pagination is enabled.</td><td>number</td><td>-</td><td>10</td></tr><tr><td><strong>items-per-page-label</strong></td><td>Label for items per page selector.</td><td>string</td><td>-</td><td>&#39;Items per page:&#39;</td></tr><tr><td><strong>items-per-page-options</strong></td><td>Items per page selector options.</td><td>number[]</td><td>-</td><td>() =&gt; [5, 10, 20, 50]</td></tr><tr><td><strong>items-per-page-select</strong></td><td>Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:<br>- external (Boolean) - disables automatic &#39;itemsPerPage&#39; change (use to change pages externaly by &#39;pagination-change&#39; event).</td><td>boolean | ItemsPerPageSelect</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>When set, table will have loading style: loading spinner and reduced opacity. When &#39;small&#39; prop is enabled spinner will be also smaller.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>no-items-label</strong></td><td>ReactNode or string for passing custom noItemsLabel texts.</td><td>string</td><td>-</td><td>&#39;No items found&#39;</td></tr><tr><td><strong>pagination</strong></td><td>Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and &#39;itemsPerPage&#39; prop. If this restriction is an obstacle, you can make external CPagination instead.</td><td>boolean | Pagination</td><td>-</td><td>-</td></tr><tr><td><strong>pagination-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/smart-pagination#csmartpagination" target="_blank" rel="noopener noreferrer">CSmartPagination</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>selectable</strong></td><td>Add checkboxes to make table rows selectable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-all</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enables select all checkbox displayed in the header of the table.<br><br>Can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic selection inside the component.</td><td>boolean | { external?: boolean }</td><td>-</td><td>-</td></tr><tr><td><strong>selected</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Array of selected objects, where each object represents one item - row in table.<br><br>Example item: <code>{ name: &#39;John&#39; , age: 12 }</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>sorter-value</strong></td><td>State of the sorter. Name key is column name, direction can be &#39;asc&#39; or &#39;desc&#39;. eg.:<br>{ column: &#39;status&#39;, state: &#39;asc&#39; }</td><td>SorterValue</td><td>-</td><td>-</td></tr><tr><td><strong>table-body-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablebody" target="_blank" rel="noopener noreferrer">CTableBody</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablefoot" target="_blank" rel="noopener noreferrer">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter</strong></td><td>When set, displays table filter above table, allowing filtering by specific column.<br><br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | TableFilter</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter-label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>&#39;Filter:&#39;</td></tr><tr><td><strong>table-filter-placeholder</strong></td><td>Specifies a short hint that is visible in the search input.</td><td>string</td><td>-</td><td>&#39;type string...&#39;</td></tr><tr><td><strong>table-filter-value</strong></td><td>Value of table filter.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablehead" target="_blank" rel="noopener noreferrer">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctable" target="_blank" rel="noopener noreferrer">CTable</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>Page change callback.</td><td><strong>page</strong> <code>number</code> - active page number</td></tr><tr><td><strong>column-filter-change</strong></td><td>Column filter change callback.</td><td><strong>ColumnFilterValue</strong> <code>object</code> - {[key: string]: string | number}</td></tr><tr><td><strong>filtered-items-change</strong></td><td>Filtered items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>items-per-page-change</strong></td><td>Pagination change callback.</td><td><strong>itemsPerPageNumber</strong> <code>number</code> - items per page number</td></tr><tr><td><strong>row-click</strong></td><td>Row click callback.</td><td><strong>item</strong> <code>object</code> - undefined<br><strong>index</strong> <code>number</code> - undefined<br><strong>columnName</strong> <code>string</code> - undefined<br><strong>event</strong> <code>event</code> - undefined</td></tr><tr><td><strong>select-all</strong></td><td>Select all callback.</td><td></td></tr><tr><td><strong>selected-items-change</strong></td><td>Selected items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>sorter-change</strong></td><td>Sorter value change callback.</td><td><strong>SorterValue</strong> <code>object</code> - { column?: string, state?: number | string}</td></tr><tr><td><strong>table-filter-change</strong></td><td>Table filter change callback.</td><td><strong>tableFilterValue</strong> <code>string</code> - undefined</td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttable" tabindex="-1">CSmartTable <a class="anchor-link" href="#csmarttable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-page</strong></td><td>Sets active page. If &#39;pagination&#39; prop is enabled, activePage is set only initially.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>cleaner</strong></td><td>When set, displays table cleaner above table, next to the table filter (or in place of table filter if <code>tableFilter</code> prop is not set)<br>Cleaner resets <code>tableFilterValue</code>, <code>columnFilterValue</code>, <code>sorterValue</code>. If clean is possible it is clickable (<code>tabIndex=&quot;0&quot;</code> <code>role=&quot;button&quot;</code>, <code>color=&quot;danger&quot;</code>), otherwise it is not clickable and transparent. Cleaner can be customized through the <code>cleanerIcon</code> slot.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>clickable-rows</strong></td><td>Style table items as clickable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter</strong></td><td>When set, displays additional filter row between table header and items, allowing filtering by specific column.<br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | ColumnFilter</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter-value</strong></td><td>Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:<br>{ user: &#39;John&#39;, age: 12 }</td><td>ColumnFilterValue</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- filter (Boolean) - removes filter from column when set to false.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- sorter (Boolean) - disables sorting of the column when set to false<br>- <a href="https://coreui.io/vue/docs/components/table.html#ctableheadercell" target="_blank" rel="noopener noreferrer">_props</a> (String/Array/Object) - add props to <code>CTableHeaderCell</code>.<br>- _style (String/Array/Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>column-sorter</strong></td><td>Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.<br><br>Sorter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic sorting inside component.<br>- resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.</td><td>boolean | Sorter</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>If <code>true</code> Displays table footer, which mirrors table header. (without column filter).<br>Or Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br><code>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]</code><br>or<br><code>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</code></td><td>boolean | (FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>header</strong></td><td>Set to false to remove table header.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>items</strong></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can customize each row by passing them by <a href="http://coreui.io/vue/docs/components/table.html#ctablerow" target="_blank" rel="noopener noreferrer">_props</a> key and single cell by <a href="http://coreui.io/vue/docs/components/table.html#ctabledatacell" target="_blank" rel="noopener noreferrer">_cellProps</a>.<br><br>Examples:<br>- <code>_props: { color: &#39;primary&#39;, align: &#39;middle&#39;}</code><br>- <code>_cellProps: { all: { class: &#39;fw-semibold&#39;}, &#39;name&#39;: { color: &#39;info&#39; }}</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>items-number</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>items-per-page</strong></td><td>Number of items per site, when pagination is enabled.</td><td>number</td><td>-</td><td>10</td></tr><tr><td><strong>items-per-page-label</strong></td><td>Label for items per page selector.</td><td>string</td><td>-</td><td>&#39;Items per page:&#39;</td></tr><tr><td><strong>items-per-page-options</strong></td><td>Items per page selector options.</td><td>number[]</td><td>-</td><td>() =&gt; [5, 10, 20, 50]</td></tr><tr><td><strong>items-per-page-select</strong></td><td>Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:<br>- external (Boolean) - disables automatic &#39;itemsPerPage&#39; change (use to change pages externaly by &#39;pagination-change&#39; event).</td><td>boolean | ItemsPerPageSelect</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>When set, table will have loading style: loading spinner and reduced opacity. When &#39;small&#39; prop is enabled spinner will be also smaller.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>no-items-label</strong></td><td>ReactNode or string for passing custom noItemsLabel texts.</td><td>string</td><td>-</td><td>&#39;No items found&#39;</td></tr><tr><td><strong>pagination</strong></td><td>Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and &#39;itemsPerPage&#39; prop. If this restriction is an obstacle, you can make external CPagination instead.</td><td>boolean | Pagination</td><td>-</td><td>-</td></tr><tr><td><strong>pagination-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/smart-pagination#csmartpagination" target="_blank" rel="noopener noreferrer">CSmartPagination</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>selectable</strong></td><td>Add checkboxes to make table rows selectable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-all</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enables select all checkbox displayed in the header of the table.<br><br>Can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic selection inside the component.</td><td>boolean | { external?: boolean }</td><td>-</td><td>-</td></tr><tr><td><strong>selected</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Array of selected objects, where each object represents one item - row in table.<br><br>Example item: <code>{ name: &#39;John&#39; , age: 12 }</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>sorter-value</strong></td><td>State of the sorter. Name key is column name, direction can be &#39;asc&#39; or &#39;desc&#39;. eg.:<br>{ column: &#39;status&#39;, state: &#39;asc&#39; }</td><td>SorterValue</td><td>-</td><td>-</td></tr><tr><td><strong>table-body-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablebody" target="_blank" rel="noopener noreferrer">CTableBody</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablefoot" target="_blank" rel="noopener noreferrer">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter</strong></td><td>When set, displays table filter above table, allowing filtering by specific column.<br><br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | TableFilter</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter-label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>&#39;Filter:&#39;</td></tr><tr><td><strong>table-filter-placeholder</strong></td><td>Specifies a short hint that is visible in the search input.</td><td>string</td><td>-</td><td>&#39;type string...&#39;</td></tr><tr><td><strong>table-filter-value</strong></td><td>Value of table filter.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablehead" target="_blank" rel="noopener noreferrer">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctable" target="_blank" rel="noopener noreferrer">CTable</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>Page change callback.</td><td><strong>page</strong> <code>number</code> - active page number</td></tr><tr><td><strong>column-filter-change</strong></td><td>Column filter change callback.</td><td><strong>ColumnFilterValue</strong> <code>object</code> - {[key: string]: string | number}</td></tr><tr><td><strong>filtered-items-change</strong></td><td>Filtered items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>items-per-page-change</strong></td><td>Pagination change callback.</td><td><strong>itemsPerPageNumber</strong> <code>number</code> - items per page number</td></tr><tr><td><strong>row-click</strong></td><td>Row click callback.</td><td><strong>item</strong> <code>object</code> - undefined<br><strong>index</strong> <code>number</code> - undefined<br><strong>columnName</strong> <code>string</code> - undefined<br><strong>event</strong> <code>event</code> - undefined</td></tr><tr><td><strong>select-all</strong></td><td>Select all callback.</td><td></td></tr><tr><td><strong>selected-items-change</strong></td><td>Selected items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>sorter-change</strong></td><td>Sorter value change callback.</td><td><strong>SorterValue</strong> <code>object</code> - { column?: string, state?: number | string}</td></tr><tr><td><strong>table-filter-change</strong></td><td>Table filter change callback.</td><td><strong>tableFilterValue</strong> <code>string</code> - undefined</td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartTableBody.api.html--kdQLwaK.js b/vue/docs/assets/CSmartTableBody.api.html-BnkPBl42.js
similarity index 66%
rename from vue/docs/assets/CSmartTableBody.api.html--kdQLwaK.js
rename to vue/docs/assets/CSmartTableBody.api.html-BnkPBl42.js
index 5d18837a790..61cb0c37a72 100644
--- a/vue/docs/assets/CSmartTableBody.api.html--kdQLwaK.js
+++ b/vue/docs/assets/CSmartTableBody.api.html-BnkPBl42.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablebody" tabindex="-1">CSmartTableBody <a class="anchor-link" href="#csmarttablebody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>row-checked</strong></td><td></td><td></td></tr><tr><td><strong>row-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablebody" tabindex="-1">CSmartTableBody <a class="anchor-link" href="#csmarttablebody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>row-checked</strong></td><td></td><td></td></tr><tr><td><strong>row-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartTableCleaner.api.html-2JqW2Tbq.js b/vue/docs/assets/CSmartTableCleaner.api.html-Ca51YF0C.js
similarity index 66%
rename from vue/docs/assets/CSmartTableCleaner.api.html-2JqW2Tbq.js
rename to vue/docs/assets/CSmartTableCleaner.api.html-Ca51YF0C.js
index 4e6ed4aa87b..2a9176e519e 100644
--- a/vue/docs/assets/CSmartTableCleaner.api.html-2JqW2Tbq.js
+++ b/vue/docs/assets/CSmartTableCleaner.api.html-Ca51YF0C.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablecleaner" tabindex="-1">CSmartTableCleaner <a class="anchor-link" href="#csmarttablecleaner" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableCleaner <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableCleaner <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableCleaner&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>table-cleaner-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablecleaner" tabindex="-1">CSmartTableCleaner <a class="anchor-link" href="#csmarttablecleaner" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableCleaner <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableCleaner <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableCleaner&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>table-cleaner-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartTableFilter.api.html-CGF2OHjR.js b/vue/docs/assets/CSmartTableFilter.api.html-B7_1b50f.js
similarity index 63%
rename from vue/docs/assets/CSmartTableFilter.api.html-CGF2OHjR.js
rename to vue/docs/assets/CSmartTableFilter.api.html-B7_1b50f.js
index 69473d039e4..2388be04f07 100644
--- a/vue/docs/assets/CSmartTableFilter.api.html-CGF2OHjR.js
+++ b/vue/docs/assets/CSmartTableFilter.api.html-B7_1b50f.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablefilter" tabindex="-1">CSmartTableFilter <a class="anchor-link" href="#csmarttablefilter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableFilter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableFilter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableFilter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>filter-input</strong></td><td></td><td></td></tr><tr><td><strong>filter-change</strong></td><td></td><td></td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablefilter" tabindex="-1">CSmartTableFilter <a class="anchor-link" href="#csmarttablefilter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableFilter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableFilter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableFilter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>filter-input</strong></td><td></td><td></td></tr><tr><td><strong>filter-change</strong></td><td></td><td></td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartTableHead.api.html-BF9DPtLV.js b/vue/docs/assets/CSmartTableHead.api.html-DW9ZUntG.js
similarity index 69%
rename from vue/docs/assets/CSmartTableHead.api.html-BF9DPtLV.js
rename to vue/docs/assets/CSmartTableHead.api.html-DW9ZUntG.js
index 21a748d144b..e9f507f0857 100644
--- a/vue/docs/assets/CSmartTableHead.api.html-BF9DPtLV.js
+++ b/vue/docs/assets/CSmartTableHead.api.html-DW9ZUntG.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablehead" tabindex="-1">CSmartTableHead <a class="anchor-link" href="#csmarttablehead" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableHead <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableHead <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableHead&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>custom-filter-change</strong></td><td></td><td></td></tr><tr><td><strong>filter-input</strong></td><td></td><td></td></tr><tr><td><strong>filter-change</strong></td><td></td><td></td></tr><tr><td><strong>select-all-checked</strong></td><td></td><td></td></tr><tr><td><strong>sort-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablehead" tabindex="-1">CSmartTableHead <a class="anchor-link" href="#csmarttablehead" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableHead <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableHead <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableHead&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>custom-filter-change</strong></td><td></td><td></td></tr><tr><td><strong>filter-input</strong></td><td></td><td></td></tr><tr><td><strong>filter-change</strong></td><td></td><td></td></tr><tr><td><strong>select-all-checked</strong></td><td></td><td></td></tr><tr><td><strong>sort-click</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-71l86LhN.js b/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js
similarity index 66%
rename from vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-71l86LhN.js
rename to vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js
index 1595bb641ee..b60b7c5b819 100644
--- a/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-71l86LhN.js
+++ b/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttableitemsperpageselector" tabindex="-1">CSmartTableItemsPerPageSelector <a class="anchor-link" href="#csmarttableitemsperpageselector" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableItemsPerPageSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableItemsPerPageSelector <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableItemsPerPageSelector&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change-items-per-page</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttableitemsperpageselector" tabindex="-1">CSmartTableItemsPerPageSelector <a class="anchor-link" href="#csmarttableitemsperpageselector" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTableItemsPerPageSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTableItemsPerPageSelector <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTableItemsPerPageSelector&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change-items-per-page</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CSpinner.api.html-nhkoGdh0.js b/vue/docs/assets/CSpinner.api.html-O0NhTV-x.js
similarity index 74%
rename from vue/docs/assets/CSpinner.api.html-nhkoGdh0.js
rename to vue/docs/assets/CSpinner.api.html-O0NhTV-x.js
index 33c6f13f85d..96400a5e2e9 100644
--- a/vue/docs/assets/CSpinner.api.html-nhkoGdh0.js
+++ b/vue/docs/assets/CSpinner.api.html-O0NhTV-x.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSpinner <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSpinner <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/spinner/CSpinner&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>visually-hidden-label</strong></td><td>Set visually hidden label for accessibility purposes.</td><td>string</td><td>-</td><td>&#39;Loading...&#39;</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSpinner <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSpinner <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/spinner/CSpinner&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>visually-hidden-label</strong></td><td>Set visually hidden label for accessibility purposes.</td><td>string</td><td>-</td><td>&#39;Loading...&#39;</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTab.api.html-BZmJ5EOH.js b/vue/docs/assets/CTab.api.html-DOCKLIPZ.js
similarity index 62%
rename from vue/docs/assets/CTab.api.html-BZmJ5EOH.js
rename to vue/docs/assets/CTab.api.html-DOCKLIPZ.js
index a6954e5db66..63f51a6414d 100644
--- a/vue/docs/assets/CTab.api.html-BZmJ5EOH.js
+++ b/vue/docs/assets/CTab.api.html-DOCKLIPZ.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctab" tabindex="-1">CTab <a class="anchor-link" href="#ctab" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTab <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTab <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTab&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctab" tabindex="-1">CTab <a class="anchor-link" href="#ctab" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTab <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTab <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTab&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTabContent.api.html-BMf7lokg.js b/vue/docs/assets/CTabContent.api.html-C2PinBa9.js
similarity index 53%
rename from vue/docs/assets/CTabContent.api.html-BMf7lokg.js
rename to vue/docs/assets/CTabContent.api.html-C2PinBa9.js
index fe5202464e7..36b9f92dece 100644
--- a/vue/docs/assets/CTabContent.api.html-BMf7lokg.js
+++ b/vue/docs/assets/CTabContent.api.html-C2PinBa9.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabcontent" tabindex="-1">CTabContent <a class="anchor-link" href="#ctabcontent" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabContent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabContent <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabContent&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabcontent" tabindex="-1">CTabContent <a class="anchor-link" href="#ctabcontent" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabContent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabContent <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabContent&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTabList.api.html-B4-8A2N0.js b/vue/docs/assets/CTabList.api.html-BEqv9sl7.js
similarity index 68%
rename from vue/docs/assets/CTabList.api.html-B4-8A2N0.js
rename to vue/docs/assets/CTabList.api.html-BEqv9sl7.js
index 157e8afdb52..3eb60531e4f 100644
--- a/vue/docs/assets/CTabList.api.html-B4-8A2N0.js
+++ b/vue/docs/assets/CTabList.api.html-BEqv9sl7.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablist" tabindex="-1">CTabList <a class="anchor-link" href="#ctablist" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabList <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabList&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablist" tabindex="-1">CTabList <a class="anchor-link" href="#ctablist" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabList <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabList&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTabPane.api.html-BGSLX6iu.js b/vue/docs/assets/CTabPane.api.html-B47A_sq6.js
similarity index 71%
rename from vue/docs/assets/CTabPane.api.html-BGSLX6iu.js
rename to vue/docs/assets/CTabPane.api.html-B47A_sq6.js
index 5cb714d27c6..3b8af4623d3 100644
--- a/vue/docs/assets/CTabPane.api.html-BGSLX6iu.js
+++ b/vue/docs/assets/CTabPane.api.html-B47A_sq6.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabpane" tabindex="-1">CTabPane <a class="anchor-link" href="#ctabpane" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabPane <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabPane <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabPane&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>transition</strong> <br><div class="badge bg-primary">5.1.0+</div></td><td>Enable fade in and fade out transition.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabpane" tabindex="-1">CTabPane <a class="anchor-link" href="#ctabpane" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabPane <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabPane <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabPane&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>transition</strong> <br><div class="badge bg-primary">5.1.0+</div></td><td>Enable fade in and fade out transition.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTabPanel.api.html-BI93f942.js b/vue/docs/assets/CTabPanel.api.html-CZYhUIL_.js
similarity index 72%
rename from vue/docs/assets/CTabPanel.api.html-BI93f942.js
rename to vue/docs/assets/CTabPanel.api.html-CZYhUIL_.js
index 2a3ef958c46..0c9466735c7 100644
--- a/vue/docs/assets/CTabPanel.api.html-BI93f942.js
+++ b/vue/docs/assets/CTabPanel.api.html-CZYhUIL_.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabpanel" tabindex="-1">CTabPanel <a class="anchor-link" href="#ctabpanel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabPanel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabPanel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabPanel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Enable fade in and fade out transition.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabpanel" tabindex="-1">CTabPanel <a class="anchor-link" href="#ctabpanel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabPanel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabPanel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabPanel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Enable fade in and fade out transition.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTable.api.html-Bzg4sm1k.js b/vue/docs/assets/CTable.api.html-D0dRnCW-.js
similarity index 88%
rename from vue/docs/assets/CTable.api.html-Bzg4sm1k.js
rename to vue/docs/assets/CTable.api.html-D0dRnCW-.js
index ea772f56b74..5346ec287c5 100644
--- a/vue/docs/assets/CTable.api.html-Bzg4sm1k.js
+++ b/vue/docs/assets/CTable.api.html-D0dRnCW-.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctable" tabindex="-1">CTable <a class="anchor-link" href="#ctable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>border-color</strong></td><td>Sets the border color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>bordered</strong></td><td>Add borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>borderless</strong></td><td>Remove borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>caption</strong></td><td>Put the <code>&lt;caption&gt;</code> on the top of the table.</td><td>string</td><td><code>&#39;top&#39; | string</code></td><td>-</td></tr><tr><td><strong>caption-top</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Set the text of the table caption and the caption on the top of the table.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- _props (Object) - adds classes to all cels in column, ex. _props: { scope: &#39;col&#39;, className: &#39;custom-class&#39; },<br>- _style (Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>footer</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]<br>or<br>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</td><td>(FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>hover</strong></td><td>Enable a hover state on table rows within a <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>items</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by &#39;_props&#39; key and to single cell by &#39;_cellProps&#39;.<br><br>Example item:<br>{ name: &#39;John&#39; , age: 12, _props: { color: &#39;success&#39; }, _cellProps: { age: { className: &#39;fw-bold&#39;}}}</td><td>Item[]</td><td>-</td><td>-</td></tr><tr><td><strong>small</strong></td><td>Make table more compact by cutting all cell <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped</strong></td><td>Add zebra-striping to any table row within the <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped-columns</strong> <br><div class="badge bg-primary">4.4.0+</div></td><td>Add zebra-striping to any table column.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table footer component.<br><br>Properties to <a href="#ctablefoot">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table head component.<br><br> Properties to <a href="#ctablehead">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctable" tabindex="-1">CTable <a class="anchor-link" href="#ctable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>border-color</strong></td><td>Sets the border color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>bordered</strong></td><td>Add borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>borderless</strong></td><td>Remove borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>caption</strong></td><td>Put the <code>&lt;caption&gt;</code> on the top of the table.</td><td>string</td><td><code>&#39;top&#39; | string</code></td><td>-</td></tr><tr><td><strong>caption-top</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Set the text of the table caption and the caption on the top of the table.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- _props (Object) - adds classes to all cels in column, ex. _props: { scope: &#39;col&#39;, className: &#39;custom-class&#39; },<br>- _style (Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>footer</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]<br>or<br>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</td><td>(FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>hover</strong></td><td>Enable a hover state on table rows within a <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>items</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by &#39;_props&#39; key and to single cell by &#39;_cellProps&#39;.<br><br>Example item:<br>{ name: &#39;John&#39; , age: 12, _props: { color: &#39;success&#39; }, _cellProps: { age: { className: &#39;fw-bold&#39;}}}</td><td>Item[]</td><td>-</td><td>-</td></tr><tr><td><strong>small</strong></td><td>Make table more compact by cutting all cell <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped</strong></td><td>Add zebra-striping to any table row within the <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped-columns</strong> <br><div class="badge bg-primary">4.4.0+</div></td><td>Add zebra-striping to any table column.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table footer component.<br><br>Properties to <a href="#ctablefoot">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table head component.<br><br> Properties to <a href="#ctablehead">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTableBody.api.html-x_85TkL5.js b/vue/docs/assets/CTableBody.api.html-BFPdQqw6.js
similarity index 68%
rename from vue/docs/assets/CTableBody.api.html-x_85TkL5.js
rename to vue/docs/assets/CTableBody.api.html-BFPdQqw6.js
index 46b248b217e..528bf4ae1db 100644
--- a/vue/docs/assets/CTableBody.api.html-x_85TkL5.js
+++ b/vue/docs/assets/CTableBody.api.html-BFPdQqw6.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablebody" tabindex="-1">CTableBody <a class="anchor-link" href="#ctablebody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablebody" tabindex="-1">CTableBody <a class="anchor-link" href="#ctablebody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTableCaption.api.html-Adpho5J1.js b/vue/docs/assets/CTableCaption.api.html-MTWPlJR7.js
similarity index 54%
rename from vue/docs/assets/CTableCaption.api.html-Adpho5J1.js
rename to vue/docs/assets/CTableCaption.api.html-MTWPlJR7.js
index af671aa0b0f..ce78e7d1306 100644
--- a/vue/docs/assets/CTableCaption.api.html-Adpho5J1.js
+++ b/vue/docs/assets/CTableCaption.api.html-MTWPlJR7.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablecaption" tabindex="-1">CTableCaption <a class="anchor-link" href="#ctablecaption" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableCaption <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableCaption <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableCaption&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablecaption" tabindex="-1">CTableCaption <a class="anchor-link" href="#ctablecaption" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableCaption <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableCaption <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableCaption&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTableDataCell.api.html-C_tHXIad.js b/vue/docs/assets/CTableDataCell.api.html-r0s-YiAY.js
similarity index 70%
rename from vue/docs/assets/CTableDataCell.api.html-C_tHXIad.js
rename to vue/docs/assets/CTableDataCell.api.html-r0s-YiAY.js
index 6ded778a237..7042e062e46 100644
--- a/vue/docs/assets/CTableDataCell.api.html-C_tHXIad.js
+++ b/vue/docs/assets/CTableDataCell.api.html-r0s-YiAY.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabledatacell" tabindex="-1">CTableDataCell <a class="anchor-link" href="#ctabledatacell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableDataCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableDataCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableDataCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabledatacell" tabindex="-1">CTableDataCell <a class="anchor-link" href="#ctabledatacell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableDataCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableDataCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableDataCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTableFoot.api.html-CIk-TJRN.js b/vue/docs/assets/CTableFoot.api.html-FVtyDTMQ.js
similarity index 68%
rename from vue/docs/assets/CTableFoot.api.html-CIk-TJRN.js
rename to vue/docs/assets/CTableFoot.api.html-FVtyDTMQ.js
index 248e1df8908..d4a2454dd37 100644
--- a/vue/docs/assets/CTableFoot.api.html-CIk-TJRN.js
+++ b/vue/docs/assets/CTableFoot.api.html-FVtyDTMQ.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablefoot" tabindex="-1">CTableFoot <a class="anchor-link" href="#ctablefoot" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableFoot <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableFoot <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableFoot&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablefoot" tabindex="-1">CTableFoot <a class="anchor-link" href="#ctablefoot" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableFoot <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableFoot <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableFoot&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTableHead.api.html-D0oDPZMH.js b/vue/docs/assets/CTableHead.api.html-CuaSabQj.js
similarity index 68%
rename from vue/docs/assets/CTableHead.api.html-D0oDPZMH.js
rename to vue/docs/assets/CTableHead.api.html-CuaSabQj.js
index b1d51539f31..f428c8e304f 100644
--- a/vue/docs/assets/CTableHead.api.html-D0oDPZMH.js
+++ b/vue/docs/assets/CTableHead.api.html-CuaSabQj.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablehead" tabindex="-1">CTableHead <a class="anchor-link" href="#ctablehead" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHead <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHead <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHead&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablehead" tabindex="-1">CTableHead <a class="anchor-link" href="#ctablehead" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHead <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHead <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHead&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTableHeaderCell.api.html-BmqIZ_n_.js b/vue/docs/assets/CTableHeaderCell.api.html-DahKEodk.js
similarity index 67%
rename from vue/docs/assets/CTableHeaderCell.api.html-BmqIZ_n_.js
rename to vue/docs/assets/CTableHeaderCell.api.html-DahKEodk.js
index f2c49799b5a..91bc82ed31b 100644
--- a/vue/docs/assets/CTableHeaderCell.api.html-BmqIZ_n_.js
+++ b/vue/docs/assets/CTableHeaderCell.api.html-DahKEodk.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctableheadercell" tabindex="-1">CTableHeaderCell <a class="anchor-link" href="#ctableheadercell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHeaderCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHeaderCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHeaderCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctableheadercell" tabindex="-1">CTableHeaderCell <a class="anchor-link" href="#ctableheadercell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHeaderCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHeaderCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHeaderCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTableRow.api.html-DgkbFIZb.js b/vue/docs/assets/CTableRow.api.html-Bh9JvciN.js
similarity index 71%
rename from vue/docs/assets/CTableRow.api.html-DgkbFIZb.js
rename to vue/docs/assets/CTableRow.api.html-Bh9JvciN.js
index d0194216137..a24d694665c 100644
--- a/vue/docs/assets/CTableRow.api.html-DgkbFIZb.js
+++ b/vue/docs/assets/CTableRow.api.html-Bh9JvciN.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablerow" tabindex="-1">CTableRow <a class="anchor-link" href="#ctablerow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell..</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablerow" tabindex="-1">CTableRow <a class="anchor-link" href="#ctablerow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell..</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTabs.api.html-BUUB5NCE.js b/vue/docs/assets/CTabs.api.html-BFEYxLzk.js
similarity index 68%
rename from vue/docs/assets/CTabs.api.html-BUUB5NCE.js
rename to vue/docs/assets/CTabs.api.html-BFEYxLzk.js
index 935f118b668..b3375a20d2d 100644
--- a/vue/docs/assets/CTabs.api.html-BUUB5NCE.js
+++ b/vue/docs/assets/CTabs.api.html-BFEYxLzk.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabs" tabindex="-1">CTabs <a class="anchor-link" href="#ctabs" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabs <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabs&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>The callback is fired when the active tab changes.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabs" tabindex="-1">CTabs <a class="anchor-link" href="#ctabs" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabs <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabs&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>The callback is fired when the active tab changes.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTimePicker.api.html-MGclcBvI.js b/vue/docs/assets/CTimePicker.api.html-B1LPdULH.js
similarity index 64%
rename from vue/docs/assets/CTimePicker.api.html-MGclcBvI.js
rename to vue/docs/assets/CTimePicker.api.html-B1LPdULH.js
index 4d43f02b9a9..7c1d27e2b74 100644
--- a/vue/docs/assets/CTimePicker.api.html-MGclcBvI.js
+++ b/vue/docs/assets/CTimePicker.api.html-B1LPdULH.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctimepicker" tabindex="-1">CTimePicker <a class="anchor-link" href="#ctimepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTimePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTimePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/time-picker/CTimePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>ampm</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Set if the component should use the 12/24 hour format. If <code>true</code> forces the interface to a 12-hour format. If <code>false</code> forces the interface into a 24-hour format. If <code>auto</code> the current locale will determine the 12 or 24-hour interface by default locales.</td><td>boolean|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hours</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify a list of available hours using an array, or customize the filtering of hours through a function.</td><td>number[] | ((hour: number) =&gt; number[])</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>minutes</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select time&#39;</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>seconds</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>time</strong></td><td>Initial selected time.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the time picker variant to a roll or select.</td><td>string</td><td><code>&#39;roll&#39;</code>, <code>&#39;select&#39;</code></td><td>&#39;roll&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Callback fired when the time changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>update:time</strong></td><td>Callback fired when the time changed.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctimepicker" tabindex="-1">CTimePicker <a class="anchor-link" href="#ctimepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTimePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTimePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/time-picker/CTimePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>ampm</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Set if the component should use the 12/24 hour format. If <code>true</code> forces the interface to a 12-hour format. If <code>false</code> forces the interface into a 24-hour format. If <code>auto</code> the current locale will determine the 12 or 24-hour interface by default locales.</td><td>boolean|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hours</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify a list of available hours using an array, or customize the filtering of hours through a function.</td><td>number[] | ((hour: number) =&gt; number[])</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>minutes</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>Set the name attribute for the input element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select time&#39;</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>seconds</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>time</strong></td><td>Initial selected time.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the time picker variant to a roll or select.</td><td>string</td><td><code>&#39;roll&#39;</code>, <code>&#39;select&#39;</code></td><td>&#39;roll&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Callback fired when the time changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>update:time</strong></td><td>Callback fired when the time changed.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTimePickerRollCol.api.html-C4Fp0Pqz.js b/vue/docs/assets/CTimePickerRollCol.api.html-CKuM6oLe.js
similarity index 66%
rename from vue/docs/assets/CTimePickerRollCol.api.html-C4Fp0Pqz.js
rename to vue/docs/assets/CTimePickerRollCol.api.html-CKuM6oLe.js
index c5542e0ec3a..d70b5e24b27 100644
--- a/vue/docs/assets/CTimePickerRollCol.api.html-C4Fp0Pqz.js
+++ b/vue/docs/assets/CTimePickerRollCol.api.html-CKuM6oLe.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctimepickerrollcol" tabindex="-1">CTimePickerRollCol <a class="anchor-link" href="#ctimepickerrollcol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTimePickerRollCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTimePickerRollCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/time-picker/CTimePickerRollCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td></td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctimepickerrollcol" tabindex="-1">CTimePickerRollCol <a class="anchor-link" href="#ctimepickerrollcol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTimePickerRollCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTimePickerRollCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/time-picker/CTimePickerRollCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td></td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CToast.api.html-C4bWuNTL.js b/vue/docs/assets/CToast.api.html-CrpEOCPn.js
similarity index 78%
rename from vue/docs/assets/CToast.api.html-C4bWuNTL.js
rename to vue/docs/assets/CToast.api.html-CrpEOCPn.js
index 80de803f77a..d282623bc9c 100644
--- a/vue/docs/assets/CToast.api.html-C4bWuNTL.js
+++ b/vue/docs/assets/CToast.api.html-CrpEOCPn.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoast" tabindex="-1">CToast <a class="anchor-link" href="#ctoast" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToast <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToast&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>autohide</strong></td><td>Auto hide the toast.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>delay</strong></td><td>Delay hiding the toast (ms).</td><td>number</td><td>-</td><td>5000</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to component and allow it to self dismiss.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>index</strong></td><td>index of the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title node for your component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoast" tabindex="-1">CToast <a class="anchor-link" href="#ctoast" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToast <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToast&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>autohide</strong></td><td>Auto hide the toast.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>delay</strong></td><td>Delay hiding the toast (ms).</td><td>number</td><td>-</td><td>5000</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to component and allow it to self dismiss.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>index</strong></td><td>index of the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title node for your component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CToastBody.api.html-h12k_UFm.js b/vue/docs/assets/CToastBody.api.html-4viEj-di.js
similarity index 56%
rename from vue/docs/assets/CToastBody.api.html-h12k_UFm.js
rename to vue/docs/assets/CToastBody.api.html-4viEj-di.js
index 64f6c3962d8..0ff062a4872 100644
--- a/vue/docs/assets/CToastBody.api.html-h12k_UFm.js
+++ b/vue/docs/assets/CToastBody.api.html-4viEj-di.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastbody" tabindex="-1">CToastBody <a class="anchor-link" href="#ctoastbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastbody" tabindex="-1">CToastBody <a class="anchor-link" href="#ctoastbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
 const _hoisted_3 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CToastClose.api.html-TcUeczaV.js b/vue/docs/assets/CToastClose.api.html-D5MPMBvN.js
similarity index 67%
rename from vue/docs/assets/CToastClose.api.html-TcUeczaV.js
rename to vue/docs/assets/CToastClose.api.html-D5MPMBvN.js
index 64d40c61314..6dc3382f3b7 100644
--- a/vue/docs/assets/CToastClose.api.html-TcUeczaV.js
+++ b/vue/docs/assets/CToastClose.api.html-D5MPMBvN.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastclose" tabindex="-1">CToastClose <a class="anchor-link" href="#ctoastclose" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastClose <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastClose <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastClose&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called before the dissmiss animation has started.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastclose" tabindex="-1">CToastClose <a class="anchor-link" href="#ctoastclose" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastClose <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastClose <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastClose&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called before the dissmiss animation has started.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CToastHeader.api.html-D4gIDkxo.js b/vue/docs/assets/CToastHeader.api.html-Bp3krdZ3.js
similarity index 67%
rename from vue/docs/assets/CToastHeader.api.html-D4gIDkxo.js
rename to vue/docs/assets/CToastHeader.api.html-Bp3krdZ3.js
index 81bf80fd6ba..21dce8299e6 100644
--- a/vue/docs/assets/CToastHeader.api.html-D4gIDkxo.js
+++ b/vue/docs/assets/CToastHeader.api.html-Bp3krdZ3.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastheader" tabindex="-1">CToastHeader <a class="anchor-link" href="#ctoastheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Automatically add a close button to the header.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called after clicking the close button.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastheader" tabindex="-1">CToastHeader <a class="anchor-link" href="#ctoastheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Automatically add a close button to the header.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called after clicking the close button.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CToaster.api.html-u0fhJi6C.js b/vue/docs/assets/CToaster.api.html-CZ4AWR-a.js
similarity index 68%
rename from vue/docs/assets/CToaster.api.html-u0fhJi6C.js
rename to vue/docs/assets/CToaster.api.html-CZ4AWR-a.js
index 846b367fe4d..2bb6f33e2ee 100644
--- a/vue/docs/assets/CToaster.api.html-u0fhJi6C.js
+++ b/vue/docs/assets/CToaster.api.html-CZ4AWR-a.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoaster" tabindex="-1">CToaster <a class="anchor-link" href="#ctoaster" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToaster <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToaster <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToaster&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>placement</strong></td><td>Describes the placement of component.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;middle-start&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;middle-end&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-end&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoaster" tabindex="-1">CToaster <a class="anchor-link" href="#ctoaster" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToaster <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToaster <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToaster&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>placement</strong></td><td>Describes the placement of component.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;middle-start&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;middle-end&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-end&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CTooltip.api.html-J4_VEmfV.js b/vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js
similarity index 83%
rename from vue/docs/assets/CTooltip.api.html-J4_VEmfV.js
rename to vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js
index 062b9227696..3a13c533e0c 100644
--- a/vue/docs/assets/CTooltip.api.html-J4_VEmfV.js
+++ b/vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTooltip <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTooltip <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tooltip/CTooltip&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the tooltip.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the tooltip relative to its target.</td><td>array</td><td>-</td><td>[0, 6]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>() =&gt; [&#39;hover&#39;, &#39;focus&#39;]</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of tooltip component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTooltip <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTooltip <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tooltip/CTooltip&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the tooltip.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the tooltip relative to its target.</td><td>array</td><td>-</td><td>[0, 6]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>() =&gt; [&#39;hover&#39;, &#39;focus&#39;]</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of tooltip component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CVirtualScroller.api.html-CU3ZFwZn.js b/vue/docs/assets/CVirtualScroller.api.html-OI5523Hm.js
similarity index 63%
rename from vue/docs/assets/CVirtualScroller.api.html-CU3ZFwZn.js
rename to vue/docs/assets/CVirtualScroller.api.html-OI5523Hm.js
index ef3156e959e..bca2b750894 100644
--- a/vue/docs/assets/CVirtualScroller.api.html-CU3ZFwZn.js
+++ b/vue/docs/assets/CVirtualScroller.api.html-OI5523Hm.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cvirtualscroller" tabindex="-1">CVirtualScroller <a class="anchor-link" href="#cvirtualscroller" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CVirtualScroller <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CVirtualScroller <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/virtual-scroller/CVirtualScroller&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>visible-items</strong></td><td>Amount of visible items</td><td>number</td><td>-</td><td>10</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cvirtualscroller" tabindex="-1">CVirtualScroller <a class="anchor-link" href="#cvirtualscroller" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CVirtualScroller <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CVirtualScroller <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/virtual-scroller/CVirtualScroller&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>visible-items</strong></td><td>Amount of visible items</td><td>number</td><td>-</td><td>10</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CWidgetStatsA.api.html-7zkarq-M.js b/vue/docs/assets/CWidgetStatsA.api.html-DD_G_0XR.js
similarity index 71%
rename from vue/docs/assets/CWidgetStatsA.api.html-7zkarq-M.js
rename to vue/docs/assets/CWidgetStatsA.api.html-DD_G_0XR.js
index c73415296e5..5a511f45136 100644
--- a/vue/docs/assets/CWidgetStatsA.api.html-7zkarq-M.js
+++ b/vue/docs/assets/CWidgetStatsA.api.html-DD_G_0XR.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsa" tabindex="-1">CWidgetStatsA <a class="anchor-link" href="#cwidgetstatsa" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsA <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsA <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsA&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>action</td><td>Location for action component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsa" tabindex="-1">CWidgetStatsA <a class="anchor-link" href="#cwidgetstatsa" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsA <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsA <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsA&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>action</td><td>Location for action component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CWidgetStatsB.api.html-CshS5FQG.js b/vue/docs/assets/CWidgetStatsB.api.html-BDmKGNGc.js
similarity index 74%
rename from vue/docs/assets/CWidgetStatsB.api.html-CshS5FQG.js
rename to vue/docs/assets/CWidgetStatsB.api.html-BDmKGNGc.js
index 65fee2010a6..714acd782fa 100644
--- a/vue/docs/assets/CWidgetStatsB.api.html-CshS5FQG.js
+++ b/vue/docs/assets/CWidgetStatsB.api.html-BDmKGNGc.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsb" tabindex="-1">CWidgetStatsB <a class="anchor-link" href="#cwidgetstatsb" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsB <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsB <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsB&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsb" tabindex="-1">CWidgetStatsB <a class="anchor-link" href="#cwidgetstatsb" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsB <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsB <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsB&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table>', 4);
 const _hoisted_5 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CWidgetStatsC.api.html-CpDLFFWY.js b/vue/docs/assets/CWidgetStatsC.api.html-Ck65oxiQ.js
similarity index 75%
rename from vue/docs/assets/CWidgetStatsC.api.html-CpDLFFWY.js
rename to vue/docs/assets/CWidgetStatsC.api.html-Ck65oxiQ.js
index 3fa21aa926f..3d7516b55e7 100644
--- a/vue/docs/assets/CWidgetStatsC.api.html-CpDLFFWY.js
+++ b/vue/docs/assets/CWidgetStatsC.api.html-Ck65oxiQ.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsc" tabindex="-1">CWidgetStatsC <a class="anchor-link" href="#cwidgetstatsc" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsC <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsC <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsC&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsc" tabindex="-1">CWidgetStatsC <a class="anchor-link" href="#cwidgetstatsc" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsC <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsC <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsC&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CWidgetStatsD.api.html-CJt_7ymp.js b/vue/docs/assets/CWidgetStatsD.api.html-C6jHMRVC.js
similarity index 72%
rename from vue/docs/assets/CWidgetStatsD.api.html-CJt_7ymp.js
rename to vue/docs/assets/CWidgetStatsD.api.html-C6jHMRVC.js
index e2466414dd8..91a8843fa22 100644
--- a/vue/docs/assets/CWidgetStatsD.api.html-CJt_7ymp.js
+++ b/vue/docs/assets/CWidgetStatsD.api.html-C6jHMRVC.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsd" tabindex="-1">CWidgetStatsD <a class="anchor-link" href="#cwidgetstatsd" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsD <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsD <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsD&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>values</strong></td><td>Values and titles for your component.</td><td>Value[]</td><td>-</td><td>() =&gt; []</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>icon</td><td>Location for icon component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsd" tabindex="-1">CWidgetStatsD <a class="anchor-link" href="#cwidgetstatsd" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsD <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsD <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsD&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>values</strong></td><td>Values and titles for your component.</td><td>Value[]</td><td>-</td><td>() =&gt; []</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>icon</td><td>Location for icon component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CWidgetStatsE.api.html-Dv_4qEcz.js b/vue/docs/assets/CWidgetStatsE.api.html-WqFr1dq3.js
similarity index 70%
rename from vue/docs/assets/CWidgetStatsE.api.html-Dv_4qEcz.js
rename to vue/docs/assets/CWidgetStatsE.api.html-WqFr1dq3.js
index 179634ba4da..5e0628e6de5 100644
--- a/vue/docs/assets/CWidgetStatsE.api.html-Dv_4qEcz.js
+++ b/vue/docs/assets/CWidgetStatsE.api.html-WqFr1dq3.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatse" tabindex="-1">CWidgetStatsE <a class="anchor-link" href="#cwidgetstatse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsE <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsE <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsE&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatse" tabindex="-1">CWidgetStatsE <a class="anchor-link" href="#cwidgetstatse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsE <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsE <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsE&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/CWidgetStatsF.api.html-C0fVjDJM.js b/vue/docs/assets/CWidgetStatsF.api.html-DQOglbDZ.js
similarity index 76%
rename from vue/docs/assets/CWidgetStatsF.api.html-C0fVjDJM.js
rename to vue/docs/assets/CWidgetStatsF.api.html-DQOglbDZ.js
index 1b200f7389f..0b4026165d2 100644
--- a/vue/docs/assets/CWidgetStatsF.api.html-C0fVjDJM.js
+++ b/vue/docs/assets/CWidgetStatsF.api.html-DQOglbDZ.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsf" tabindex="-1">CWidgetStatsF <a class="anchor-link" href="#cwidgetstatsf" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsF <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsF <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsF&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>padding</strong></td><td>Set padding of your component.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table>', 6);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsf" tabindex="-1">CWidgetStatsF <a class="anchor-link" href="#cwidgetstatsf" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsF <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsF <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsF&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>padding</strong></td><td>Set padding of your component.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table>', 6);
 const _hoisted_7 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/Callout-BATyFhCT.js b/vue/docs/assets/Callout-BATyFhCT.js
deleted file mode 100644
index 198ac9200bd..00000000000
--- a/vue/docs/assets/Callout-BATyFhCT.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { a2 as defineComponent, o as openBlock, c as createElementBlock, t as toDisplayString, i as createCommentVNode, ad as renderSlot, n as normalizeClass, _ as _export_sfc } from "./app-Dv803XR0.js";
-const _hoisted_1 = { key: 0 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Callout",
-  props: {
-    color: String,
-    title: String
-  },
-  setup(__props) {
-    const props = __props;
-    const className = [
-      "docs-callout",
-      {
-        [`docs-callout-${props.color}`]: props.color
-      }
-    ];
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(className)
-      }, [
-        props.title ? (openBlock(), createElementBlock("h5", _hoisted_1, toDisplayString(props.title), 1)) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default")
-      ]);
-    };
-  }
-});
-const Callout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "Callout.vue"]]);
-export {
-  Callout as default
-};
diff --git a/vue/docs/assets/Callout-BG7mA_TE.js b/vue/docs/assets/Callout-BG7mA_TE.js
new file mode 100644
index 00000000000..06174a8a5ec
--- /dev/null
+++ b/vue/docs/assets/Callout-BG7mA_TE.js
@@ -0,0 +1,34 @@
+import { a1 as defineComponent, _ as _export_sfc, o as openBlock, c as createElementBlock, t as toDisplayString, i as createCommentVNode, ac as renderSlot, n as normalizeClass } from "./app-BoHWg5jI.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Callout",
+  props: {
+    color: String,
+    title: String
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const className = [
+      "docs-callout",
+      {
+        [`docs-callout-${props.color}`]: props.color
+      }
+    ];
+    const __returned__ = { props, className };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass($setup.className)
+  }, [
+    $setup.props.title ? (openBlock(), createElementBlock("h5", _hoisted_1, toDisplayString($setup.props.title), 1)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const Callout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "Callout.vue"]]);
+export {
+  Callout as default
+};
diff --git a/vue/docs/assets/ScssDocs-Cuojc5PB.js b/vue/docs/assets/ScssDocs-BzcEAHFR.js
similarity index 98%
rename from vue/docs/assets/ScssDocs-Cuojc5PB.js
rename to vue/docs/assets/ScssDocs-BzcEAHFR.js
index 3c92c0938b6..22b028baa0a 100644
--- a/vue/docs/assets/ScssDocs-Cuojc5PB.js
+++ b/vue/docs/assets/ScssDocs-BzcEAHFR.js
@@ -1,4 +1,4 @@
-import { a2 as defineComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, u as unref, _ as _export_sfc } from "./app-Dv803XR0.js";
+import { a1 as defineComponent, _ as _export_sfc, o as openBlock, c as createElementBlock, e as createBaseVNode } from "./app-BoHWg5jI.js";
 const __vite_glob_0_0 = '//\n// Base styles\n//\n\n.accordion {\n  // scss-docs-start accordion-css-vars\n  --#{$prefix}accordion-color: #{$accordion-color};\n  --#{$prefix}accordion-bg: #{$accordion-bg};\n  --#{$prefix}accordion-transition: #{$accordion-transition};\n  --#{$prefix}accordion-border-color: #{$accordion-border-color};\n  --#{$prefix}accordion-border-width: #{$accordion-border-width};\n  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};\n  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};\n  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};\n  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};\n  --#{$prefix}accordion-btn-color: #{$accordion-button-color};\n  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};\n  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};\n  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};\n  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};\n  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};\n  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};\n  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};\n  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};\n  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};\n  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};\n  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};\n  // scss-docs-end accordion-css-vars\n}\n\n.accordion-button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);\n  @include font-size($font-size-base);\n  color: var(--#{$prefix}accordion-btn-color);\n  @include ltr-rtl("text-align", left); // Reset button style\n  background-color: var(--#{$prefix}accordion-btn-bg);\n  border: 0;\n  @include border-radius(0);\n  overflow-anchor: none;\n  @include transition(var(--#{$prefix}accordion-transition));\n\n  &:not(.collapsed) {\n    color: var(--#{$prefix}accordion-active-color);\n    background-color: var(--#{$prefix}accordion-active-bg);\n    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list\n\n    &::after {\n      background-image: var(--#{$prefix}accordion-btn-active-icon);\n      transform: var(--#{$prefix}accordion-btn-icon-transform);\n    }\n  }\n\n  // Accordion icon\n  &::after {\n    flex-shrink: 0;\n    width: var(--#{$prefix}accordion-btn-icon-width);\n    height: var(--#{$prefix}accordion-btn-icon-width);\n    @include ltr-rtl("margin-left", auto);\n    content: "";\n    background-image: var(--#{$prefix}accordion-btn-icon);\n    background-repeat: no-repeat;\n    background-size: var(--#{$prefix}accordion-btn-icon-width);\n    @include transition(var(--#{$prefix}accordion-btn-icon-transition));\n  }\n\n  &:hover {\n    z-index: 2;\n  }\n\n  &:focus {\n    z-index: 3;\n    outline: 0;\n    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);\n  }\n}\n\n.accordion-header {\n  margin-bottom: 0;\n}\n\n.accordion-item {\n  color: var(--#{$prefix}accordion-color);\n  background-color: var(--#{$prefix}accordion-bg);\n  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);\n\n  &:first-of-type {\n    @include border-top-radius(var(--#{$prefix}accordion-border-radius));\n\n    > .accordion-header .accordion-button {\n      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));\n    }\n  }\n\n  &:not(:first-of-type) {\n    border-top: 0;\n  }\n\n  // Only set a border-radius on the last item if the accordion is collapsed\n  &:last-of-type {\n    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));\n\n    > .accordion-header .accordion-button {\n      &.collapsed {\n        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));\n      }\n    }\n\n    > .accordion-collapse {\n      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));\n    }\n  }\n}\n\n.accordion-body {\n  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);\n}\n\n\n// Flush accordion items\n//\n// Remove borders and border-radius to keep accordion items edge-to-edge.\n\n.accordion-flush {\n  > .accordion-item {\n    border-right: 0;\n    border-left: 0;\n    @include border-radius(0);\n\n    &:first-child { border-top: 0; }\n    &:last-child { border-bottom: 0; }\n\n    // stylelint-disable selector-max-class\n    > .accordion-header .accordion-button {\n      &,\n      &.collapsed {\n        @include border-radius(0);\n      }\n    }\n    // stylelint-enable selector-max-class\n\n    > .accordion-collapse {\n      @include border-radius(0);\n    }\n  }\n}\n\n@if $enable-dark-mode {\n  @include color-mode(dark) {\n    .accordion-button::after {\n      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};\n      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};\n    }\n  }\n}\n';
 const __vite_glob_0_1 = `//
 // Base styles
@@ -69,12 +69,12 @@ const __vite_glob_0_1 = `//
 }
 // scss-docs-end alert-modifiers
 `;
-const __vite_glob_0_2 = '.avatar {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  @include border-radius(50em);\n  @include transition($avatar-transition);\n  @include avatar($avatar-width);\n}\n\n.avatar-img {\n  width: 100%;\n  height: auto;\n  @include border-radius(50em);\n}\n\n.avatar-status {\n  position: absolute;\n  @include ltr-rtl("right", 0);\n  bottom: 0;\n  display: block;\n  border: 1px solid $white;\n  @include border-radius(50em);\n}\n\n@each $width, $value in $avatar-widths {\n  .avatar-#{$width} {\n    @include avatar($value);\n  }\n}\n\n.avatars-stack {\n  display: flex;\n\n  .avatar {\n    @include ltr-rtl("margin-right", - ($avatar-width * .4));\n\n    &:hover {\n      @include ltr-rtl("margin-right", 0);\n    }\n  }\n\n  @each $width, $value in $avatar-widths {\n    .avatar-#{$width} {\n      @include ltr-rtl("margin-right", - ($value * .4));\n    }\n  }\n}\n';
+const __vite_glob_0_2 = '.avatar {\n  // scss-docs-start avatar-css-vars\n  --#{$prefix}avatar-width: #{$avatar-width};\n  --#{$prefix}avatar-height: #{$avatar-height};\n  --#{$prefix}avatar-font-size: #{$avatar-font-size};\n  --#{$prefix}avatar-border-radius: #{$avatar-border-radius};\n  --#{$prefix}avatar-status-width: #{$avatar-status-width};\n  --#{$prefix}avatar-status-height: #{$avatar-status-height};\n  --#{$prefix}avatar-status-border-radius: #{$avatar-status-border-radius};\n  // scss-docs-end avatar-css-vars\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--#{$prefix}avatar-width);\n  height: var(--#{$prefix}avatar-height);\n  font-size: var(--#{$prefix}avatar-font-size);\n  vertical-align: middle;\n  @include border-radius(var(--#{$prefix}avatar-border-radius));\n  @include transition($avatar-transition);\n}\n\n.avatar-img {\n  width: 100%;\n  height: auto;\n  @include border-radius(var(--#{$prefix}avatar-border-radius));\n}\n\n.avatar-status {\n  position: absolute;\n  @include ltr-rtl("right", 0);\n  bottom: 0;\n  display: block;\n  width: var(--#{$prefix}avatar-status-width);\n  height: var(--#{$prefix}avatar-status-height);\n  border: 1px solid $white;\n  @include border-radius(var(--#{$prefix}avatar-status-border-radius));\n}\n\n@each $size, $map in $avatar-sizes {\n  .avatar-#{$size} {\n    --#{$prefix}avatar-width: #{map-get($map, "width")};\n    --#{$prefix}avatar-height: #{map-get($map, "height")};\n    --#{$prefix}avatar-font-size: #{map-get($map, "font-size")};\n    --#{$prefix}avatar-status-width: #{map-get($map, "status-width")};\n    --#{$prefix}avatar-status-height: #{map-get($map, "status-height")};\n  }\n}\n\n.avatars-stack {\n  display: flex;\n\n  .avatar {\n    @include ltr-rtl("margin-right", calc(-.4 * var(--#{$prefix}avatar-width)));\n\n    &:hover {\n      @include ltr-rtl("margin-right", 0);\n    }\n  }\n}\n';
 const __vite_glob_0_3 = "// Base class\n//\n// Requires one of the contextual, color modifier classes for `color` and\n// `background-color`.\n\n.badge {\n  // scss-docs-start badge-css-vars\n  --#{$prefix}badge-padding-x: #{$badge-padding-x};\n  --#{$prefix}badge-padding-y: #{$badge-padding-y};\n  @include rfs($badge-font-size, --#{$prefix}badge-font-size);\n  --#{$prefix}badge-font-weight: #{$badge-font-weight};\n  --#{$prefix}badge-color: #{$badge-color};\n  --#{$prefix}badge-border-radius: #{$badge-border-radius};\n  // scss-docs-end badge-css-vars\n\n  display: inline-block;\n  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);\n  @include font-size(var(--#{$prefix}badge-font-size));\n  font-weight: var(--#{$prefix}badge-font-weight);\n  line-height: 1;\n  color: var(--#{$prefix}badge-color);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list\n  @include gradient-bg();\n\n  // Empty badges collapse automatically\n  &:empty {\n    display: none;\n  }\n}\n\n// Quick fix for badges in buttons\n.btn .badge {\n  position: relative;\n  top: -1px;\n}\n\n//\n// Badge Sizes\n//\n\n.badge-sm {\n  --#{$prefix}badge-padding-x: #{$badge-padding-x-sm};\n  --#{$prefix}badge-padding-y: #{$badge-padding-y-sm};\n  @include font-size($badge-font-size-sm);\n}\n";
 const __vite_glob_0_4 = '.breadcrumb {\n  // scss-docs-start breadcrumb-css-vars\n  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};\n  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};\n  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};\n  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);\n  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};\n  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};\n  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};\n  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};\n  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};\n  // scss-docs-end breadcrumb-css-vars\n\n  display: flex;\n  flex-wrap: wrap;\n  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);\n  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);\n  @include font-size(var(--#{$prefix}breadcrumb-font-size));\n  list-style: none;\n  background-color: var(--#{$prefix}breadcrumb-bg);\n  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));\n}\n\n.breadcrumb-item {\n  // The separator between breadcrumbs (by default, a forward-slash: "/")\n  + .breadcrumb-item {\n    @include ltr-rtl("padding-left",  var(--#{$prefix}breadcrumb-item-padding-x));\n\n    &::before {\n      @include ltr-rtl("float", left); // Suppress inline spacings and underlining of the separator\n      @include ltr-rtl("padding-right", var(--#{$prefix}breadcrumb-item-padding-x));\n      color: var(--#{$prefix}breadcrumb-divider-color);\n      @include ltr-rtl(\n        "content",\n        var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)),\n        null,\n        var(--#{$prefix}breadcrumb-divider-flipped, escape-svg($breadcrumb-divider-flipped))\n      );\n    }\n  }\n\n  &.active {\n    color: var(--#{$prefix}breadcrumb-item-active-color);\n  }\n}\n';
 const __vite_glob_0_5 = '// Make the div behave like a button\n.btn-group,\n.btn-group-vertical {\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle; // match .btn alignment given font-size hack above\n\n  > .btn {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  // Bring the hover, focused, and "active" buttons to the front to overlay\n  // the borders properly\n  > .btn-check:checked + .btn,\n  > .btn-check:focus + .btn,\n  > .btn:hover,\n  > .btn:focus,\n  > .btn:active,\n  > .btn.active {\n    z-index: 1;\n  }\n}\n\n// Optional: Group multiple button groups together for a toolbar\n.btn-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n\n  .input-group {\n    width: auto;\n  }\n}\n\n.btn-group {\n  @include border-radius($btn-border-radius);\n\n  // Prevent double borders when buttons are next to each other\n  > :not(.btn-check:first-child) + .btn,\n  > .btn-group:not(:first-child) {\n    @include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));\n  }\n\n  // Reset rounded corners\n  > .btn:not(:last-child):not(.dropdown-toggle),\n  > .btn.dropdown-toggle-split:first-child,\n  > .btn-group:not(:last-child) > .btn {\n    @include border-end-radius(0);\n  }\n\n  // The left radius should be 0 if the button is:\n  // - the "third or more" child\n  // - the second child and the previous element isn\'t `.btn-check` (making it the first child visually)\n  // - part of a btn-group which isn\'t the first child\n  > .btn:nth-child(n + 3),\n  > :not(.btn-check) + .btn,\n  > .btn-group:not(:first-child) > .btn {\n    @include border-start-radius(0);\n  }\n}\n\n// Sizing\n//\n// Remix the default button sizing classes into new ones for easier manipulation.\n\n.btn-group-sm > .btn { @extend .btn-sm; }\n.btn-group-lg > .btn { @extend .btn-lg; }\n\n\n//\n// Split button dropdowns\n//\n\n.dropdown-toggle-split {\n  padding-right: $btn-padding-x * .75;\n  padding-left: $btn-padding-x * .75;\n\n  &::after,\n  .dropup &::after,\n  .dropend &::after {\n    @include ltr-rtl("margin-left", 0);\n  }\n\n  .dropstart &::before {\n    @include ltr-rtl("margin-right", 0);\n  }\n}\n\n.btn-sm + .dropdown-toggle-split {\n  padding-right: $btn-padding-x-sm * .75;\n  padding-left: $btn-padding-x-sm * .75;\n}\n\n.btn-lg + .dropdown-toggle-split {\n  padding-right: $btn-padding-x-lg * .75;\n  padding-left: $btn-padding-x-lg * .75;\n}\n\n\n// The clickable button for toggling the menu\n// Set the same inset shadow as the :active state\n.btn-group.show .dropdown-toggle {\n  @include box-shadow($btn-active-box-shadow);\n\n  // Show no shadow for `.btn-link` since it has no other button styles.\n  &.btn-link {\n    @include box-shadow(none);\n  }\n}\n\n\n//\n// Vertical button groups\n//\n\n.btn-group-vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n\n  > .btn,\n  > .btn-group {\n    width: 100%;\n  }\n\n  > .btn:not(:first-child),\n  > .btn-group:not(:first-child) {\n    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list\n  }\n\n  // Reset rounded corners\n  > .btn:not(:last-child):not(.dropdown-toggle),\n  > .btn-group:not(:last-child) > .btn {\n    @include border-bottom-radius(0);\n  }\n\n  > .btn ~ .btn,\n  > .btn-group:not(:first-child) > .btn {\n    @include border-top-radius(0);\n  }\n}\n';
 const __vite_glob_0_6 = "//\n// Base styles\n//\n\n.btn {\n  // scss-docs-start btn-css-vars\n  --#{$prefix}btn-padding-x: #{$btn-padding-x};\n  --#{$prefix}btn-padding-y: #{$btn-padding-y};\n  --#{$prefix}btn-font-family: #{$btn-font-family};\n  @include rfs($btn-font-size, --#{$prefix}btn-font-size);\n  --#{$prefix}btn-font-weight: #{$btn-font-weight};\n  --#{$prefix}btn-line-height: #{$btn-line-height};\n  --#{$prefix}btn-color: #{$btn-color};\n  --#{$prefix}btn-bg: transparent;\n  --#{$prefix}btn-border-width: #{$btn-border-width};\n  --#{$prefix}btn-border-color: transparent;\n  --#{$prefix}btn-border-radius: #{$btn-border-radius};\n  --#{$prefix}btn-hover-border-color: transparent;\n  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};\n  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};\n  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);\n  // scss-docs-end btn-css-vars\n\n  display: inline-block;\n  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);\n  font-family: var(--#{$prefix}btn-font-family);\n  @include font-size(var(--#{$prefix}btn-font-size));\n  font-weight: var(--#{$prefix}btn-font-weight);\n  line-height: var(--#{$prefix}btn-line-height);\n  color: var(--#{$prefix}btn-color);\n  text-align: center;\n  text-decoration: if($link-decoration == none, null, none);\n  white-space: $btn-white-space;\n  vertical-align: middle;\n  cursor: if($enable-button-pointers, pointer, null);\n  user-select: none;\n  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);\n  @include border-radius(var(--#{$prefix}btn-border-radius));\n  @include gradient-bg(var(--#{$prefix}btn-bg));\n  @include box-shadow(var(--#{$prefix}btn-box-shadow));\n  @include transition($btn-transition);\n\n  &:hover {\n    color: var(--#{$prefix}btn-hover-color);\n    text-decoration: if($link-hover-decoration == underline, none, null);\n    background-color: var(--#{$prefix}btn-hover-bg);\n    border-color: var(--#{$prefix}btn-hover-border-color);\n  }\n\n  .btn-check + &:hover {\n    // override for the checkbox/radio buttons\n    color: var(--#{$prefix}btn-color);\n    background-color: var(--#{$prefix}btn-bg);\n    border-color: var(--#{$prefix}btn-border-color);\n  }\n\n  &:focus-visible {\n    color: var(--#{$prefix}btn-hover-color);\n    @include gradient-bg(var(--#{$prefix}btn-hover-bg));\n    border-color: var(--#{$prefix}btn-hover-border-color);\n    outline: 0;\n    // Avoid using mixin so we can pass custom focus shadow properly\n    @if $enable-shadows {\n      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);\n    } @else {\n      box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n    }\n  }\n\n  .btn-check:focus-visible + & {\n    border-color: var(--#{$prefix}btn-hover-border-color);\n    outline: 0;\n    // Avoid using mixin so we can pass custom focus shadow properly\n    @if $enable-shadows {\n      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);\n    } @else {\n      box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n    }\n  }\n\n  .btn-check:checked + &,\n  :not(.btn-check) + &:active,\n  &:first-child:active,\n  &.active,\n  &.show {\n    color: var(--#{$prefix}btn-active-color);\n    background-color: var(--#{$prefix}btn-active-bg);\n    // Remove CSS gradients if they're enabled\n    background-image: if($enable-gradients, none, null);\n    border-color: var(--#{$prefix}btn-active-border-color);\n    @include box-shadow(var(--#{$prefix}btn-active-shadow));\n\n    &:focus-visible {\n      // Avoid using mixin so we can pass custom focus shadow properly\n      @if $enable-shadows {\n        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);\n      } @else {\n        box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n      }\n    }\n  }\n\n  .btn-check:checked:focus-visible + & {\n    // Avoid using mixin so we can pass custom focus shadow properly\n    @if $enable-shadows {\n      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);\n    } @else {\n      box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n    }\n  }\n\n  &:disabled,\n  &.disabled,\n  fieldset:disabled & {\n    color: var(--#{$prefix}btn-disabled-color);\n    pointer-events: none;\n    background-color: var(--#{$prefix}btn-disabled-bg);\n    background-image: if($enable-gradients, none, null);\n    border-color: var(--#{$prefix}btn-disabled-border-color);\n    opacity: var(--#{$prefix}btn-disabled-opacity);\n    @include box-shadow(none);\n  }\n}\n\n\n//\n// Alternate buttons\n//\n\n// scss-docs-start btn-variant-loops\n@each $state, $variant in $button-variants {\n  .btn-#{$state} {\n    @include button-variant($variant);\n  }\n}\n\n@each $state, $variant in $button-outline-ghost-variants {\n  .btn-outline-#{$state} {\n    @include button-outline-variant($variant);\n  }\n}\n\n@each $state, $variant in $button-outline-ghost-variants {\n  .btn-ghost-#{$state} {\n    @include button-ghost-variant($variant);\n  }\n}\n// scss-docs-end btn-variant-loops\n\n.btn-transparent {\n  --#{$prefix}btn-active-border-color: transparent;\n  --#{$prefix}btn-disabled-border-color: transparent;\n  --#{$prefix}btn-hover-border-color: transparent;\n  --#{$prefix}btn-box-shadow: none;\n  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};\n\n  @if $enable-gradients {\n    background-image: none;\n  }\n}\n\n//\n// Link buttons\n//\n\n// Make a button look and behave like a link\n.btn-link {\n  --#{$prefix}btn-font-weight: #{$font-weight-normal};\n  --#{$prefix}btn-color: #{$btn-link-color};\n  --#{$prefix}btn-bg: transparent;\n  --#{$prefix}btn-border-color: transparent;\n  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};\n  --#{$prefix}btn-hover-border-color: transparent;\n  --#{$prefix}btn-active-border-color: transparent;\n  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};\n  --#{$prefix}btn-disabled-border-color: transparent;\n  --#{$prefix}btn-box-shadow: none;\n  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};\n\n  text-decoration: $link-decoration;\n  @if $enable-gradients {\n    background-image: none;\n  }\n\n  &:hover,\n  &:focus-visible {\n    text-decoration: $link-hover-decoration;\n  }\n\n  &:focus-visible {\n    color: var(--#{$prefix}btn-color);\n  }\n\n  // No need for an active state here\n}\n\n\n//\n// Button Sizes\n//\n\n.btn-lg {\n  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);\n}\n\n.btn-sm {\n  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);\n}\n\n@if $enable-dark-mode {\n  @include color-mode(dark) {\n    @each $state, $variant in $button-variants-dark {\n      .btn-#{$state} {\n        @include button-variant($variant);\n      }\n    }\n\n    @each $state, $variant in $button-outline-ghost-variants-dark {\n      .btn-outline-#{$state} {\n        @include button-outline-variant($variant);\n      }\n    }\n\n    @each $state, $variant in $button-outline-ghost-variants-dark {\n      .btn-ghost-#{$state} {\n        @include button-ghost-variant($variant);\n      }\n    }\n  }\n}\n";
-const __vite_glob_0_7 = '// stylelint-disable selector-max-class\n\n.calendar {\n  // scss-docs-start calendar-css-vars\n  --#{$prefix}calendar-table-margin: #{$calendar-table-margin};\n  --#{$prefix}calendar-table-cell-size: #{$calendar-table-cell-size};\n  --#{$prefix}calendar-nav-padding: #{$calendar-nav-padding};\n  --#{$prefix}calendar-nav-border-color: #{$calendar-nav-border-color};\n  --#{$prefix}calendar-nav-border: #{$calendar-nav-border-width} solid var(--#{$prefix}calendar-nav-border-color);\n  --#{$prefix}calendar-nav-date-color: #{$calendar-nav-date-color};\n  --#{$prefix}calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};\n  --#{$prefix}calendar-nav-icon-width: #{$calendar-nav-icon-width};\n  --#{$prefix}calendar-nav-icon-height: #{$calendar-nav-icon-height};\n  --#{$prefix}calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};\n  --#{$prefix}calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};\n  --#{$prefix}calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};\n  --#{$prefix}calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};\n  --#{$prefix}calendar-nav-icon-color: #{$calendar-nav-icon-color};\n  --#{$prefix}calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};\n  --#{$prefix}calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};\n  --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};\n  --#{$prefix}calendar-cell-hover-color: #{$calendar-cell-hover-color};\n  --#{$prefix}calendar-cell-hover-bg: #{$calendar-cell-hover-bg};\n  --#{$prefix}calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};\n  --#{$prefix}calendar-cell-disabled-color: #{$calendar-cell-disabled-color};\n  --#{$prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color};\n  --#{$prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg};\n  --#{$prefix}calendar-cell-range-bg: #{$calendar-cell-range-bg};\n  --#{$prefix}calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};\n  --#{$prefix}calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};\n  --#{$prefix}calendar-cell-today-color: #{$calendar-cell-today-color};\n  --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};\n  // scss-docs-end calendar-css-vars\n\n  font-weight: initial;\n\n  table {\n    width: calc(var(--#{$prefix}calendar-table-cell-size) * 7); // stylelint-disable-line function-disallowed-list\n    margin: var(--#{$prefix}calendar-table-margin);\n\n    th,\n    td {\n      width: var(--#{$prefix}calendar-table-cell-size);\n    }\n  }\n\n  &.months ~ .time-picker,\n  &.years ~ .time-picker {\n    display: none;\n  }\n}\n\n.show-week-numbers table {\n  width: calc(var(--#{$prefix}calendar-table-cell-size) * 8); // stylelint-disable-line function-disallowed-list\n}\n\n.calendars {\n  display: flex;\n}\n\n.calendar-nav {\n  display: flex;\n  align-items: baseline;\n  padding: var(--#{$prefix}calendar-nav-padding);\n  border-bottom: var(--#{$prefix}calendar-nav-border);\n}\n\n.calendar-nav-date {\n  flex: 1;\n  text-align: center;\n\n  .btn {\n    font-weight: 600;\n    color: var(--#{$prefix}calendar-nav-date-color);\n\n    &:hover {\n      color: var(--#{$prefix}calendar-nav-date-hover-color);\n    }\n  }\n}\n\n.calendar-nav-icon {\n  display: block;\n  width: var(--#{$prefix}calendar-nav-icon-width);\n  height: var(--#{$prefix}calendar-nav-icon-height);\n  background-color: var(--#{$prefix}calendar-nav-icon-color);\n  @include transition(background-image .15s ease-in-out);\n\n  &:hover {\n    background-color: var(--#{$prefix}calendar-nav-icon-hover-color);\n  }\n}\n\n.calendar-nav-icon-double-next {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center);\n}\n\n.calendar-nav-icon-double-prev {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center);\n}\n\n.calendar-nav-icon-next {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-prev) no-repeat center);\n}\n\n.calendar-nav-icon-prev {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-next) no-repeat center);\n}\n\n.calendar-header-cell-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--#{$prefix}calendar-table-cell-size);\n  font-weight: 600;\n  color: var(--#{$prefix}calendar-cell-header-inner-color);\n}\n\n.calendar-cell-week-number {\n  font-weight: 600;\n  color: var(--#{$prefix}calendar-cell-week-number-color);\n}\n\n.calendar-cell-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--#{$prefix}calendar-table-cell-size);\n}\n\n.calendar-row,\n.calendar-cell {\n  text-align: center;\n\n  &.disabled .calendar-cell-inner,\n  &.next .calendar-cell-inner,\n  &.previous .calendar-cell-inner {\n    color: var(--#{$prefix}calendar-cell-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.range .calendar-cell-inner {\n    position: relative;\n\n    &::after {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      content: "";\n      background: var(--#{$prefix}calendar-cell-range-bg);\n    }\n  }\n\n  &.range-hover .calendar-cell-inner {\n    position: relative;\n\n    &::before {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      content: "";\n      border-top: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      border-bottom: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      @include border-radius(0);\n    }\n  }\n\n  &.selected:not(th, .next, .previous) .calendar-cell-inner {\n    color: var(--#{$prefix}calendar-cell-selected-color);\n    background-color: var(--#{$prefix}calendar-cell-selected-bg);\n  }\n\n  &.today .calendar-cell-inner {\n    color: var(--#{$prefix}calendar-cell-today-color);\n  }\n}\n\n.calendar-cell {\n  padding: 1px 0;\n\n  .calendars:not(.select-week) &:not(.disabled, .next, .previous):hover,\n  .calendars:not(.select-week) &.clickable:hover {\n    .calendar-cell-inner {\n      color: var(--#{$prefix}calendar-cell-hover-color);\n      cursor: pointer;\n      background-color: var(--#{$prefix}calendar-cell-hover-bg);\n      @include border-radius($border-radius);\n    }\n  }\n\n  .calendars:not(.select-week) &.range:not(.range ~ *) .calendar-cell-inner::after {\n    @include border-start-radius($border-radius);\n  }\n\n  .calendars:not(.select-week) &.range:not(:has(~ .range)) .calendar-cell-inner::after {\n    @include border-end-radius($border-radius);\n  }\n\n  &.range-hover:first-of-type,\n  &:not(.range-hover) + &.range-hover {\n    .calendar-cell-inner::before {\n      border-left: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      @include border-start-radius($border-radius);\n    }\n  }\n\n  &.range-hover:not(:has(~ .range-hover)) .calendar-cell-inner::before {\n    border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n    @include border-end-radius($border-radius);\n  }\n\n  @-moz-document url-prefix() {\n    .calendars:not(.select-week) &:nth-last-child(1 of .range),\n    .calendars:not(.select-week) &:nth-last-child(1 of .available) {\n      .calendar-cell-inner::after {\n        @include border-end-radius($border-radius);\n      }\n    }\n\n    &:nth-last-child(1 of .range-hover) .calendar-cell-inner::before {\n      border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      @include border-end-radius($border-radius);\n    }\n  }\n\n  &.selected:not(th) .calendar-cell-inner {\n    @include border-radius($border-radius);\n  }\n\n  .calendars:not(.select-week) &:focus-visible {\n    outline: 0;\n\n    .calendar-cell-inner {\n      box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);\n      @include border-radius($border-radius);\n    }\n  }\n}\n\n.calendar-row {\n  .calendars.select-week &:not(.disabled):hover,\n  .calendars.select-week &.clickable:hover {\n    .calendar-cell-inner {\n      color: var(--#{$prefix}calendar-cell-hover-color);\n      cursor: pointer;\n      background-color: var(--#{$prefix}calendar-cell-hover-bg);\n    }\n  }\n\n  .selected:not(th) .calendar-cell-inner {\n    @include border-radius($border-radius);\n  }\n\n  .calendar-cell:first-of-type .calendar-cell-inner {\n    @include border-start-radius($border-radius);\n    &::before,\n    &::after {\n      @include border-start-radius($border-radius);\n    }\n  }\n\n  .calendar-cell:last-of-type .calendar-cell-inner {\n    @include border-end-radius($border-radius);\n    &::before,\n    &::after {\n      @include border-end-radius($border-radius);\n    }\n  }\n\n  &.range-hover .calendar-cell:first-of-type .calendar-cell-inner::before {\n    border-left: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n  }\n\n  &.range-hover .calendar-cell:last-of-type .calendar-cell-inner::before {\n    border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);\n    @include border-radius($border-radius);\n  }\n}\n';
+const __vite_glob_0_7 = '// stylelint-disable selector-max-class\n\n.calendar {\n  // scss-docs-start calendar-css-vars\n  --#{$prefix}calendar-table-margin: #{$calendar-table-margin};\n  --#{$prefix}calendar-table-cell-size: #{$calendar-table-cell-size};\n  --#{$prefix}calendar-nav-padding: #{$calendar-nav-padding};\n  --#{$prefix}calendar-nav-border-color: #{$calendar-nav-border-color};\n  --#{$prefix}calendar-nav-border: #{$calendar-nav-border-width} solid var(--#{$prefix}calendar-nav-border-color);\n  --#{$prefix}calendar-nav-date-color: #{$calendar-nav-date-color};\n  --#{$prefix}calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};\n  --#{$prefix}calendar-nav-icon-width: #{$calendar-nav-icon-width};\n  --#{$prefix}calendar-nav-icon-height: #{$calendar-nav-icon-height};\n  --#{$prefix}calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};\n  --#{$prefix}calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};\n  --#{$prefix}calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};\n  --#{$prefix}calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};\n  --#{$prefix}calendar-nav-icon-color: #{$calendar-nav-icon-color};\n  --#{$prefix}calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};\n  --#{$prefix}calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};\n  --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};\n  --#{$prefix}calendar-cell-hover-color: #{$calendar-cell-hover-color};\n  --#{$prefix}calendar-cell-hover-bg: #{$calendar-cell-hover-bg};\n  --#{$prefix}calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};\n  --#{$prefix}calendar-cell-disabled-color: #{$calendar-cell-disabled-color};\n  --#{$prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color};\n  --#{$prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg};\n  --#{$prefix}calendar-cell-range-bg: #{$calendar-cell-range-bg};\n  --#{$prefix}calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};\n  --#{$prefix}calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};\n  --#{$prefix}calendar-cell-today-color: #{$calendar-cell-today-color};\n  --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};\n  // scss-docs-end calendar-css-vars\n\n  font-weight: initial;\n\n  table {\n    width: calc(var(--#{$prefix}calendar-table-cell-size) * 7); // stylelint-disable-line function-disallowed-list\n    margin: var(--#{$prefix}calendar-table-margin);\n\n    th,\n    td {\n      width: var(--#{$prefix}calendar-table-cell-size);\n    }\n  }\n\n  &.months ~ .time-picker,\n  &.years ~ .time-picker {\n    display: none;\n  }\n}\n\n.show-week-numbers table {\n  width: calc(var(--#{$prefix}calendar-table-cell-size) * 8); // stylelint-disable-line function-disallowed-list\n}\n\n.calendars {\n  display: flex;\n}\n\n.calendar-nav {\n  display: flex;\n  align-items: baseline;\n  padding: var(--#{$prefix}calendar-nav-padding);\n  border-bottom: var(--#{$prefix}calendar-nav-border);\n}\n\n.calendar-nav-date {\n  flex: 1;\n  text-align: center;\n\n  .btn {\n    font-weight: 600;\n    color: var(--#{$prefix}calendar-nav-date-color);\n\n    &:hover {\n      color: var(--#{$prefix}calendar-nav-date-hover-color);\n    }\n  }\n}\n\n.calendar-nav-icon {\n  display: block;\n  width: var(--#{$prefix}calendar-nav-icon-width);\n  height: var(--#{$prefix}calendar-nav-icon-height);\n  background-color: var(--#{$prefix}calendar-nav-icon-color);\n  @include transition(background-image .15s ease-in-out);\n\n  &:hover {\n    background-color: var(--#{$prefix}calendar-nav-icon-hover-color);\n  }\n}\n\n.calendar-nav-icon-double-next {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center);\n}\n\n.calendar-nav-icon-double-prev {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center);\n}\n\n.calendar-nav-icon-next {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-prev) no-repeat center);\n}\n\n.calendar-nav-icon-prev {\n  @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-next) no-repeat center);\n}\n\n.calendar-header-cell-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--#{$prefix}calendar-table-cell-size);\n  font-weight: 600;\n  color: var(--#{$prefix}calendar-cell-header-inner-color);\n}\n\n.calendar-cell-week-number {\n  font-weight: 600;\n  color: var(--#{$prefix}calendar-cell-week-number-color);\n}\n\n.calendar-cell-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--#{$prefix}calendar-table-cell-size);\n}\n\n.calendar-row,\n.calendar-cell {\n  text-align: center;\n\n  &.disabled .calendar-cell-inner,\n  &.next .calendar-cell-inner,\n  &.previous .calendar-cell-inner {\n    color: var(--#{$prefix}calendar-cell-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.range .calendar-cell-inner {\n    position: relative;\n\n    &::after {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      content: "";\n      background: var(--#{$prefix}calendar-cell-range-bg);\n    }\n  }\n\n  &.range-hover .calendar-cell-inner {\n    position: relative;\n\n    &::before {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      content: "";\n      border-top: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      border-bottom: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      @include border-radius(0);\n    }\n  }\n\n  &.selected:not(th, .next, .previous) .calendar-cell-inner {\n    color: var(--#{$prefix}calendar-cell-selected-color);\n    background-color: var(--#{$prefix}calendar-cell-selected-bg);\n  }\n\n  &.today .calendar-cell-inner {\n    color: var(--#{$prefix}calendar-cell-today-color);\n  }\n}\n\n.calendar-cell {\n  padding: 1px 0;\n\n  .calendars:not(.select-week) &:not(.disabled, .next, .previous):hover,\n  .calendars:not(.select-week) &.clickable:hover {\n    .calendar-cell-inner {\n      color: var(--#{$prefix}calendar-cell-hover-color);\n      cursor: pointer;\n      background-color: var(--#{$prefix}calendar-cell-hover-bg);\n      @include border-radius($border-radius);\n    }\n  }\n\n  .calendars:not(.select-week) &.range:not(.range ~ *) .calendar-cell-inner::after {\n    @include border-start-radius($border-radius);\n  }\n\n  .calendars:not(.select-week) &.range:not(:has(~ .range)) .calendar-cell-inner::after {\n    @include border-end-radius($border-radius);\n  }\n\n  &.range-hover:first-of-type,\n  &:not(.range-hover) + &.range-hover {\n    .calendar-cell-inner::before {\n      border-left: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      @include border-start-radius($border-radius);\n    }\n  }\n\n  &.range-hover:not(:has(~ .range-hover)) .calendar-cell-inner::before {\n    border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n    @include border-end-radius($border-radius);\n  }\n\n  // stylelint-disable-next-line at-rule-no-vendor-prefix\n  @-moz-document url-prefix() {\n    .calendars:not(.select-week) &:nth-last-child(1 of .range),\n    .calendars:not(.select-week) &:nth-last-child(1 of .available) {\n      .calendar-cell-inner::after {\n        @include border-end-radius($border-radius);\n      }\n    }\n\n    &:nth-last-child(1 of .range-hover) .calendar-cell-inner::before {\n      border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n      @include border-end-radius($border-radius);\n    }\n  }\n\n  &.selected:not(th) .calendar-cell-inner {\n    @include border-radius($border-radius);\n  }\n\n  .calendars:not(.select-week) &:focus-visible {\n    outline: 0;\n\n    .calendar-cell-inner {\n      box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);\n      @include border-radius($border-radius);\n    }\n  }\n}\n\n.calendar-row {\n  .calendars.select-week &:not(.disabled):hover,\n  .calendars.select-week &.clickable:hover {\n    .calendar-cell-inner {\n      color: var(--#{$prefix}calendar-cell-hover-color);\n      cursor: pointer;\n      background-color: var(--#{$prefix}calendar-cell-hover-bg);\n    }\n  }\n\n  .selected:not(th) .calendar-cell-inner {\n    @include border-radius($border-radius);\n  }\n\n  .calendar-cell:first-of-type .calendar-cell-inner {\n    @include border-start-radius($border-radius);\n    &::before,\n    &::after {\n      @include border-start-radius($border-radius);\n    }\n  }\n\n  .calendar-cell:last-of-type .calendar-cell-inner {\n    @include border-end-radius($border-radius);\n    &::before,\n    &::after {\n      @include border-end-radius($border-radius);\n    }\n  }\n\n  &.range-hover .calendar-cell:first-of-type .calendar-cell-inner::before {\n    border-left: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n  }\n\n  &.range-hover .calendar-cell:last-of-type .calendar-cell-inner::before {\n    border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);\n    @include border-radius($border-radius);\n  }\n}\n';
 const __vite_glob_0_8 = '.callout {\n  // scss-docs-start callout-css-vars\n  --#{$prefix}callout-padding-x: #{$callout-padding-x};\n  --#{$prefix}callout-padding-y: #{$callout-padding-y};\n  --#{$prefix}callout-margin-x: #{$callout-margin-x};\n  --#{$prefix}callout-margin-y: #{$callout-margin-y};\n  --#{$prefix}callout-border-width: #{$callout-border-width};\n  --#{$prefix}callout-border-color: #{$callout-border-color};\n  --#{$prefix}callout-border-left-width: #{$callout-border-left-width};\n  --#{$prefix}callout-border-radius: #{$callout-border-radius};\n  // scss-docs-end callout-css-vars\n\n  padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);\n  margin: var(--#{$prefix}callout-margin-y) var(--#{$prefix}callout-margin-x);\n  border: var(--#{$prefix}callout-border-width) solid var(--#{$prefix}callout-border-color);\n  @include ltr-rtl("border-left-width", var(--#{$prefix}callout-border-left-width));\n  @include ltr-rtl("border-left-color", var(--#{$prefix}callout-border-left-color));\n  @include border-radius(var(--#{$prefix}callout-border-radius));\n}\n\n// scss-docs-start callout-modifiers\n// Generate contextual modifier classes for colorizing the collor.\n@each $state, $value in $callout-variants {\n  .callout-#{$state} {\n    --#{$prefix}callout-border-left-color: #{$value};\n  }\n}\n// scss-docs-end callout-modifiers\n';
 const __vite_glob_0_9 = '//\n// Base styles\n//\n\n.card {\n  // scss-docs-start card-css-vars\n  --#{$prefix}card-spacer-y: #{$card-spacer-y};\n  --#{$prefix}card-spacer-x: #{$card-spacer-x};\n  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};\n  --#{$prefix}card-title-color: #{$card-title-color};\n  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};\n  --#{$prefix}card-border-width: #{$card-border-width};\n  --#{$prefix}card-border-color: #{$card-border-color};\n  --#{$prefix}card-border-radius: #{$card-border-radius};\n  --#{$prefix}card-box-shadow: #{$card-box-shadow};\n  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};\n  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};\n  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};\n  --#{$prefix}card-cap-bg: #{$card-cap-bg};\n  --#{$prefix}card-cap-color: #{$card-cap-color};\n  --#{$prefix}card-height: #{$card-height};\n  --#{$prefix}card-color: #{$card-color};\n  --#{$prefix}card-bg: #{$card-bg};\n  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};\n  --#{$prefix}card-group-margin: #{$card-group-margin};\n  // scss-docs-end card-css-vars\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106\n  height: var(--#{$prefix}card-height);\n  color: var(--#{$prefix}body-color);\n  word-wrap: break-word;\n  background-color: var(--#{$prefix}card-bg);\n  background-clip: border-box;\n  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);\n  @include border-radius(var(--#{$prefix}card-border-radius));\n  @include box-shadow(var(--#{$prefix}card-box-shadow));\n  @include elevation(1);\n\n  > hr {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  > .list-group {\n    border-top: inherit;\n    border-bottom: inherit;\n\n    &:first-child {\n      border-top-width: 0;\n      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));\n    }\n\n    &:last-child  {\n      border-bottom-width: 0;\n      @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));\n    }\n  }\n\n  // Due to specificity of the above selector (`.card > .list-group`), we must\n  // use a child selector here to prevent double borders.\n  > .card-header + .list-group,\n  > .list-group + .card-footer {\n    border-top: 0;\n  }\n}\n\n.card-body {\n  // Enable `flex-grow: 1` for decks and groups so that card blocks take up\n  // as much space as possible, ensuring footers are aligned to the bottom.\n  flex: 1 1 auto;\n  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);\n  color: var(--#{$prefix}card-color);\n}\n\n.card-title {\n  margin-bottom: var(--#{$prefix}card-title-spacer-y);\n  color: var(--#{$prefix}card-title-color);\n}\n\n.card-subtitle {\n  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list\n  margin-bottom: 0;\n  color: var(--#{$prefix}card-subtitle-color);\n}\n\n.card-text:last-child {\n  margin-bottom: 0;\n}\n\n.card-link {\n  &:hover {\n    text-decoration: if($link-hover-decoration == underline, none, null);\n  }\n\n  + .card-link {\n    @include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));\n  }\n}\n\n//\n// Optional textual caps\n//\n\n.card-header {\n  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);\n  margin-bottom: 0; // Removes the default margin-bottom of <hN>\n  color: var(--#{$prefix}card-cap-color);\n  background-color: var(--#{$prefix}card-cap-bg);\n  border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);\n\n  &:first-child {\n    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);\n  }\n}\n\n.card-footer {\n  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);\n  color: var(--#{$prefix}card-cap-color);\n  background-color: var(--#{$prefix}card-cap-bg);\n  border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);\n\n  &:last-child {\n    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));\n  }\n}\n\n\n//\n// Header navs\n//\n\n.card-header-tabs {\n  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list\n  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n  border-bottom: 0;\n\n  .nav-link.active {\n    background-color: var(--#{$prefix}card-bg);\n    border-bottom-color: var(--#{$prefix}card-bg);\n  }\n}\n\n.card-header-pills {\n  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n}\n\n// Card image\n.card-img-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: var(--#{$prefix}card-img-overlay-padding);\n  @include border-radius(var(--#{$prefix}card-inner-border-radius));\n}\n\n.card-img,\n.card-img-top,\n.card-img-bottom {\n  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch\n}\n\n.card-img,\n.card-img-top {\n  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));\n}\n\n.card-img,\n.card-img-bottom {\n  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));\n}\n\n\n//\n// Card groups\n//\n\n.card-group {\n  // The child selector allows nested `.card` within `.card-group`\n  // to display properly.\n  > .card {\n    margin-bottom: var(--#{$prefix}card-group-margin);\n  }\n\n  @include media-breakpoint-up(sm) {\n    display: flex;\n    flex-flow: row wrap;\n    // The child selector allows nested `.card` within `.card-group`\n    // to display properly.\n    > .card {\n      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      flex: 1 0 0%;\n      margin-bottom: 0;\n\n      + .card {\n        @include ltr-rtl("margin-left", 0);\n        @include ltr-rtl("border-left", 0);\n      }\n\n      // Handle rounded corners\n      @if $enable-rounded {\n        &:not(:last-child) {\n          @include border-end-radius(0);\n\n          .card-img-top,\n          .card-header {\n            // stylelint-disable-next-line property-disallowed-list\n            border-top-right-radius: 0;\n          }\n          .card-img-bottom,\n          .card-footer {\n            // stylelint-disable-next-line property-disallowed-list\n            border-bottom-right-radius: 0;\n          }\n        }\n\n        &:not(:first-child) {\n          @include border-start-radius(0);\n\n          .card-img-top,\n          .card-header {\n            // stylelint-disable-next-line property-disallowed-list\n            border-top-left-radius: 0;\n          }\n          .card-img-bottom,\n          .card-footer {\n            // stylelint-disable-next-line property-disallowed-list\n            border-bottom-left-radius: 0;\n          }\n        }\n      }\n    }\n  }\n}\n';
 const __vite_glob_0_10 = `// Notes on the classes:
@@ -704,7 +704,7 @@ const __vite_glob_0_23 = '// Base class\n//\n// Easily usable on <ul>, <ol>, or
 const __vite_glob_0_24 = '//\n// Loading button\n//\n\n.btn-loading {\n  position: relative;\n  overflow: hidden;\n}\n\n.btn-loading-spinner {\n  @include ltr-rtl("margin-right", $spacer);\n  @include ltr-rtl("margin-left", ($spacer * -2));\n  opacity: 0;\n  @include transition(margin .15s, opacity .15s, border .15s);\n}\n\n.btn-loading.is-loading {\n  .btn-loading-spinner {\n    width: 1rem;\n    @include ltr-rtl("margin-left", 0);\n    opacity: 1;\n  }\n}\n';
 const __vite_glob_0_25 = '// Re-assigned maps\n//\n// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.\n\n// scss-docs-start theme-colors-rgb\n$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;\n// scss-docs-end theme-colors-rgb\n\n// scss-docs-start theme-text-map\n$theme-colors-text: (\n  "primary": $primary-text-emphasis,\n  "secondary": $secondary-text-emphasis,\n  "success": $success-text-emphasis,\n  "info": $info-text-emphasis,\n  "warning": $warning-text-emphasis,\n  "danger": $danger-text-emphasis,\n  "light": $light-text-emphasis,\n  "dark": $dark-text-emphasis,\n) !default;\n// scss-docs-end theme-text-map\n\n// scss-docs-start theme-bg-subtle-map\n$theme-colors-bg-subtle: (\n  "primary": $primary-bg-subtle,\n  "secondary": $secondary-bg-subtle,\n  "success": $success-bg-subtle,\n  "info": $info-bg-subtle,\n  "warning": $warning-bg-subtle,\n  "danger": $danger-bg-subtle,\n  "light": $light-bg-subtle,\n  "dark": $dark-bg-subtle,\n) !default;\n// scss-docs-end theme-bg-subtle-map\n\n// scss-docs-start theme-border-subtle-map\n$theme-colors-border-subtle: (\n  "primary": $primary-border-subtle,\n  "secondary": $secondary-border-subtle,\n  "success": $success-border-subtle,\n  "info": $info-border-subtle,\n  "warning": $warning-border-subtle,\n  "danger": $danger-border-subtle,\n  "light": $light-border-subtle,\n  "dark": $dark-border-subtle,\n) !default;\n// scss-docs-end theme-border-subtle-map\n\n$theme-colors-rgb-dark: null !default;\n$theme-colors-text-dark: null !default;\n$theme-colors-bg-subtle-dark: null !default;\n$theme-colors-border-subtle-dark: null !default;\n\n@if $enable-dark-mode {\n  // scss-docs-start theme-colors-rgb-dark\n  $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;\n  // scss-docs-end theme-colors-rgb-dark\n\n  // scss-docs-start theme-text-dark-map\n  $theme-colors-text-dark: (\n    "primary": $primary-text-emphasis-dark,\n    "secondary": $secondary-text-emphasis-dark,\n    "success": $success-text-emphasis-dark,\n    "info": $info-text-emphasis-dark,\n    "warning": $warning-text-emphasis-dark,\n    "danger": $danger-text-emphasis-dark,\n    "light": $light-text-emphasis-dark,\n    "dark": $dark-text-emphasis-dark,\n  ) !default;\n  // scss-docs-end theme-text-dark-map\n\n  // scss-docs-start theme-bg-subtle-dark-map\n  $theme-colors-bg-subtle-dark: (\n    "primary": $primary-bg-subtle-dark,\n    "secondary": $secondary-bg-subtle-dark,\n    "success": $success-bg-subtle-dark,\n    "info": $info-bg-subtle-dark,\n    "warning": $warning-bg-subtle-dark,\n    "danger": $danger-bg-subtle-dark,\n    "light": $light-bg-subtle-dark,\n    "dark": $dark-bg-subtle-dark,\n  ) !default;\n  // scss-docs-end theme-bg-subtle-dark-map\n\n  // scss-docs-start theme-border-subtle-dark-map\n  $theme-colors-border-subtle-dark: (\n    "primary": $primary-border-subtle-dark,\n    "secondary": $secondary-border-subtle-dark,\n    "success": $success-border-subtle-dark,\n    "info": $info-border-subtle-dark,\n    "warning": $warning-border-subtle-dark,\n    "danger": $danger-border-subtle-dark,\n    "light": $light-border-subtle-dark,\n    "dark": $dark-border-subtle-dark,\n  ) !default;\n  // scss-docs-end theme-border-subtle-dark-map\n}\n\n// Utilities maps\n//\n// Extends the default `$theme-colors` maps to help create our utilities.\n\n// Come v6, we\'ll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.\n// scss-docs-start utilities-colors\n$utilities-colors: $theme-colors-rgb !default;\n// scss-docs-end utilities-colors\n\n// scss-docs-start utilities-text-colors\n$utilities-text: map-merge(\n  $utilities-colors,\n  (\n    "black": to-rgb($black),\n    "white": to-rgb($white),\n    "body": to-rgb($body-color)\n  )\n) !default;\n$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;\n\n$utilities-text-emphasis-colors: (\n  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),\n  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),\n  "success-emphasis": var(--#{$prefix}success-text-emphasis),\n  "info-emphasis": var(--#{$prefix}info-text-emphasis),\n  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),\n  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),\n  "light-emphasis": var(--#{$prefix}light-text-emphasis),\n  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)\n) !default;\n// scss-docs-end utilities-text-colors\n\n// scss-docs-start utilities-bg-colors\n$utilities-bg: map-merge(\n  $utilities-colors,\n  (\n    "black": to-rgb($black),\n    "white": to-rgb($white),\n    "body": to-rgb($body-bg)\n  )\n) !default;\n$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;\n\n$utilities-bg-subtle: (\n  "primary-subtle": var(--#{$prefix}primary-bg-subtle),\n  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),\n  "success-subtle": var(--#{$prefix}success-bg-subtle),\n  "info-subtle": var(--#{$prefix}info-bg-subtle),\n  "warning-subtle": var(--#{$prefix}warning-bg-subtle),\n  "danger-subtle": var(--#{$prefix}danger-bg-subtle),\n  "light-subtle": var(--#{$prefix}light-bg-subtle),\n  "dark-subtle": var(--#{$prefix}dark-bg-subtle)\n) !default;\n// scss-docs-end utilities-bg-colors\n\n// scss-docs-start utilities-border-colors\n$utilities-border: map-merge(\n  $utilities-colors,\n  (\n    "black": to-rgb($black),\n    "white": to-rgb($white)\n  )\n) !default;\n$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;\n\n$utilities-border-subtle: (\n  "primary-subtle": var(--#{$prefix}primary-border-subtle),\n  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),\n  "success-subtle": var(--#{$prefix}success-border-subtle),\n  "info-subtle": var(--#{$prefix}info-border-subtle),\n  "warning-subtle": var(--#{$prefix}warning-border-subtle),\n  "danger-subtle": var(--#{$prefix}danger-border-subtle),\n  "light-subtle": var(--#{$prefix}light-border-subtle),\n  "dark-subtle": var(--#{$prefix}dark-border-subtle)\n) !default;\n// scss-docs-end utilities-border-colors\n\n$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;\n\n$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;\n\n$gutters: $spacers !default;\n';
 const __vite_glob_0_26 = '// Toggles\n//\n// Used in conjunction with global variables to enable certain theme features.\n\n// LTR & RTL\n@import "mixins/ltr-rtl";\n\n// Vendor\n@import "vendor/rfs";\n\n// Deprecate\n@import "mixins/deprecate";\n\n// Helpers\n@import "mixins/breakpoints";\n@import "mixins/color-mode";\n@import "mixins/color-scheme";\n@import "mixins/image";\n@import "mixins/resize";\n@import "mixins/visually-hidden";\n@import "mixins/reset-text";\n@import "mixins/text-truncate";\n\n// Utilities\n@import "mixins/utilities";\n\n// Components\n@import "mixins/alert";\n@import "mixins/avatar";\n@import "mixins/backdrop";\n@import "mixins/buttons";\n@import "mixins/caret";\n@import "mixins/pagination";\n@import "mixins/lists";\n@import "mixins/forms";\n@import "mixins/table-variants";\n@import "mixins/icon";\n\n// Skins\n@import "mixins/border-radius";\n@import "mixins/box-shadow";\n@import "mixins/elevation";\n@import "mixins/gradients";\n@import "mixins/transition";\n\n// Layout\n@import "mixins/clearfix";\n@import "mixins/container";\n@import "mixins/grid";\n';
-const __vite_glob_0_27 = '// stylelint-disable function-disallowed-list\n\n// .modal-open      - body class for killing the scroll\n// .modal           - container to scroll within\n// .modal-dialog    - positioning shell for the actual modal\n// .modal-content   - actual modal w/ bg and corners and stuff\n\n\n// Container that the modal scrolls within\n.modal {\n  // scss-docs-start modal-css-vars\n  --#{$prefix}modal-zindex: #{$zindex-modal};\n  --#{$prefix}modal-width: #{$modal-md};\n  --#{$prefix}modal-padding: #{$modal-inner-padding};\n  --#{$prefix}modal-margin: #{$modal-dialog-margin};\n  --#{$prefix}modal-color: #{$modal-content-color};\n  --#{$prefix}modal-bg: #{$modal-content-bg};\n  --#{$prefix}modal-border-color: #{$modal-content-border-color};\n  --#{$prefix}modal-border-width: #{$modal-content-border-width};\n  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};\n  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};\n  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};\n  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};\n  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};\n  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y\n  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};\n  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};\n  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};\n  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};\n  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};\n  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};\n  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};\n  // scss-docs-end modal-css-vars\n\n  position: fixed;\n  top: 0;\n  @include ltr-rtl("left", 0);\n  z-index: var(--#{$prefix}modal-zindex);\n  display: none;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  // Prevent Chrome on Windows from adding a focus outline. For details, see\n  // https://github.com/twbs/bootstrap/pull/10951.\n  outline: 0;\n  // We deliberately don\'t use `-webkit-overflow-scrolling: touch;` due to a\n  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n  // See also https://github.com/twbs/bootstrap/issues/17695\n  @include elevation(24);\n}\n\n// Shell div to position the modal with bottom padding\n.modal-dialog {\n  position: relative;\n  width: auto;\n  margin: var(--#{$prefix}modal-margin);\n  // allow clicks to pass through for custom click handling to close modal\n  pointer-events: none;\n\n  // When fading in the modal, animate it to slide down\n  .modal.fade & {\n    @include transition($modal-transition);\n    transform: $modal-fade-transform;\n  }\n  .modal.show & {\n    transform: $modal-show-transform;\n  }\n\n  // When trying to close, animate focus to scale\n  .modal.modal-static & {\n    transform: $modal-scale-transform;\n  }\n}\n\n.modal-dialog-scrollable {\n  height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n\n  .modal-content {\n    max-height: 100%;\n    overflow: hidden;\n  }\n\n  .modal-body {\n    overflow-y: auto;\n  }\n}\n\n.modal-dialog-centered {\n  display: flex;\n  align-items: center;\n  min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n}\n\n// Actual modal\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`\n  // counteract the pointer-events: none; in the .modal-dialog\n  color: var(--#{$prefix}modal-color);\n  pointer-events: auto;\n  background-color: var(--#{$prefix}modal-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);\n  @include border-radius(var(--#{$prefix}modal-border-radius));\n  @include box-shadow(var(--#{$prefix}modal-box-shadow));\n  // Remove focus outline from opened modal\n  outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n  // scss-docs-start modal-backdrop-css-vars\n  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};\n  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};\n  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};\n  // scss-docs-end modal-backdrop-css-vars\n\n  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));\n}\n\n// Modal header\n// Top section of the modal w/ title and dismiss\n.modal-header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: var(--#{$prefix}modal-header-padding);\n  border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);\n  @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));\n\n  .btn-close {\n    padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);\n    @include ltr-rtl-value-only("margin", calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto, calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)));\n  }\n}\n\n// Title text within header\n.modal-title {\n  margin-bottom: 0;\n  line-height: var(--#{$prefix}modal-title-line-height);\n}\n\n// Modal body\n// Where all modal content resides (sibling of .modal-header and .modal-footer)\n.modal-body {\n  position: relative;\n  // Enable `flex-grow: 1` so that the body take up as much space as possible\n  // when there should be a fixed height on `.modal-dialog`.\n  flex: 1 1 auto;\n  padding: var(--#{$prefix}modal-padding);\n}\n\n// Footer (for actions)\n.modal-footer {\n  display: flex;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  align-items: center; // vertically center\n  justify-content: flex-end; // Right align buttons with flex property because text-align doesn\'t work on flex items\n  padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);\n  background-color: var(--#{$prefix}modal-footer-bg);\n  border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);\n  @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));\n\n  // Place margin between footer elements\n  // This solution is far from ideal because of the universal selector usage,\n  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800\n  > * {\n    margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class\n  }\n}\n\n// Scale up the modal\n@include media-breakpoint-up(sm) {\n  .modal {\n    --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};\n    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};\n  }\n\n  // Automatically set modal\'s width for larger viewports\n  .modal-dialog {\n    max-width: var(--#{$prefix}modal-width);\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  .modal-sm {\n    --#{$prefix}modal-width: #{$modal-sm};\n  }\n}\n\n@include media-breakpoint-up(lg) {\n  .modal-lg,\n  .modal-xl {\n    --#{$prefix}modal-width: #{$modal-lg};\n  }\n}\n\n@include media-breakpoint-up(xl) {\n  .modal-xl {\n    --#{$prefix}modal-width: #{$modal-xl};\n  }\n}\n\n// scss-docs-start modal-fullscreen-loop\n@each $breakpoint in map-keys($grid-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n  $postfix: if($infix != "", $infix + "-down", "");\n\n  @include media-breakpoint-down($breakpoint) {\n    .modal-fullscreen#{$postfix} {\n      width: 100vw;\n      max-width: none;\n      height: 100%;\n      margin: 0;\n\n      .modal-content {\n        height: 100%;\n        border: 0;\n        @include border-radius(0);\n      }\n\n      .modal-header,\n      .modal-footer {\n        @include border-radius(0);\n      }\n\n      .modal-body {\n        overflow-y: auto;\n      }\n    }\n  }\n}\n// scss-docs-end modal-fullscreen-loop\n';
+const __vite_glob_0_27 = '// stylelint-disable function-disallowed-list\n\n// .modal-open      - body class for killing the scroll\n// .modal           - container to scroll within\n// .modal-dialog    - positioning shell for the actual modal\n// .modal-content   - actual modal w/ bg and corners and stuff\n\n\n// Container that the modal scrolls within\n.modal {\n  // scss-docs-start modal-css-vars\n  --#{$prefix}modal-zindex: #{$zindex-modal};\n  --#{$prefix}modal-width: #{$modal-md};\n  --#{$prefix}modal-padding: #{$modal-inner-padding};\n  --#{$prefix}modal-margin: #{$modal-dialog-margin};\n  --#{$prefix}modal-color: #{$modal-content-color};\n  --#{$prefix}modal-bg: #{$modal-content-bg};\n  --#{$prefix}modal-border-color: #{$modal-content-border-color};\n  --#{$prefix}modal-border-width: #{$modal-content-border-width};\n  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};\n  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};\n  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};\n  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};\n  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};\n  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y\n  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};\n  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};\n  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};\n  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};\n  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};\n  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};\n  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};\n  // scss-docs-end modal-css-vars\n\n  position: fixed;\n  top: 0;\n  @include ltr-rtl("left", 0);\n  z-index: var(--#{$prefix}modal-zindex);\n  display: none;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  // Prevent Chrome on Windows from adding a focus outline. For details, see\n  // https://github.com/twbs/bootstrap/pull/10951.\n  outline: 0;\n  // We deliberately don\'t use `-webkit-overflow-scrolling: touch;` due to a\n  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n  // See also https://github.com/twbs/bootstrap/issues/17695\n  @include elevation(24);\n}\n\n// Shell div to position the modal with bottom padding\n.modal-dialog {\n  position: relative;\n  width: auto;\n  margin: var(--#{$prefix}modal-margin);\n  // allow clicks to pass through for custom click handling to close modal\n  pointer-events: none;\n\n  // When fading in the modal, animate it to slide down\n  .modal.fade & {\n    transform: $modal-fade-transform;\n    @include transition($modal-transition);\n  }\n  .modal.show & {\n    transform: $modal-show-transform;\n  }\n\n  // When trying to close, animate focus to scale\n  .modal.modal-static & {\n    transform: $modal-scale-transform;\n  }\n}\n\n.modal-dialog-scrollable {\n  height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n\n  .modal-content {\n    max-height: 100%;\n    overflow: hidden;\n  }\n\n  .modal-body {\n    overflow-y: auto;\n  }\n}\n\n.modal-dialog-centered {\n  display: flex;\n  align-items: center;\n  min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n}\n\n// Actual modal\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`\n  // counteract the pointer-events: none; in the .modal-dialog\n  color: var(--#{$prefix}modal-color);\n  pointer-events: auto;\n  background-color: var(--#{$prefix}modal-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);\n  @include border-radius(var(--#{$prefix}modal-border-radius));\n  @include box-shadow(var(--#{$prefix}modal-box-shadow));\n  // Remove focus outline from opened modal\n  outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n  // scss-docs-start modal-backdrop-css-vars\n  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};\n  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};\n  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};\n  // scss-docs-end modal-backdrop-css-vars\n\n  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));\n}\n\n// Modal header\n// Top section of the modal w/ title and dismiss\n.modal-header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: var(--#{$prefix}modal-header-padding);\n  border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);\n  @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));\n\n  .btn-close {\n    padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);\n    @include ltr-rtl-value-only("margin", calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto, calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)));\n  }\n}\n\n// Title text within header\n.modal-title {\n  margin-bottom: 0;\n  line-height: var(--#{$prefix}modal-title-line-height);\n}\n\n// Modal body\n// Where all modal content resides (sibling of .modal-header and .modal-footer)\n.modal-body {\n  position: relative;\n  // Enable `flex-grow: 1` so that the body take up as much space as possible\n  // when there should be a fixed height on `.modal-dialog`.\n  flex: 1 1 auto;\n  padding: var(--#{$prefix}modal-padding);\n}\n\n// Footer (for actions)\n.modal-footer {\n  display: flex;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  align-items: center; // vertically center\n  justify-content: flex-end; // Right align buttons with flex property because text-align doesn\'t work on flex items\n  padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);\n  background-color: var(--#{$prefix}modal-footer-bg);\n  border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);\n  @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));\n\n  // Place margin between footer elements\n  // This solution is far from ideal because of the universal selector usage,\n  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800\n  > * {\n    margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class\n  }\n}\n\n// Scale up the modal\n@include media-breakpoint-up(sm) {\n  .modal {\n    --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};\n    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};\n  }\n\n  // Automatically set modal\'s width for larger viewports\n  .modal-dialog {\n    max-width: var(--#{$prefix}modal-width);\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  .modal-sm {\n    --#{$prefix}modal-width: #{$modal-sm};\n  }\n}\n\n@include media-breakpoint-up(lg) {\n  .modal-lg,\n  .modal-xl {\n    --#{$prefix}modal-width: #{$modal-lg};\n  }\n}\n\n@include media-breakpoint-up(xl) {\n  .modal-xl {\n    --#{$prefix}modal-width: #{$modal-xl};\n  }\n}\n\n// scss-docs-start modal-fullscreen-loop\n@each $breakpoint in map-keys($grid-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n  $postfix: if($infix != "", $infix + "-down", "");\n\n  @include media-breakpoint-down($breakpoint) {\n    .modal-fullscreen#{$postfix} {\n      width: 100vw;\n      max-width: none;\n      height: 100%;\n      margin: 0;\n\n      .modal-content {\n        height: 100%;\n        border: 0;\n        @include border-radius(0);\n      }\n\n      .modal-header,\n      .modal-footer {\n        @include border-radius(0);\n      }\n\n      .modal-body {\n        overflow-y: auto;\n      }\n    }\n  }\n}\n// scss-docs-end modal-fullscreen-loop\n';
 const __vite_glob_0_28 = '// Base class\n//\n// Kickstart any navigation component with a set of style resets. Works with\n// `<nav>`s, `<ul>`s or `<ol>`s.\n\n.nav {\n  // scss-docs-start nav-css-vars\n  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};\n  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};\n  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);\n  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};\n  --#{$prefix}nav-link-color: #{$nav-link-color};\n  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};\n  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};\n  // scss-docs-end nav-css-vars\n\n  display: flex;\n  flex-wrap: wrap;\n  @include ltr-rtl("padding-left", 0);\n  margin-bottom: 0;\n  list-style: none;\n}\n\n.nav-link {\n  display: block;\n  padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);\n  @include font-size(var(--#{$prefix}nav-link-font-size));\n  font-weight: var(--#{$prefix}nav-link-font-weight);\n  color: var(--#{$prefix}nav-link-color);\n  text-decoration: if($link-decoration == none, null, none);\n  background: none;\n  border: 0;\n  @include transition($nav-link-transition);\n\n  &:hover,\n  &:focus {\n    color: var(--#{$prefix}nav-link-hover-color);\n    text-decoration: if($link-hover-decoration == underline, none, null);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: $nav-link-focus-box-shadow;\n  }\n\n  // Disabled state lightens text\n  &.disabled,\n  &:disabled {\n    color: var(--#{$prefix}nav-link-disabled-color);\n    pointer-events: none;\n    cursor: default;\n  }\n}\n\n//\n// Tabs\n//\n\n.nav-tabs {\n  // scss-docs-start nav-tabs-css-vars\n  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};\n  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};\n  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};\n  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};\n  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};\n  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};\n  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};\n  // scss-docs-end nav-tabs-css-vars\n\n  border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);\n\n  .nav-link {\n    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list\n    border: var(--#{$prefix}nav-tabs-border-width) solid transparent;\n    @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));\n\n    &:hover,\n    &:focus {\n      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link\n      isolation: isolate;\n      border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);\n    }\n  }\n\n  .nav-link.active,\n  .nav-item.show .nav-link {\n    color: var(--#{$prefix}nav-tabs-link-active-color);\n    background-color: var(--#{$prefix}nav-tabs-link-active-bg);\n    border-color: var(--#{$prefix}nav-tabs-link-active-border-color);\n  }\n\n  .dropdown-menu {\n    // Make dropdown border overlap tab border\n    margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list\n    // Remove the top rounded corners here since there is a hard edge above the menu\n    @include border-top-radius(0);\n  }\n}\n\n\n//\n// Pills\n//\n\n.nav-pills {\n  // scss-docs-start nav-pills-css-vars\n  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};\n  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};\n  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};\n  // scss-docs-end nav-pills-css-vars\n\n  .nav-link {\n    @include border-radius(var(--#{$prefix}nav-pills-border-radius));\n  }\n\n  .nav-link.active,\n  .show > .nav-link {\n    color: var(--#{$prefix}nav-pills-link-active-color);\n    @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));\n  }\n}\n\n\n//\n// Underline\n//\n\n.nav-underline {\n  // scss-docs-start nav-underline-css-vars\n  --#{$prefix}nav-underline-gap: #{$nav-underline-gap};\n  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};\n  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};\n  // scss-docs-end nav-underline-css-vars\n\n  gap: var(--#{$prefix}nav-underline-gap);\n\n  .nav-link {\n    padding-right: 0;\n    padding-left: 0;\n    border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;\n\n    &:hover,\n    &:focus {\n      border-bottom-color: currentcolor;\n    }\n  }\n\n  .nav-link.active,\n  .show > .nav-link {\n    font-weight: $font-weight-bold;\n    color: var(--#{$prefix}nav-underline-link-active-color);\n    border-bottom-color: currentcolor;\n  }\n}\n\n\n//\n// Underline border\n//\n\n.nav-underline-border {\n  // scss-docs-start nav-underline-border-css-vars\n  --#{$prefix}nav-underline-border-gap: #{$nav-underline-border-gap};\n  --#{$prefix}nav-underline-border-border-color: #{$nav-underline-border-border-color};\n  --#{$prefix}nav-underline-border-border-width: #{$nav-underline-border-border-width};\n  --#{$prefix}nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x};\n  --#{$prefix}nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y};\n  --#{$prefix}nav-underline-border-link-color: #{$nav-underline-border-link-color};\n  --#{$prefix}nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color};\n  --#{$prefix}nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color};\n  // scss-docs-end nav-underline-border-css-vars\n\n  --#{$prefix}nav-link-color: var(--#{$prefix}nav-underline-border-link-color);\n  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}nav-underline-border-link-disabled-color);\n\n  gap: var(--#{$prefix}nav-underline-border-gap);\n  border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid var(--#{$prefix}nav-underline-border-border-color);\n\n  .nav-link {\n    padding: var(--#{$prefix}nav-underline-border-link-padding-y) var(--#{$prefix}nav-underline-border-link-padding-x);\n    margin-bottom: calc(-1 * var(--#{$prefix}nav-underline-border-border-width)); // stylelint-disable-line function-disallowed-list\n    border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid transparent;\n\n    &:hover,\n    &:focus {\n      border-bottom-color: currentcolor;\n    }\n  }\n\n  .nav-link.active,\n  .show > .nav-link {\n    font-weight: $font-weight-bold;\n    color: var(--#{$prefix}nav-underline-border-link-active-color);\n    border-bottom-color: currentcolor;\n  }\n}\n\n\n//\n// Justified variants\n//\n\n.nav-fill {\n  > .nav-link,\n  .nav-item {\n    flex: 1 1 auto;\n    text-align: center;\n  }\n}\n\n.nav-justified {\n  > .nav-link,\n  .nav-item {\n    flex-basis: 0;\n    flex-grow: 1;\n    text-align: center;\n  }\n}\n\n.nav-fill,\n.nav-justified {\n  .nav-item .nav-link {\n    width: 100%; // Make sure button will grow\n  }\n}\n\n\n// Tabbable tabs\n//\n// Hide tabbable panes to start, show them when `.active`\n\n.tab-content {\n  > .tab-pane {\n    display: none;\n  }\n  > .active {\n    display: block;\n  }\n}\n';
 const __vite_glob_0_29 = '// Navbar\n//\n// Provide a static navbar from which we expand to create full-width, fixed, and\n// other navbar variations.\n\n.navbar {\n  // scss-docs-start navbar-css-vars\n  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};\n  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};\n  --#{$prefix}navbar-color: #{$navbar-light-color};\n  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};\n  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};\n  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};\n  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};\n  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};\n  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};\n  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};\n  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};\n  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};\n  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};\n  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};\n  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};\n  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};\n  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};\n  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};\n  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};\n  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};\n  // scss-docs-end navbar-css-vars\n\n  position: relative;\n  display: flex;\n  flex-wrap: wrap; // allow us to do the line break for collapsing content\n  align-items: center;\n  justify-content: space-between; // space out brand from logo\n  padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);\n  @include gradient-bg();\n\n  // Because flex properties aren\'t inherited, we need to redeclare these first\n  // few properties so that content nested within behave properly.\n  // The `flex-wrap` property is inherited to simplify the expanded navbars\n  %container-flex-properties {\n    display: flex;\n    flex-wrap: inherit;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  > .container,\n  > .container-fluid {\n    @extend %container-flex-properties;\n  }\n\n  @each $breakpoint, $container-max-width in $container-max-widths {\n    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {\n      @extend %container-flex-properties;\n    }\n  }\n}\n\n\n// Navbar brand\n//\n// Used for brand, project, or site names.\n\n.navbar-brand {\n  padding-top: var(--#{$prefix}navbar-brand-padding-y);\n  padding-bottom: var(--#{$prefix}navbar-brand-padding-y);\n  @include ltr-rtl("margin-right", var(--#{$prefix}navbar-brand-margin-end));\n  @include font-size(var(--#{$prefix}navbar-brand-font-size));\n  color: var(--#{$prefix}navbar-brand-color);\n  text-decoration: if($link-decoration == none, null, none);\n  white-space: nowrap;\n\n  &:hover,\n  &:focus {\n    color: var(--#{$prefix}navbar-brand-hover-color);\n    text-decoration: if($link-hover-decoration == underline, none, null);\n  }\n}\n\n\n// Navbar nav\n//\n// Custom navbar navigation (doesn\'t require `.nav`, but does make use of `.nav-link`).\n\n.navbar-nav {\n  // scss-docs-start navbar-nav-css-vars\n  --#{$prefix}nav-link-padding-x: 0;\n  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};\n  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);\n  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};\n  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);\n  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);\n  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);\n  // scss-docs-end navbar-nav-css-vars\n\n  display: flex;\n  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value\n  @include ltr-rtl("padding-left", 0);\n  margin-bottom: 0;\n  list-style: none;\n\n  .nav-link {\n    &.active,\n    &.show {\n      color: var(--#{$prefix}navbar-active-color);\n    }\n  }\n\n  .dropdown-menu {\n    position: static;\n  }\n}\n\n\n// Navbar text\n//\n//\n\n.navbar-text {\n  padding-top: $nav-link-padding-y;\n  padding-bottom: $nav-link-padding-y;\n  color: var(--#{$prefix}navbar-color);\n\n  a,\n  a:hover,\n  a:focus  {\n    color: var(--#{$prefix}navbar-active-color);\n  }\n}\n\n\n// Responsive navbar\n//\n// Custom styles for responsive collapsing and toggling of navbar contents.\n// Powered by the collapse Bootstrap JavaScript plugin.\n\n// When collapsed, prevent the toggleable navbar contents from appearing in\n// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`\n// on the `.navbar` parent.\n.navbar-collapse {\n  flex-basis: 100%;\n  flex-grow: 1;\n  // For always expanded or extra full navbars, ensure content aligns itself\n  // properly vertically. Can be easily overridden with flex utilities.\n  align-items: center;\n}\n\n// Button for toggling the navbar when in its collapsed state\n.navbar-toggler {\n  padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);\n  @include font-size(var(--#{$prefix}navbar-toggler-font-size));\n  line-height: 1;\n  color: var(--#{$prefix}navbar-color);\n  background-color: transparent; // remove default button style\n  border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style\n  @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));\n  @include transition(var(--#{$prefix}navbar-toggler-transition));\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:focus {\n    text-decoration: none;\n    outline: 0;\n    box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);\n  }\n}\n\n// Keep as a separate element so folks can easily override it with another icon\n// or image file as needed.\n.navbar-toggler-icon {\n  display: inline-block;\n  width: 1.5em;\n  height: 1.5em;\n  vertical-align: middle;\n  background-image: var(--#{$prefix}navbar-toggler-icon-bg);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 100%;\n}\n\n.navbar-nav-scroll {\n  max-height: var(--#{$prefix}scroll-height, 75vh);\n  overflow-y: auto;\n}\n\n// scss-docs-start navbar-expand-loop\n// Generate series of `.navbar-expand-*` responsive classes for configuring\n// where your navbar collapses.\n.navbar-expand {\n  @each $breakpoint in map-keys($grid-breakpoints) {\n    $next: breakpoint-next($breakpoint, $grid-breakpoints);\n    $infix: breakpoint-infix($next, $grid-breakpoints);\n\n    // stylelint-disable-next-line scss/selector-no-union-class-name\n    &#{$infix} {\n      @include media-breakpoint-up($next) {\n        flex-wrap: nowrap;\n        justify-content: flex-start;\n\n        .navbar-nav {\n          flex-direction: row;\n\n          .dropdown-menu {\n            position: absolute;\n          }\n\n          .nav-link {\n            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);\n            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);\n          }\n        }\n\n        .navbar-nav-scroll {\n          overflow: visible;\n        }\n\n        .navbar-collapse {\n          display: flex !important; // stylelint-disable-line declaration-no-important\n          flex-basis: auto;\n        }\n\n        .navbar-toggler {\n          display: none;\n        }\n\n        .offcanvas {\n          // stylelint-disable declaration-no-important\n          position: static;\n          z-index: auto;\n          flex-grow: 1;\n          width: auto !important;\n          height: auto !important;\n          visibility: visible !important;\n          background-color: transparent !important;\n          border: 0 !important;\n          transform: none !important;\n          @include box-shadow(none);\n          @include transition(none);\n          // stylelint-enable declaration-no-important\n\n          .offcanvas-header {\n            display: none;\n          }\n\n          .offcanvas-body {\n            display: flex;\n            flex-grow: 0;\n            padding: 0;\n            overflow-y: visible;\n          }\n        }\n      }\n    }\n  }\n}\n// scss-docs-end navbar-expand-loop\n\n// Navbar themes\n//\n// Styles for switching between navbars with light or dark background.\n\n.navbar-light {\n  @include deprecate("`.navbar-light`", "v4.2.6", "v6.0.0", true);\n}\n\n.navbar-dark,\n.navbar[data-coreui-theme="dark"] {\n  // scss-docs-start navbar-dark-css-vars\n  --#{$prefix}navbar-color: #{$navbar-dark-color};\n  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};\n  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};\n  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};\n  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};\n  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};\n  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};\n  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};\n  // scss-docs-end navbar-dark-css-vars\n}\n\n@if $enable-dark-mode {\n  @include color-mode(dark) {\n    .navbar-toggler-icon {\n      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};\n    }\n  }\n}\n';
 const __vite_glob_0_30 = '// stylelint-disable function-disallowed-list\n\n%offcanvas-css-vars {\n  // scss-docs-start offcanvas-css-vars\n  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};\n  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};\n  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};\n  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};\n  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};\n  --#{$prefix}offcanvas-color: #{$offcanvas-color};\n  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};\n  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};\n  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};\n  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};\n  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};\n  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};\n  // scss-docs-end offcanvas-css-vars\n}\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n  $next: breakpoint-next($breakpoint, $grid-breakpoints);\n  $infix: breakpoint-infix($next, $grid-breakpoints);\n\n  .offcanvas#{$infix} {\n    @extend %offcanvas-css-vars;\n  }\n}\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n  $next: breakpoint-next($breakpoint, $grid-breakpoints);\n  $infix: breakpoint-infix($next, $grid-breakpoints);\n\n  .offcanvas#{$infix} {\n    @include media-breakpoint-down($next) {\n      position: fixed;\n      bottom: 0;\n      z-index: var(--#{$prefix}offcanvas-zindex);\n      display: flex;\n      flex-direction: column;\n      max-width: 100%;\n      color: var(--#{$prefix}offcanvas-color);\n      visibility: hidden;\n      background-color: var(--#{$prefix}offcanvas-bg);\n      background-clip: padding-box;\n      outline: 0;\n      @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));\n      @include transition(var(--#{$prefix}offcanvas-transition));\n\n      &.offcanvas-start {\n        top: 0;\n        @include ltr-rtl("left", 0);\n        width: var(--#{$prefix}offcanvas-width);\n        @include ltr-rtl("border-right", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));\n        @include ltr-rtl-value-only("transform", translateX(-100%), translateX(100%));\n      }\n\n      &.offcanvas-end {\n        top: 0;\n        @include ltr-rtl("right", 0);\n        width: var(--#{$prefix}offcanvas-width);\n        @include ltr-rtl("border-left", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));\n        transform: translateX(100%);\n      }\n\n      &.offcanvas-top {\n        top: 0;\n        right: 0;\n        left: 0;\n        height: var(--#{$prefix}offcanvas-height);\n        max-height: 100%;\n        border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);\n        transform: translateY(-100%);\n      }\n\n      &.offcanvas-bottom {\n        right: 0;\n        left: 0;\n        height: var(--#{$prefix}offcanvas-height);\n        max-height: 100%;\n        border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);\n        transform: translateY(100%);\n      }\n\n      &.showing,\n      &.show:not(.hiding) {\n        transform: none !important; // stylelint-disable-line declaration-no-important\n      }\n\n      &.showing,\n      &.hiding,\n      &.show {\n        visibility: visible;\n      }\n    }\n\n    @if not ($infix == "") {\n      @include media-breakpoint-up($next) {\n        --#{$prefix}offcanvas-height: auto;\n        --#{$prefix}offcanvas-border-width: 0;\n        background-color: transparent !important; // stylelint-disable-line declaration-no-important\n\n        .offcanvas-header {\n          display: none;\n        }\n\n        .offcanvas-body {\n          display: flex;\n          flex-grow: 0;\n          padding: 0;\n          overflow-y: visible;\n          // Reset `background-color` in case `.bg-*` classes are used in offcanvas\n          background-color: transparent !important; // stylelint-disable-line declaration-no-important\n        }\n      }\n    }\n  }\n}\n\n.offcanvas-backdrop {\n  @include overlay-backdrop($zindex-offcanvas-backdrop, var(--#{$prefix}offcanvas-backdrop-bg, $offcanvas-backdrop-bg), $offcanvas-backdrop-opacity);\n}\n\n.offcanvas-header {\n  display: flex;\n  align-items: center;\n  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);\n\n  .btn-close {\n    padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);\n    margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));\n    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}offcanvas-padding-x)));\n    margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));\n  }\n}\n\n.offcanvas-title {\n  margin-bottom: 0;\n  line-height: var(--#{$prefix}offcanvas-title-line-height);\n}\n\n.offcanvas-body {\n  flex-grow: 1;\n  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);\n  overflow-y: auto;\n}\n';
@@ -909,7 +909,7 @@ const __vite_glob_0_33 = `.popover {
 `;
 const __vite_glob_0_34 = "// Disable animation if transitions are disabled\n\n// scss-docs-start progress-keyframes\n@if $enable-transitions {\n  @keyframes progress-bar-stripes {\n    0% { background-position-x: $progress-height; }\n  }\n}\n// scss-docs-end progress-keyframes\n\n.progress,\n.progress-stacked {\n  // scss-docs-start progress-css-vars\n  --#{$prefix}progress-height: #{$progress-height};\n  @include rfs($progress-font-size, --#{$prefix}progress-font-size);\n  --#{$prefix}progress-bg: #{$progress-bg};\n  --#{$prefix}progress-border-radius: #{$progress-border-radius};\n  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};\n  --#{$prefix}progress-bar-color: #{$progress-bar-color};\n  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};\n  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};\n  // scss-docs-end progress-css-vars\n\n  display: flex;\n  height: var(--#{$prefix}progress-height);\n  overflow: hidden; // force rounded corners by cropping it\n  @include font-size(var(--#{$prefix}progress-font-size));\n  background-color: var(--#{$prefix}progress-bg);\n  @include border-radius(var(--#{$prefix}progress-border-radius));\n  @include box-shadow(var(--#{$prefix}progress-box-shadow));\n}\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--#{$prefix}progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  background-color: var(--#{$prefix}progress-bar-bg);\n  @include transition(var(--#{$prefix}progress-bar-transition));\n}\n\n.progress-bar-striped {\n  @include gradient-striped();\n  background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);\n}\n\n.progress-stacked > .progress {\n  overflow: visible;\n}\n\n.progress-stacked > .progress > .progress-bar {\n  width: 100%;\n}\n\n@if $enable-transitions {\n  .progress-bar-animated {\n    animation: $progress-bar-animation-timing progress-bar-stripes;\n\n    @if $enable-reduced-motion {\n      @media (prefers-reduced-motion: reduce) {\n        animation: none;\n      }\n    }\n  }\n}\n\n.progress-thin {\n  height: 4px;\n}\n\n// White progress bar\n.progress.progress-white {\n  background-color: rgba(255, 255, 255, .2);\n  .progress-bar {\n    background-color: $white;\n  }\n}\n\n.progress-group {\n  display: flex;\n  flex-flow: row wrap;\n  margin-bottom: $progress-group-margin-bottom;\n}\n\n.progress-group-prepend {\n  flex: 0 0 100px;\n  align-self: center;\n}\n\n.progress-group-header {\n  display: flex;\n  flex-basis: 100%;\n  align-items: center;\n  margin-bottom: $progress-group-header-margin-bottom;\n}\n\n.progress-group-bars {\n  flex-grow: 1;\n  align-self: center;\n\n  .progress:not(:last-child) {\n    margin-bottom: 2px;\n  }\n}\n\n.progress-group-header + .progress-group-bars {\n  flex-basis: 100%;\n}\n";
 const __vite_glob_0_35 = ".rating {\n  // scss-docs-start rating-css-vars\n  --#{$prefix}rating-gap: #{$rating-gap};\n  --#{$prefix}rating-transition: #{$rating-transition};\n  --#{$prefix}rating-item-height: #{$rating-item-height};\n  --#{$prefix}rating-item-color: #{$rating-item-color};\n  --#{$prefix}rating-item-scale-transform: #{$rating-item-scale-transform};\n  --#{$prefix}rating-item-active-color: #{$rating-item-active-color};\n  --#{$prefix}rating-item-icon: #{escape-svg($rating-item-icon)};\n  // scss-docs-end rating-css-vars\n\n  display: flex;\n  gap: var(--#{$prefix}rating-gap);\n\n  &.disabled {\n    opacity: 50%;\n  }\n\n  &:not(.disabled):not(.readonly) {\n    .rating-item {\n      cursor: pointer;\n\n      &:hover {\n        transform: var(--#{$prefix}rating-item-scale-transform);\n      }\n    }\n  }\n}\n\n.rating-item {\n  position: relative;\n  line-height: 0;\n  @include transition(var(--#{$prefix}rating-transition));\n}\n\n.rating-item-input {\n  position: absolute;\n  left: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  appearance: none;\n\n}\n\n.rating-item-label {\n  font-size: var(--#{$prefix}rating-item-height);\n  line-height: 0;\n  color: var(--#{$prefix}rating-item-color);\n  cursor: pointer;\n\n  * {\n    pointer-events: none;\n  }\n\n  svg {\n    height: var(--#{$prefix}rating-item-height);\n    pointer-events: none;\n\n    * {\n      pointer-events: none;\n    }\n  }\n\n  &.active {\n    color: var(--#{$prefix}rating-item-active-color);\n    opacity: 1 !important; // stylelint-disable-line declaration-no-important\n\n    .rating-item-icon {\n      background-color: var(--#{$prefix}rating-item-active-color);\n    }\n\n    .rating-item-custom-icon:has(+ .rating-item-custom-icon-active) {\n      display: none;\n    }\n\n    .rating-item-custom-icon-active {\n      display: initial;\n    }\n  }\n}\n\n.rating-item-icon {\n  width: var(--#{$prefix}rating-item-height);\n  height: var(--#{$prefix}rating-item-height);\n  cursor: pointer;\n  background-color: var(--#{$prefix}rating-item-color);\n  mask: var(--#{$prefix}rating-item-icon) center / var(--#{$prefix}rating-item-height) no-repeat;\n}\n\n.rating-item-custom-icon-active {\n  display: none;\n}\n\n.rating-sm {\n  --#{$prefix}rating-item-height: #{$rating-item-height-sm};\n}\n\n.rating-lg {\n  --#{$prefix}rating-item-height: #{$rating-item-height-lg};\n}\n";
-const __vite_glob_0_36 = '// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n  @if $font-size-root != null {\n    @include font-size(var(--#{$prefix}root-font-size));\n  }\n\n  @if $enable-smooth-scroll {\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n  margin: 0; // 1\n  font-family: var(--#{$prefix}body-font-family);\n  @include font-size(var(--#{$prefix}body-font-size));\n  font-weight: var(--#{$prefix}body-font-weight);\n  line-height: var(--#{$prefix}body-line-height);\n  color: var(--#{$prefix}body-color);\n  text-align: var(--#{$prefix}body-text-align);\n  background-color: var(--#{$prefix}body-bg); // 2\n  -webkit-text-size-adjust: 100%; // 3\n  -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox\'s gray color\n\nhr {\n  margin: $hr-margin-y 0;\n  color: $hr-color; // 1\n  border: 0;\n  border-top: $hr-border-width solid $hr-border-color;\n  opacity: $hr-opacity;\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n//    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top\n//    margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n  margin-top: 0; // 1\n  margin-bottom: $headings-margin-bottom;\n  font-family: $headings-font-family;\n  font-style: $headings-font-style;\n  font-weight: $headings-font-weight;\n  line-height: $headings-line-height;\n  color: var(--#{$prefix}heading-color);\n}\n\nh1 {\n  @extend %heading;\n  @include font-size($h1-font-size);\n}\n\nh2 {\n  @extend %heading;\n  @include font-size($h2-font-size);\n}\n\nh3 {\n  @extend %heading;\n  @include font-size($h3-font-size);\n}\n\nh4 {\n  @extend %heading;\n  @include font-size($h4-font-size);\n}\n\nh5 {\n  @extend %heading;\n  @include font-size($h5-font-size);\n}\n\nh6 {\n  @extend %heading;\n  @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `<p>`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n  margin-top: 0;\n  margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 2. Add explicit cursor to indicate changed behavior.\n// 3. Prevent the text-decoration to be skipped.\n\nabbr[title] {\n  text-decoration: underline dotted; // 1\n  cursor: help; // 2\n  text-decoration-skip-ink: none; // 3\n}\n\n\n// Address\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\n\n// Lists\n\n// ol,\n// ul {\n//   @include ltr-rtl("padding-left", 2rem); // TODO: find solution\n// }\n\nol,\nul,\ndl {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n  margin-bottom: .5rem;\n  @include ltr-rtl("margin-left", 0); // 1\n}\n\n\n// Blockquote\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n  font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n  @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n  padding: $mark-padding;\n  color: var(--#{$prefix}highlight-color);\n  background-color: var(--#{$prefix}highlight-bg);\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n  position: relative;\n  @include font-size($sub-sup-font-size);\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));\n  text-decoration: $link-decoration;\n\n  &:hover {\n    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);\n    text-decoration: $link-hover-decoration;\n  }\n}\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n  &,\n  &:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: $font-family-code;\n  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don\'t allow content to break outside\n\npre {\n  display: block;\n  margin-top: 0; // 1\n  margin-bottom: 1rem; // 2\n  overflow: auto; // 3\n  @include font-size($code-font-size);\n  color: var(--#{$prefix}pre-color, $pre-color);\n\n  // Account for some code outputs that place code tags in pre tags\n  code {\n    @include font-size(inherit);\n    color: inherit;\n    word-break: normal;\n  }\n}\n\ncode {\n  @include font-size($code-font-size);\n  color: var(--#{$prefix}code-color);\n  word-wrap: break-word;\n\n  // Streamline the style when inside anchors to avoid broken underline and more\n  a > & {\n    color: inherit;\n  }\n}\n\nkbd {\n  padding: $kbd-padding-y $kbd-padding-x;\n  @include font-size($kbd-font-size);\n  color: var(--#{$prefix}kbd-color, $kbd-color);\n  background-color: var(--#{$prefix}kbd-bg, $kbd-bg);\n  @include border-radius($border-radius-sm);\n\n  kbd {\n    padding: 0;\n    @include font-size(1em);\n    font-weight: $nested-kbd-font-weight;\n  }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n  margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n  vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n  caption-side: bottom;\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: $table-cell-padding-y;\n  padding-bottom: $table-cell-padding-y;\n  color: var(--#{$prefix}table-caption-color, $table-caption-color);\n  @include ltr-rtl("text-align", left);\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `<td>` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n  font-weight: $table-th-font-weight; // 1\n  text-align: inherit; // 2\n  text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n  display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n  // stylelint-disable-next-line property-disallowed-list\n  border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn\'t be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n  margin: 0; // 1\n  font-family: inherit;\n  @include font-size(inherit);\n  line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n  text-transform: none;\n}\n// Set the cursor for non-`<button>` buttons\n//\n// Details at https://github.com/twbs/bootstrap/pull/30562\n[role="button"] {\n  cursor: pointer;\n}\n\nselect {\n  // Remove the inheritance of word-wrap in Safari.\n  // See https://github.com/twbs/bootstrap/issues/24990\n  word-wrap: normal;\n\n  // Undo the opacity change from Chrome\n  &:disabled {\n    opacity: 1;\n  }\n}\n\n// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.\n// See https://stackoverflow.com/a/54997118\n\n[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {\n  display: none !important;\n}\n\n// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n//    controls in Android 4.\n// 2. Correct the inability to style clickable types in iOS and Safari.\n// 3. Opinionated: add "hand" cursor to non-disabled button elements.\n\nbutton,\n[type="button"], // 1\n[type="reset"],\n[type="submit"] {\n  -webkit-appearance: button; // 2\n\n  @if $enable-button-pointers {\n    &:not(:disabled) {\n      cursor: pointer; // 3\n    }\n  }\n}\n\n// Remove inner border and padding from Firefox, but don\'t restore the outline like Normalize.\n\n::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\n// 1. Textareas should really only resize vertically so they don\'t break their (horizontal) containers.\n\ntextarea {\n  resize: vertical; // 1\n}\n\n// 1. Browsers set a default `min-width: min-content;` on fieldsets,\n//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.\n//    So we reset that to ensure fieldsets behave more like a standard block element.\n//    See https://github.com/twbs/bootstrap/issues/12359\n//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements\n// 2. Reset the default outline behavior of fieldsets so they don\'t affect page layout.\n\nfieldset {\n  min-width: 0; // 1\n  padding: 0; // 2\n  margin: 0; // 2\n  border: 0; // 2\n}\n\n// 1. By using `float: left`, the legend will behave like a block element.\n//    This way the border of a fieldset wraps around the legend if present.\n// 2. Fix wrapping bug.\n//    See https://github.com/twbs/bootstrap/issues/29712\n\nlegend {\n  @include ltr-rtl("float", left); // 1\n  width: 100%;\n  padding: 0;\n  margin-bottom: $legend-margin-bottom;\n  @include font-size($legend-font-size);\n  font-weight: $legend-font-weight;\n  line-height: inherit;\n\n  + * {\n    clear: left; // 2\n  }\n}\n\n// Fix height of inputs with a type of datetime-local, date, month, week, or time\n// See https://github.com/twbs/bootstrap/issues/18842\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n  padding: 0;\n}\n\n::-webkit-inner-spin-button {\n  height: auto;\n}\n\n// 1. This overrides the extra rounded corners on search inputs in iOS so that our\n//    `.form-control` class can properly style them. Note that this cannot simply\n//    be added to `.form-control` as it\'s not specific enough. For details, see\n//    https://github.com/twbs/bootstrap/issues/11586.\n// 2. Correct the outline style in Safari.\n\n[type="search"] {\n  -webkit-appearance: textfield; // 1\n  outline-offset: -2px; // 2\n}\n\n// 1. A few input types should stay LTR\n// See https://rtlstyling.com/posts/rtl-styling#form-inputs\n\n*[dir="rtl"] {\n  [type="tel"],\n  [type="url"],\n  [type="email"],\n  [type="number"] {\n    direction: ltr;\n  }\n}\n\n\n// Remove the inner padding in Chrome and Safari on macOS.\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n// Remove padding around color pickers in webkit browsers\n\n::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n\n// 1. Inherit font family and line height for file input buttons\n// 2. Correct the inability to style clickable types in iOS and Safari.\n\n::file-selector-button {\n  font: inherit; // 1\n  -webkit-appearance: button; // 2\n}\n\n// Correct element displays\n\noutput {\n  display: inline-block;\n}\n\n// Remove border from iframe\n\niframe {\n  border: 0;\n}\n\n// Summary\n//\n// 1. Add the correct display in all browsers\n\nsummary {\n  display: list-item; // 1\n  cursor: pointer;\n}\n\n\n// Progress\n//\n// Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\nprogress {\n  vertical-align: baseline;\n}\n\n\n// Hidden attribute\n//\n// Always hide an element with the `hidden` HTML attribute.\n\n[hidden] {\n  display: none !important;\n}\n';
+const __vite_glob_0_36 = '// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n  @if $font-size-root != null {\n    @include font-size(var(--#{$prefix}root-font-size));\n  }\n\n  @if $enable-smooth-scroll {\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n  margin: 0; // 1\n  font-family: var(--#{$prefix}body-font-family);\n  @include font-size(var(--#{$prefix}body-font-size));\n  font-weight: var(--#{$prefix}body-font-weight);\n  line-height: var(--#{$prefix}body-line-height);\n  color: var(--#{$prefix}body-color);\n  text-align: var(--#{$prefix}body-text-align);\n  background-color: var(--#{$prefix}body-bg); // 2\n  -webkit-text-size-adjust: 100%; // 3\n  -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox\'s gray color\n\nhr {\n  margin: $hr-margin-y 0;\n  color: $hr-color; // 1\n  border: 0;\n  border-top: $hr-border-width solid $hr-border-color;\n  opacity: $hr-opacity;\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n//    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top\n//    margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n  margin-top: 0; // 1\n  margin-bottom: $headings-margin-bottom;\n  font-family: $headings-font-family;\n  font-style: $headings-font-style;\n  font-weight: $headings-font-weight;\n  line-height: $headings-line-height;\n  color: var(--#{$prefix}heading-color);\n}\n\nh1 {\n  @extend %heading;\n  @include font-size($h1-font-size);\n}\n\nh2 {\n  @extend %heading;\n  @include font-size($h2-font-size);\n}\n\nh3 {\n  @extend %heading;\n  @include font-size($h3-font-size);\n}\n\nh4 {\n  @extend %heading;\n  @include font-size($h4-font-size);\n}\n\nh5 {\n  @extend %heading;\n  @include font-size($h5-font-size);\n}\n\nh6 {\n  @extend %heading;\n  @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `<p>`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n  margin-top: 0;\n  margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 2. Add explicit cursor to indicate changed behavior.\n// 3. Prevent the text-decoration to be skipped.\n\nabbr[title] {\n  text-decoration: underline dotted; // 1\n  cursor: help; // 2\n  text-decoration-skip-ink: none; // 3\n}\n\n\n// Address\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\n\n// Lists\n\n// ol,\n// ul {\n//   @include ltr-rtl("padding-left", 2rem); // TODO: find solution\n// }\n\nol,\nul,\ndl {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n  margin-bottom: .5rem;\n  @include ltr-rtl("margin-left", 0); // 1\n}\n\n\n// Blockquote\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n  font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n  @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n  padding: $mark-padding;\n  color: var(--#{$prefix}highlight-color);\n  background-color: var(--#{$prefix}highlight-bg);\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n  position: relative;\n  @include font-size($sub-sup-font-size);\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));\n  text-decoration: $link-decoration;\n\n  &:hover {\n    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);\n    text-decoration: $link-hover-decoration;\n  }\n}\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n  &,\n  &:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: $font-family-code;\n  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don\'t allow content to break outside\n\npre {\n  display: block;\n  margin-top: 0; // 1\n  margin-bottom: 1rem; // 2\n  overflow: auto; // 3\n  @include font-size($code-font-size);\n  color: var(--#{$prefix}pre-color, $pre-color);\n\n  // Account for some code outputs that place code tags in pre tags\n  code {\n    @include font-size(inherit);\n    color: inherit;\n    word-break: normal;\n  }\n}\n\ncode {\n  @include font-size($code-font-size);\n  color: var(--#{$prefix}code-color);\n  word-wrap: break-word;\n\n  // Streamline the style when inside anchors to avoid broken underline and more\n  a > & {\n    color: inherit;\n  }\n}\n\nkbd {\n  padding: $kbd-padding-y $kbd-padding-x;\n  @include font-size($kbd-font-size);\n  color: var(--#{$prefix}kbd-color, $kbd-color);\n  background-color: var(--#{$prefix}kbd-bg, $kbd-bg);\n  @include border-radius($border-radius-sm);\n\n  kbd {\n    padding: 0;\n    @include font-size(1em);\n    font-weight: $nested-kbd-font-weight;\n  }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n  margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n  vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n  caption-side: bottom;\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: $table-cell-padding-y;\n  padding-bottom: $table-cell-padding-y;\n  color: var(--#{$prefix}table-caption-color, $table-caption-color);\n  @include ltr-rtl("text-align", left);\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `<td>` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n  font-weight: $table-th-font-weight; // 1\n  text-align: inherit; // 2\n  text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n  display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n  // stylelint-disable-next-line property-disallowed-list\n  border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn\'t be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n  margin: 0; // 1\n  font-family: inherit;\n  @include font-size(inherit);\n  line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n  text-transform: none;\n}\n// Set the cursor for non-`<button>` buttons\n//\n// Details at https://github.com/twbs/bootstrap/pull/30562\n[role="button"] {\n  cursor: pointer;\n}\n\nselect {\n  // Remove the inheritance of word-wrap in Safari.\n  // See https://github.com/twbs/bootstrap/issues/24990\n  word-wrap: normal;\n\n  // Undo the opacity change from Chrome\n  &:disabled {\n    opacity: 1;\n  }\n}\n\n// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.\n// See https://stackoverflow.com/a/54997118\n\n[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {\n  display: none !important;\n}\n\n// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n//    controls in Android 4.\n// 2. Correct the inability to style clickable types in iOS and Safari.\n// 3. Opinionated: add "hand" cursor to non-disabled button elements.\n\nbutton,\n[type="button"], // 1\n[type="reset"],\n[type="submit"] {\n  -webkit-appearance: button; // 2\n\n  @if $enable-button-pointers {\n    &:not(:disabled) {\n      cursor: pointer; // 3\n    }\n  }\n}\n\n// Remove inner border and padding from Firefox, but don\'t restore the outline like Normalize.\n\n::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\n// 1. Textareas should really only resize vertically so they don\'t break their (horizontal) containers.\n\ntextarea {\n  resize: vertical; // 1\n}\n\n// 1. Browsers set a default `min-width: min-content;` on fieldsets,\n//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.\n//    So we reset that to ensure fieldsets behave more like a standard block element.\n//    See https://github.com/twbs/bootstrap/issues/12359\n//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements\n// 2. Reset the default outline behavior of fieldsets so they don\'t affect page layout.\n\nfieldset {\n  min-width: 0; // 1\n  padding: 0; // 2\n  margin: 0; // 2\n  border: 0; // 2\n}\n\n// 1. By using `float: left`, the legend will behave like a block element.\n//    This way the border of a fieldset wraps around the legend if present.\n// 2. Fix wrapping bug.\n//    See https://github.com/twbs/bootstrap/issues/29712\n\nlegend {\n  @include ltr-rtl("float", left); // 1\n  width: 100%;\n  padding: 0;\n  margin-bottom: $legend-margin-bottom;\n  font-weight: $legend-font-weight;\n  line-height: inherit;\n  @include font-size($legend-font-size);\n\n  + * {\n    clear: left; // 2\n  }\n}\n\n// Fix height of inputs with a type of datetime-local, date, month, week, or time\n// See https://github.com/twbs/bootstrap/issues/18842\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n  padding: 0;\n}\n\n::-webkit-inner-spin-button {\n  height: auto;\n}\n\n// 1. This overrides the extra rounded corners on search inputs in iOS so that our\n//    `.form-control` class can properly style them. Note that this cannot simply\n//    be added to `.form-control` as it\'s not specific enough. For details, see\n//    https://github.com/twbs/bootstrap/issues/11586.\n// 2. Correct the outline style in Safari.\n\n[type="search"] {\n  -webkit-appearance: textfield; // 1\n  outline-offset: -2px; // 2\n}\n\n// 1. A few input types should stay LTR\n// See https://rtlstyling.com/posts/rtl-styling#form-inputs\n\n*[dir="rtl"] {\n  [type="tel"],\n  [type="url"],\n  [type="email"],\n  [type="number"] {\n    direction: ltr;\n  }\n}\n\n\n// Remove the inner padding in Chrome and Safari on macOS.\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n// Remove padding around color pickers in webkit browsers\n\n::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n\n// 1. Inherit font family and line height for file input buttons\n// 2. Correct the inability to style clickable types in iOS and Safari.\n\n::file-selector-button {\n  font: inherit; // 1\n  -webkit-appearance: button; // 2\n}\n\n// Correct element displays\n\noutput {\n  display: inline-block;\n}\n\n// Remove border from iframe\n\niframe {\n  border: 0;\n}\n\n// Summary\n//\n// 1. Add the correct display in all browsers\n\nsummary {\n  display: list-item; // 1\n  cursor: pointer;\n}\n\n\n// Progress\n//\n// Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\nprogress {\n  vertical-align: baseline;\n}\n\n\n// Hidden attribute\n//\n// Always hide an element with the `hidden` HTML attribute.\n\n[hidden] {\n  display: none !important;\n}\n';
 const __vite_glob_0_37 = ':root,\n[data-coreui-theme="light"] {\n  // Note: Custom variable values only support SassScript inside `#{}`.\n\n  // Colors\n  //\n  // Generate palettes for full colors, grays, and theme colors\n\n  @each $color, $value in $colors {\n    --#{$prefix}#{$color}: #{$value};\n  }\n\n  @each $color, $value in $grays {\n    --#{$prefix}gray-#{$color}: #{$value};\n  }\n\n  @each $color, $value in $theme-colors {\n    --#{$prefix}#{$color}: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-rgb {\n    --#{$prefix}#{$color}-rgb: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-text {\n    --#{$prefix}#{$color}-text-emphasis: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-bg-subtle {\n    --#{$prefix}#{$color}-bg-subtle: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-border-subtle {\n    --#{$prefix}#{$color}-border-subtle: #{$value};\n  }\n\n  --#{$prefix}white-rgb: #{to-rgb($white)};\n  --#{$prefix}black-rgb: #{to-rgb($black)};\n\n  @each $color, $value in $theme-gradients {\n    --#{$prefix}#{$color}-start: #{map-get($value, "start")};\n    --#{$prefix}#{$color}-stop: #{map-get($value, "stop")};\n  }\n\n  // Fonts\n\n  // Note: Use `inspect` for lists so that quoted items keep the quotes.\n  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};\n  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};\n  --#{$prefix}gradient: #{$gradient};\n\n  // Root and body\n  // scss-docs-start root-body-variables\n  @if $font-size-root != null {\n    --#{$prefix}root-font-size: #{$font-size-root};\n  }\n  --#{$prefix}body-font-family: #{inspect($font-family-base)};\n  @include rfs($font-size-base, --#{$prefix}body-font-size);\n  --#{$prefix}body-font-weight: #{$font-weight-base};\n  --#{$prefix}body-line-height: #{$line-height-base};\n  @if $body-text-align != null {\n    --#{$prefix}body-text-align: #{$body-text-align};\n  }\n\n  --#{$prefix}body-color: #{$body-color};\n  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};\n  --#{$prefix}body-bg: #{$body-bg};\n  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};\n\n  --#{$prefix}emphasis-color: #{$body-emphasis-color};\n  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};\n\n  --#{$prefix}secondary-color: #{$body-secondary-color};\n  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};\n  --#{$prefix}secondary-bg: #{$body-secondary-bg};\n  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};\n\n  --#{$prefix}tertiary-color: #{$body-tertiary-color};\n  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};\n  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};\n  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};\n\n  --#{$prefix}body-color-dark: #{$body-color-dark};\n  --#{$prefix}body-color-rgb-dark: #{to-rgb($body-color-dark)};\n  --#{$prefix}body-bg-dark: #{$body-bg-dark};\n  --#{$prefix}body-bg-rgb-dark: #{to-rgb($body-bg-dark)};\n\n  --#{$prefix}emphasis-color-dark: #{$body-emphasis-color-dark};\n  --#{$prefix}emphasis-color-rgb-dark: #{to-rgb($body-emphasis-color-dark)};\n\n  --#{$prefix}secondary-color-dark: #{$body-secondary-color-dark};\n  --#{$prefix}secondary-color-rgb-dark: #{to-rgb($body-secondary-color-dark)};\n  --#{$prefix}secondary-bg-dark: #{$body-secondary-bg-dark};\n  --#{$prefix}secondary-bg-rgb-dark: #{to-rgb($body-secondary-bg-dark)};\n\n  --#{$prefix}tertiary-color-dark: #{$body-tertiary-color-dark};\n  --#{$prefix}tertiary-color-rgb-dark: #{to-rgb($body-tertiary-color-dark)};\n  --#{$prefix}tertiary-bg-dark: #{$body-tertiary-bg-dark};\n  --#{$prefix}tertiary-bg-rgb-dark: #{to-rgb($body-tertiary-bg-dark)};\n\n  --#{$prefix}high-emphasis: #{$high-emphasis}; // Deprecated in v5.0.0\n  --#{$prefix}medium-emphasis: #{$medium-emphasis}; // Deprecated in v5.0.0\n  --#{$prefix}disabled: #{$disabled}; // Deprecated in v5.0.0\n\n  --#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse}; // Deprecated in v5.0.0\n  --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse}; // Deprecated in v5.0.0\n  --#{$prefix}disabled-inverse: #{$disabled-inverse}; // Deprecated in v5.0.0\n  // scss-docs-end root-body-variables\n\n  --#{$prefix}heading-color: #{$headings-color};\n\n  --#{$prefix}link-color: #{$link-color};\n  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};\n  --#{$prefix}link-decoration: #{$link-decoration};\n\n  --#{$prefix}link-hover-color: #{$link-hover-color};\n  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};\n\n  @if $link-hover-decoration != null {\n    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};\n  }\n\n  --#{$prefix}code-color: #{$code-color};\n  --#{$prefix}highlight-color: #{$mark-color};\n  --#{$prefix}highlight-bg: #{$mark-bg};\n\n  // scss-docs-start root-border-var\n  --#{$prefix}border-width: #{$border-width};\n  --#{$prefix}border-style: #{$border-style};\n  --#{$prefix}border-color: #{$border-color};\n  --#{$prefix}border-color-translucent: #{$border-color-translucent};\n\n  --#{$prefix}border-radius: #{$border-radius};\n  --#{$prefix}border-radius-sm: #{$border-radius-sm};\n  --#{$prefix}border-radius-lg: #{$border-radius-lg};\n  --#{$prefix}border-radius-xl: #{$border-radius-xl};\n  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};\n  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.0.0 for consistency\n  --#{$prefix}border-radius-pill: #{$border-radius-pill};\n  // scss-docs-end root-border-var\n\n  --#{$prefix}box-shadow: #{$box-shadow};\n  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};\n  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};\n  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};\n\n  --#{$prefix}elevation-base-color: #{$elevation-base-color}; // Deprecated in v5.0.0 for consistency\n\n  // Focus styles\n  // scss-docs-start root-focus-variables\n  --#{$prefix}focus-ring-width: #{$focus-ring-width};\n  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};\n  --#{$prefix}focus-ring-color: #{$focus-ring-color};\n  // scss-docs-end root-focus-variables\n\n  // scss-docs-start root-form-validation-variables\n  --#{$prefix}form-valid-color: #{$form-valid-color};\n  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};\n  --#{$prefix}form-invalid-color: #{$form-invalid-color};\n  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};\n  // scss-docs-end root-form-validation-variables\n}\n\n@if $enable-dark-mode {\n  @include color-mode(dark, true) {\n    color-scheme: dark;\n\n    // scss-docs-start root-dark-mode-vars\n    --#{$prefix}body-color: #{$body-color-dark};\n    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};\n    --#{$prefix}body-bg: #{$body-bg-dark};\n    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};\n\n    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};\n    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};\n\n    --#{$prefix}secondary-color: #{$body-secondary-color-dark};\n    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};\n    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};\n    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};\n\n    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};\n    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};\n    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};\n    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};\n\n    --#{$prefix}elevation-base-color: #{$elevation-base-color-dark}; // Deprecated in v5.0.0\n    --#{$prefix}high-emphasis: #{$high-emphasis-dark}; // Deprecated in v5.0.0\n    --#{$prefix}medium-emphasis: #{$medium-emphasis-dark}; // Deprecated in v5.0.0\n    --#{$prefix}disabled: #{$disabled-dark}; // Deprecated in v5.0.0\n\n    @each $color, $value in $theme-colors-dark {\n      --#{$prefix}#{$color}: #{$value};\n    }\n\n    @each $color, $value in $grays-dark {\n      --#{$prefix}gray-#{$color}: #{$value};\n    }\n\n    @each $color, $value in $theme-colors-rgb-dark {\n      --#{$prefix}#{$color}-rgb: #{$value};\n    }\n\n    @each $color, $value in $theme-colors-text-dark {\n      --#{$prefix}#{$color}-text-emphasis: #{$value};\n    }\n\n    @each $color, $value in $theme-colors-bg-subtle-dark {\n      --#{$prefix}#{$color}-bg-subtle: #{$value};\n    }\n\n    @each $color, $value in $theme-colors-border-subtle-dark {\n      --#{$prefix}#{$color}-border-subtle: #{$value};\n    }\n\n    @each $color, $value in $theme-gradients-dark {\n      --#{$prefix}#{$color}-start: #{map-get($value, "start")};\n      --#{$prefix}#{$color}-stop: #{map-get($value, "stop")};\n    }\n\n    --#{$prefix}heading-color: #{$headings-color-dark};\n\n    --#{$prefix}link-color: #{$link-color-dark};\n    --#{$prefix}link-hover-color: #{$link-hover-color-dark};\n    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};\n    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};\n\n    --#{$prefix}code-color: #{$code-color-dark};\n    --#{$prefix}highlight-color: #{$mark-color-dark};\n    --#{$prefix}highlight-bg: #{$mark-bg-dark};\n\n    --#{$prefix}border-color: #{$border-color-dark};\n    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};\n\n    --#{$prefix}form-valid-color: #{$form-valid-color-dark};\n    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};\n    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};\n    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};\n    // scss-docs-end root-dark-mode-vars\n  }\n}\n';
 const __vite_glob_0_38 = '@import "sidebar/sidebar";\n@import "sidebar/sidebar-nav";\n@import "sidebar/sidebar-narrow";\n';
 const __vite_glob_0_39 = '//\n// Rotating border\n//\n\n.spinner-grow,\n.spinner-border {\n  display: inline-block;\n  width: var(--#{$prefix}spinner-width);\n  height: var(--#{$prefix}spinner-height);\n  vertical-align: var(--#{$prefix}spinner-vertical-align);\n  // stylelint-disable-next-line property-disallowed-list\n  border-radius: 50%;\n  animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);\n}\n\n// scss-docs-start spinner-border-keyframes\n@keyframes spinner-border {\n  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }\n}\n// scss-docs-end spinner-border-keyframes\n\n.spinner-border {\n  // scss-docs-start spinner-border-css-vars\n  --#{$prefix}spinner-width: #{$spinner-width};\n  --#{$prefix}spinner-height: #{$spinner-height};\n  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};\n  --#{$prefix}spinner-border-width: #{$spinner-border-width};\n  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};\n  --#{$prefix}spinner-animation-name: spinner-border;\n  // scss-docs-end spinner-border-css-vars\n\n  border: var(--#{$prefix}spinner-border-width) solid currentcolor;\n  border-right-color: transparent;\n}\n\n.spinner-border-sm {\n  // scss-docs-start spinner-border-sm-css-vars\n  --#{$prefix}spinner-width: #{$spinner-width-sm};\n  --#{$prefix}spinner-height: #{$spinner-height-sm};\n  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};\n  // scss-docs-end spinner-border-sm-css-vars\n}\n\n//\n// Growing circle\n//\n\n// scss-docs-start spinner-grow-keyframes\n@keyframes spinner-grow {\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    opacity: 1;\n    transform: none;\n  }\n}\n// scss-docs-end spinner-grow-keyframes\n\n.spinner-grow {\n  // scss-docs-start spinner-grow-css-vars\n  --#{$prefix}spinner-width: #{$spinner-width};\n  --#{$prefix}spinner-height: #{$spinner-height};\n  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};\n  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};\n  --#{$prefix}spinner-animation-name: spinner-grow;\n  // scss-docs-end spinner-grow-css-vars\n\n  background-color: currentcolor;\n  opacity: 0;\n}\n\n.spinner-grow-sm {\n  --#{$prefix}spinner-width: #{$spinner-width-sm};\n  --#{$prefix}spinner-height: #{$spinner-height-sm};\n}\n\n@if $enable-reduced-motion {\n  @media (prefers-reduced-motion: reduce) {\n    .spinner-border,\n    .spinner-grow {\n      --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};\n    }\n  }\n}\n';
@@ -918,7 +918,7 @@ const __vite_glob_0_41 = '.time-picker {\n  // scss-docs-start time-picker-css-v
 const __vite_glob_0_42 = '.toast {\n  // scss-docs-start toast-css-vars\n  --#{$prefix}toast-zindex: #{$zindex-toast};\n  --#{$prefix}toast-padding-x: #{$toast-padding-x};\n  --#{$prefix}toast-padding-y: #{$toast-padding-y};\n  --#{$prefix}toast-spacing: #{$toast-spacing};\n  --#{$prefix}toast-max-width: #{$toast-max-width};\n  @include rfs($toast-font-size, --#{$prefix}toast-font-size);\n  --#{$prefix}toast-color: #{$toast-color};\n  --#{$prefix}toast-bg: #{$toast-background-color};\n  --#{$prefix}toast-border-width: #{$toast-border-width};\n  --#{$prefix}toast-border-color: #{$toast-border-color};\n  --#{$prefix}toast-border-radius: #{$toast-border-radius};\n  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};\n  --#{$prefix}toast-header-color: #{$toast-header-color};\n  --#{$prefix}toast-header-bg: #{$toast-header-background-color};\n  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};\n  // scss-docs-end toast-css-vars\n\n  width: var(--#{$prefix}toast-max-width);\n  max-width: 100%;\n  @include font-size(var(--#{$prefix}toast-font-size));\n  color: var(--#{$prefix}toast-color);\n  pointer-events: auto;\n  background-color: var(--#{$prefix}toast-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);\n  box-shadow: var(--#{$prefix}toast-box-shadow);\n  @include border-radius(var(--#{$prefix}toast-border-radius));\n\n  &.showing {\n    opacity: 0;\n  }\n\n  &:not(.show) {\n    display: none;\n  }\n}\n\n.toast-container {\n  --#{$prefix}toast-zindex: #{$zindex-toast};\n\n  position: absolute;\n  z-index: var(--#{$prefix}toast-zindex);\n  width: max-content;\n  max-width: 100%;\n  pointer-events: none;\n\n  > :not(:last-child) {\n    margin-bottom: var(--#{$prefix}toast-spacing);\n  }\n}\n\n.toast-header {\n  display: flex;\n  align-items: center;\n  padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);\n  color: var(--#{$prefix}toast-header-color);\n  background-color: var(--#{$prefix}toast-header-bg);\n  background-clip: padding-box;\n  border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);\n  @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));\n\n  .btn-close {\n    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}toast-padding-x)));\n    @include ltr-rtl("margin-left", var(--#{$prefix}toast-padding-x));\n  }\n}\n\n.toast-body {\n  padding: var(--#{$prefix}toast-padding-x);\n  word-wrap: break-word;\n}\n';
 const __vite_glob_0_43 = '// Base class\n.tooltip {\n  // scss-docs-start tooltip-css-vars\n  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};\n  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};\n  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};\n  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};\n  --#{$prefix}tooltip-margin: #{$tooltip-margin};\n  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);\n  --#{$prefix}tooltip-color: #{$tooltip-color};\n  --#{$prefix}tooltip-bg: #{$tooltip-bg};\n  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};\n  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};\n  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};\n  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};\n  // scss-docs-end tooltip-css-vars\n\n  z-index: var(--#{$prefix}tooltip-zindex);\n  display: block;\n  margin: var(--#{$prefix}tooltip-margin);\n  @include deprecate("`$tooltip-margin`", "v4", "v4.x", true);\n  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n  // So reset our font and text properties to avoid inheriting weird values.\n  @include reset-text();\n  @include font-size(var(--#{$prefix}tooltip-font-size));\n  // Allow breaking very long words so they don\'t overflow the tooltip\'s bounds\n  word-wrap: break-word;\n  opacity: 0;\n\n  &.show { opacity: var(--#{$prefix}tooltip-opacity); }\n\n  .tooltip-arrow {\n    display: block;\n    width: var(--#{$prefix}tooltip-arrow-width);\n    height: var(--#{$prefix}tooltip-arrow-height);\n\n    &::before {\n      position: absolute;\n      content: "";\n      border-color: transparent;\n      border-style: solid;\n    }\n  }\n}\n\n.bs-tooltip-top .tooltip-arrow {\n  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n\n  &::before {\n    top: -1px;\n    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list\n    border-top-color: var(--#{$prefix}tooltip-bg);\n  }\n}\n\n/* rtl:begin:ignore */\n.bs-tooltip-end .tooltip-arrow {\n  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n  width: var(--#{$prefix}tooltip-arrow-height);\n  height: var(--#{$prefix}tooltip-arrow-width);\n\n  &::before {\n    right: -1px;\n    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list\n    border-right-color: var(--#{$prefix}tooltip-bg);\n  }\n}\n\n/* rtl:end:ignore */\n\n.bs-tooltip-bottom .tooltip-arrow {\n  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n\n  &::before {\n    bottom: -1px;\n    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list\n    border-bottom-color: var(--#{$prefix}tooltip-bg);\n  }\n}\n\n/* rtl:begin:ignore */\n.bs-tooltip-start .tooltip-arrow {\n  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n  width: var(--#{$prefix}tooltip-arrow-height);\n  height: var(--#{$prefix}tooltip-arrow-width);\n\n  &::before {\n    left: -1px;\n    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list\n    border-left-color: var(--#{$prefix}tooltip-bg);\n  }\n}\n\n/* rtl:end:ignore */\n\n.bs-tooltip-auto {\n  &[data-popper-placement^="top"] {\n    @extend .bs-tooltip-top;\n  }\n  &[data-popper-placement^="right"] {\n    @extend .bs-tooltip-end;\n  }\n  &[data-popper-placement^="bottom"] {\n    @extend .bs-tooltip-bottom;\n  }\n  &[data-popper-placement^="left"] {\n    @extend .bs-tooltip-start;\n  }\n}\n\n// Wrapper for the tooltip content\n.tooltip-inner {\n  max-width: var(--#{$prefix}tooltip-max-width);\n  padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);\n  color: var(--#{$prefix}tooltip-color);\n  text-align: center;\n  background-color: var(--#{$prefix}tooltip-bg);\n  @include border-radius(var(--#{$prefix}tooltip-border-radius));\n}\n';
 const __vite_glob_0_44 = ".fade {\n  @include transition($transition-fade);\n\n  &:not(.show) {\n    opacity: 0;\n  }\n}\n\n// scss-docs-start collapse-classes\n.collapse {\n  &:not(.show) {\n    display: none;\n  }\n}\n\n.collapsing {\n  height: 0;\n  overflow: hidden;\n  @include transition($transition-collapse);\n\n  &.collapse-horizontal {\n    width: 0;\n    height: auto;\n    @include transition($transition-collapse-width);\n  }\n}\n// scss-docs-end collapse-classes\n";
-const __vite_glob_0_45 = '//\n// Headings\n//\n.h1 {\n  @extend h1;\n}\n\n.h2 {\n  @extend h2;\n}\n\n.h3 {\n  @extend h3;\n}\n\n.h4 {\n  @extend h4;\n}\n\n.h5 {\n  @extend h5;\n}\n\n.h6 {\n  @extend h6;\n}\n\n\n.lead {\n  @include font-size($lead-font-size);\n  font-weight: $lead-font-weight;\n}\n\n// Type display classes\n@each $display, $font-size in $display-font-sizes {\n  .display-#{$display} {\n    @include font-size($font-size);\n    font-family: $display-font-family;\n    font-style: $display-font-style;\n    font-weight: $display-font-weight;\n    line-height: $display-line-height;\n  }\n}\n\n//\n// Emphasis\n//\n.small {\n  @extend small;\n}\n\n.mark {\n  @extend mark;\n}\n\n//\n// Lists\n//\n\n.list-unstyled {\n  @include list-unstyled();\n}\n\n// Inline turns list items into inline-block\n.list-inline {\n  @include list-unstyled();\n}\n.list-inline-item {\n  display: inline-block;\n\n  &:not(:last-child) {\n    @include ltr-rtl("margin-right", $list-inline-padding);\n  }\n}\n\n\n//\n// Misc\n//\n\n// Builds on `abbr`\n.initialism {\n  @include font-size($initialism-font-size);\n  text-transform: uppercase;\n}\n\n// Blockquotes\n.blockquote {\n  margin-bottom: $blockquote-margin-y;\n  @include font-size($blockquote-font-size);\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n}\n\n.blockquote-footer {\n  margin-top: -$blockquote-margin-y;\n  margin-bottom: $blockquote-margin-y;\n  @include font-size($blockquote-footer-font-size);\n  color: $blockquote-footer-color;\n\n  &::before {\n    content: "\\2014\\00A0"; // em dash, nbsp\n  }\n}\n';
+const __vite_glob_0_45 = '//\n// Headings\n//\n.h1 {\n  @extend h1;\n}\n\n.h2 {\n  @extend h2;\n}\n\n.h3 {\n  @extend h3;\n}\n\n.h4 {\n  @extend h4;\n}\n\n.h5 {\n  @extend h5;\n}\n\n.h6 {\n  @extend h6;\n}\n\n\n.lead {\n  @include font-size($lead-font-size);\n  font-weight: $lead-font-weight;\n}\n\n// Type display classes\n@each $display, $font-size in $display-font-sizes {\n  .display-#{$display} {\n    font-family: $display-font-family;\n    font-style: $display-font-style;\n    font-weight: $display-font-weight;\n    line-height: $display-line-height;\n    @include font-size($font-size);\n  }\n}\n\n//\n// Emphasis\n//\n.small {\n  @extend small;\n}\n\n.mark {\n  @extend mark;\n}\n\n//\n// Lists\n//\n\n.list-unstyled {\n  @include list-unstyled();\n}\n\n// Inline turns list items into inline-block\n.list-inline {\n  @include list-unstyled();\n}\n.list-inline-item {\n  display: inline-block;\n\n  &:not(:last-child) {\n    @include ltr-rtl("margin-right", $list-inline-padding);\n  }\n}\n\n\n//\n// Misc\n//\n\n// Builds on `abbr`\n.initialism {\n  @include font-size($initialism-font-size);\n  text-transform: uppercase;\n}\n\n// Blockquotes\n.blockquote {\n  margin-bottom: $blockquote-margin-y;\n  @include font-size($blockquote-font-size);\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n}\n\n.blockquote-footer {\n  margin-top: -$blockquote-margin-y;\n  margin-bottom: $blockquote-margin-y;\n  @include font-size($blockquote-footer-font-size);\n  color: $blockquote-footer-color;\n\n  &::before {\n    content: "\\2014\\00A0"; // em dash, nbsp\n  }\n}\n';
 const __vite_glob_0_46 = '// Utilities\n\n$utilities: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$utilities: map-merge(\n  (\n    // scss-docs-start utils-vertical-align\n    "align": (\n      property: vertical-align,\n      class: align,\n      values: baseline top middle bottom text-bottom text-top\n    ),\n    // scss-docs-end utils-vertical-align\n    // scss-docs-start utils-float\n    "float": (\n      responsive: true,\n      property: float,\n      values: (\n        start: left,\n        end: right,\n        none: none,\n      ),\n      rtl: true\n    ),\n    // scss-docs-end utils-float\n    // Object Fit utilities\n    // scss-docs-start utils-object-fit\n    "object-fit": (\n      responsive: true,\n      property: object-fit,\n      values: (\n        contain: contain,\n        cover: cover,\n        fill: fill,\n        scale: scale-down,\n        none: none,\n      )\n    ),\n    // scss-docs-end utils-object-fit\n    // Opacity utilities\n    // scss-docs-start utils-opacity\n    "opacity": (\n      property: opacity,\n      values: (\n        0: 0,\n        25: .25,\n        50: .5,\n        75: .75,\n        100: 1,\n      )\n    ),\n    // scss-docs-end utils-opacity\n    // scss-docs-start utils-overflow\n    "overflow": (\n      property: overflow,\n      values: auto hidden visible scroll,\n    ),\n    "overflow-x": (\n      property: overflow-x,\n      values: auto hidden visible scroll,\n    ),\n    "overflow-y": (\n      property: overflow-y,\n      values: auto hidden visible scroll,\n    ),\n    // scss-docs-end utils-overflow\n    // scss-docs-start utils-display\n    "display": (\n      responsive: true,\n      print: true,\n      property: display,\n      class: d,\n      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none\n    ),\n    // scss-docs-end utils-display\n    // scss-docs-start utils-shadow\n    "shadow": (\n      property: box-shadow,\n      class: shadow,\n      values: (\n        null: var(--#{$prefix}box-shadow),\n        sm: var(--#{$prefix}box-shadow-sm),\n        lg: var(--#{$prefix}box-shadow-lg),\n        none: none,\n      )\n    ),\n    // scss-docs-end utils-shadow\n    // scss-docs-start utils-elevation\n    "elevation": (\n      property: box-shadow,\n      class: elevation,\n      values: $elevations\n    ),\n    // scss-docs-end utils-elevation\n    // scss-docs-start utils-focus-ring\n    "focus-ring": (\n      css-var: true,\n      css-variable-name: focus-ring-color,\n      class: focus-ring,\n      values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")\n    ),\n    // scss-docs-end utils-focus-ring\n    // scss-docs-start utils-position\n    "position": (\n      property: position,\n      values: static relative absolute fixed sticky\n    ),\n    "top": (\n      property: top,\n      values: $position-values\n    ),\n    "bottom": (\n      property: bottom,\n      values: $position-values\n    ),\n    "start": (\n      property: left,\n      class: start,\n      values: $position-values,\n      rtl: true\n    ),\n    "end": (\n      property: right,\n      class: end,\n      values: $position-values,\n      rtl: true\n    ),\n    "translate-middle": (\n      property: transform,\n      class: translate-middle,\n      values: (\n        null: ("ltr": translate(-50%, -50%), "rtl": translate(50%, -50%)),\n        x: ("ltr": translateX(-50%), "rtl": translateX(50%)),\n        y: translateY(-50%),\n      ),\n      rtl: true\n    ),\n    // scss-docs-end utils-position\n    // scss-docs-start utils-borders\n    "border": (\n      property: border,\n      values: (\n        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),\n        0: 0,\n      ),\n    ),\n    "border-top": (\n      property: border-top,\n      values: (\n        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),\n        0: 0,\n      )\n    ),\n    "border-end": (\n      property: border-right,\n      class: border-end,\n      values: (\n        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),\n        0: 0,\n      ),\n      rtl: true\n    ),\n    "border-bottom": (\n      property: border-bottom,\n      values: (\n        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),\n        0: 0,\n      )\n    ),\n    "border-start": (\n      property: border-left,\n      class: border-start,\n      values: (\n        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),\n        0: 0,\n      ),\n      rtl: true\n    ),\n    "border-color": (\n      property: border-color,\n      class: border,\n      local-vars: (\n        "border-opacity": 1\n      ),\n      values: $utilities-border-colors\n    ),\n    "border-top-color": (\n      property: border-top-color,\n      class: border-top,\n      values: map-merge($theme-colors, ("white": $white)),\n      vars: true\n    ),\n    "border-end-color": (\n      property: border-right-color,\n      class: border-end,\n      values: map-merge($theme-colors, ("white": $white)),\n      vars: true,\n      rtl: true\n    ),\n    "border-bottom-color": (\n      property: border-bottom-color,\n      class: border-bottom,\n      values: map-merge($theme-colors, ("white": $white)),\n      vars: true\n    ),\n    "border-start-color": (\n      property: border-left-color,\n      class: border-start,\n      values: map-merge($theme-colors, ("white": $white)),\n      vars: true,\n      rtl: true\n    ),\n    "border-width": (\n      property: border-width,\n      class: border,\n      values: $border-widths\n    ),\n    "border-top-width": (\n      property: border-top-width,\n      class: border-top,\n      values: $border-widths\n    ),\n    "border-end-width": (\n      property: border-right-width,\n      class: border-end,\n      values: $border-widths,\n      rtl: true\n    ),\n    "border-bottom-width": (\n      property: border-bottom-width,\n      class: border-bottom,\n      values: $border-widths\n    ),\n    "border-start-width": (\n      property: border-left-width,\n      class: border-start,\n      values: $border-widths,\n      rtl: true\n    ),\n    "subtle-border-color": (\n      property: border-color,\n      class: border,\n      values: $utilities-border-subtle\n    ),\n    "border-opacity": (\n      css-var: true,\n      class: border-opacity,\n      values: (\n        10: .1,\n        25: .25,\n        50: .5,\n        75: .75,\n        100: 1\n      )\n    ),\n    // scss-docs-end utils-borders\n    // Sizing utilities\n    // scss-docs-start utils-sizing\n    "width": (\n      property: width,\n      class: w,\n      values: (\n        25: 25%,\n        50: 50%,\n        75: 75%,\n        100: 100%,\n        auto: auto\n      )\n    ),\n    "max-width": (\n      property: max-width,\n      class: mw,\n      values: (100: 100%)\n    ),\n    "viewport-width": (\n      property: width,\n      class: vw,\n      values: (100: 100vw)\n    ),\n    "min-viewport-width": (\n      property: min-width,\n      class: min-vw,\n      values: (100: 100vw)\n    ),\n    "height": (\n      property: height,\n      class: h,\n      values: (\n        25: 25%,\n        50: 50%,\n        75: 75%,\n        100: 100%,\n        auto: auto\n      )\n    ),\n    "max-height": (\n      property: max-height,\n      class: mh,\n      values: (100: 100%)\n    ),\n    "viewport-height": (\n      property: height,\n      class: vh,\n      values: (100: 100vh)\n    ),\n    "min-viewport-height": (\n      property: min-height,\n      class: min-vh,\n      values: (100: 100vh)\n    ),\n    // scss-docs-end utils-sizing\n    // Flex utilities\n    // scss-docs-start utils-flex\n    "flex": (\n      responsive: true,\n      property: flex,\n      values: (fill: 1 1 auto)\n    ),\n    "flex-direction": (\n      responsive: true,\n      property: flex-direction,\n      class: flex,\n      values: row column row-reverse column-reverse\n    ),\n    "flex-grow": (\n      responsive: true,\n      property: flex-grow,\n      class: flex,\n      values: (\n        grow-0: 0,\n        grow-1: 1,\n      )\n    ),\n    "flex-shrink": (\n      responsive: true,\n      property: flex-shrink,\n      class: flex,\n      values: (\n        shrink-0: 0,\n        shrink-1: 1,\n      )\n    ),\n    "flex-wrap": (\n      responsive: true,\n      property: flex-wrap,\n      class: flex,\n      values: wrap nowrap wrap-reverse\n    ),\n    "justify-content": (\n      responsive: true,\n      property: justify-content,\n      values: (\n        start: flex-start,\n        end: flex-end,\n        center: center,\n        between: space-between,\n        around: space-around,\n        evenly: space-evenly,\n      )\n    ),\n    "align-items": (\n      responsive: true,\n      property: align-items,\n      values: (\n        start: flex-start,\n        end: flex-end,\n        center: center,\n        baseline: baseline,\n        stretch: stretch,\n      )\n    ),\n    "align-content": (\n      responsive: true,\n      property: align-content,\n      values: (\n        start: flex-start,\n        end: flex-end,\n        center: center,\n        between: space-between,\n        around: space-around,\n        stretch: stretch,\n      )\n    ),\n    "align-self": (\n      responsive: true,\n      property: align-self,\n      values: (\n        auto: auto,\n        start: flex-start,\n        end: flex-end,\n        center: center,\n        baseline: baseline,\n        stretch: stretch,\n      )\n    ),\n    "order": (\n      responsive: true,\n      property: order,\n      values: (\n        first: -1,\n        0: 0,\n        1: 1,\n        2: 2,\n        3: 3,\n        4: 4,\n        5: 5,\n        last: 6,\n      ),\n    ),\n    // scss-docs-end utils-flex\n    // Margin utilities\n    // scss-docs-start utils-spacing\n    "margin": (\n      responsive: true,\n      property: margin,\n      class: m,\n      values: map-merge($spacers, (auto: auto))\n    ),\n    "margin-x": (\n      responsive: true,\n      property: margin-right margin-left,\n      class: mx,\n      values: map-merge($spacers, (auto: auto))\n    ),\n    "margin-y": (\n      responsive: true,\n      property: margin-top margin-bottom,\n      class: my,\n      values: map-merge($spacers, (auto: auto))\n    ),\n    "margin-top": (\n      responsive: true,\n      property: margin-top,\n      class: mt,\n      values: map-merge($spacers, (auto: auto))\n    ),\n    "margin-end": (\n      responsive: true,\n      property: margin-right,\n      class: me,\n      values: map-merge($spacers, (auto: auto)),\n      rtl: true\n    ),\n    "margin-bottom": (\n      responsive: true,\n      property: margin-bottom,\n      class: mb,\n      values: map-merge($spacers, (auto: auto))\n    ),\n    "margin-start": (\n      responsive: true,\n      property: margin-left,\n      class: ms,\n      values: map-merge($spacers, (auto: auto)),\n      rtl: true\n    ),\n    // Negative margin utilities\n    "negative-margin": (\n      responsive: true,\n      property: margin,\n      class: m,\n      values: $negative-spacers\n    ),\n    "negative-margin-x": (\n      responsive: true,\n      property: margin-right margin-left,\n      class: mx,\n      values: $negative-spacers\n    ),\n    "negative-margin-y": (\n      responsive: true,\n      property: margin-top margin-bottom,\n      class: my,\n      values: $negative-spacers\n    ),\n    "negative-margin-top": (\n      responsive: true,\n      property: margin-top,\n      class: mt,\n      values: $negative-spacers\n    ),\n    "negative-margin-end": (\n      responsive: true,\n      property: margin-right,\n      class: me,\n      values: $negative-spacers,\n      rtl: true\n    ),\n    "negative-margin-bottom": (\n      responsive: true,\n      property: margin-bottom,\n      class: mb,\n      values: $negative-spacers\n    ),\n    "negative-margin-start": (\n      responsive: true,\n      property: margin-left,\n      class: ms,\n      values: $negative-spacers,\n      rtl: true\n    ),\n    // Padding utilities\n    "padding": (\n      responsive: true,\n      property: padding,\n      class: p,\n      values: $spacers\n    ),\n    "padding-x": (\n      responsive: true,\n      property: padding-right padding-left,\n      class: px,\n      values: $spacers\n    ),\n    "padding-y": (\n      responsive: true,\n      property: padding-top padding-bottom,\n      class: py,\n      values: $spacers\n    ),\n    "padding-top": (\n      responsive: true,\n      property: padding-top,\n      class: pt,\n      values: $spacers\n    ),\n    "padding-end": (\n      responsive: true,\n      property: padding-right,\n      class: pe,\n      values: $spacers,\n      rtl: true\n    ),\n    "padding-bottom": (\n      responsive: true,\n      property: padding-bottom,\n      class: pb,\n      values: $spacers\n    ),\n    "padding-start": (\n      responsive: true,\n      property: padding-left,\n      class: ps,\n      values: $spacers,\n      rtl: true\n    ),\n    // Gap utility\n    "gap": (\n      responsive: true,\n      property: gap,\n      class: gap,\n      values: $spacers\n    ),\n    "row-gap": (\n      responsive: true,\n      property: row-gap,\n      class: row-gap,\n      values: $spacers\n    ),\n    "column-gap": (\n      responsive: true,\n      property: column-gap,\n      class: column-gap,\n      values: $spacers\n    ),\n    // scss-docs-end utils-spacing\n    // Text\n    // scss-docs-start utils-text\n    "font-family": (\n      property: font-family,\n      class: font,\n      values: (monospace: var(--#{$prefix}font-monospace))\n    ),\n    "font-size": (\n      rfs: true,\n      property: font-size,\n      class: fs,\n      values: $font-sizes\n    ),\n    "font-style": (\n      property: font-style,\n      class: fst,\n      values: italic normal\n    ),\n    "font-weight": (\n      property: font-weight,\n      class: fw,\n      values: (\n        lighter: $font-weight-lighter,\n        light: $font-weight-light,\n        normal: $font-weight-normal,\n        medium: $font-weight-medium,\n        semibold: $font-weight-semibold,\n        bold: $font-weight-bold,\n        bolder: $font-weight-bolder\n      )\n    ),\n    "line-height": (\n      property: line-height,\n      class: lh,\n      values: (\n        1: 1,\n        sm: $line-height-sm,\n        base: $line-height-base,\n        lg: $line-height-lg,\n      )\n    ),\n    "text-align": (\n      responsive: true,\n      property: text-align,\n      class: text,\n      values: (\n        start: left,\n        end: right,\n        center: center,\n      ),\n      rtl: true\n    ),\n    "text-decoration": (\n      property: text-decoration,\n      values: none underline line-through\n    ),\n    "text-transform": (\n      property: text-transform,\n      class: text,\n      values: lowercase uppercase capitalize\n    ),\n    "white-space": (\n      property: white-space,\n      class: text,\n      values: (\n        wrap: normal,\n        nowrap: nowrap,\n      )\n    ),\n    "word-wrap": (\n      property: word-wrap word-break,\n      class: text,\n      values: (break: break-word),\n      rtl: false\n    ),\n    // scss-docs-end utils-text\n    // scss-docs-start utils-color\n    "color": (\n      property: color,\n      class: text,\n      dark-mode: true,\n      local-vars: (\n        "text-opacity": 1\n      ),\n      values: map-merge(\n        $utilities-text-colors,\n        (\n          "muted": var(--#{$prefix}secondary-color), // deprecated\n          "black-50": rgba($black, .5), // deprecated\n          "white-50": rgba($white, .5), // deprecated\n          "body-secondary": var(--#{$prefix}secondary-color),\n          "body-tertiary": var(--#{$prefix}tertiary-color),\n          "body-emphasis": var(--#{$prefix}emphasis-color),\n          "reset": inherit,\n          "high-emphasis-inverse": var(--#{$prefix}high-emphasis-inverse), // deprecated\n          "medium-emphasis-inverse": var(--#{$prefix}medium-emphasis-inverse), // deprecated\n          "disabled-inverse": var(--#{$prefix}disabled-inverse), // deprecated\n          "high-emphasis": var(--#{$prefix}high-emphasis), // deprecated\n          "medium-emphasis": var(--#{$prefix}medium-emphasis), // deprecated\n          "disabled": var(--#{$prefix}disabled)\n        )\n      )\n    ),\n    "text-opacity": (\n      css-var: true,\n      class: text-opacity,\n      values: (\n        25: .25,\n        50: .5,\n        75: .75,\n        100: 1\n      )\n    ),\n    "text-color": (\n      property: color,\n      class: text,\n      values: $utilities-text-emphasis-colors\n    ),\n    // scss-docs-end utils-color\n    // scss-docs-start utils-links\n    "link-opacity": (\n      css-var: true,\n      class: link-opacity,\n      state: hover,\n      values: (\n        10: .1,\n        25: .25,\n        50: .5,\n        75: .75,\n        100: 1\n      )\n    ),\n    "link-offset": (\n      property: text-underline-offset,\n      class: link-offset,\n      state: hover,\n      values: (\n        1: .125em,\n        2: .25em,\n        3: .375em,\n      )\n    ),\n    "link-underline": (\n      property: text-decoration-color,\n      class: link-underline,\n      local-vars: (\n        "link-underline-opacity": 1\n      ),\n      values: map-merge(\n        $utilities-links-underline,\n        (\n          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),\n        )\n      )\n    ),\n    "link-underline-opacity": (\n      css-var: true,\n      class: link-underline-opacity,\n      state: hover,\n      values: (\n        0: 0,\n        10: .1,\n        25: .25,\n        50: .5,\n        75: .75,\n        100: 1\n      ),\n    ),\n    // scss-docs-end utils-links\n    // scss-docs-start utils-bg-color\n    "background-color": (\n      property: background-color,\n      class: bg,\n      dark-mode: true,\n      local-vars: (\n        "bg-opacity": 1\n      ),\n      values: map-merge(\n        $utilities-bg-colors,\n        (\n          "transparent": transparent,\n          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),\n          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),\n        )\n      )\n    ),\n    "bg-opacity": (\n      css-var: true,\n      class: bg-opacity,\n      values: (\n        10: .1,\n        15: .15,\n        25: .25,\n        50: .5,\n        75: .75,\n        100: 1\n      )\n    ),\n    "subtle-background-color": (\n      property: background-color,\n      class: bg,\n      dark-mode: true,\n      values: $utilities-bg-subtle\n    ),\n    // scss-docs-end utils-bg-color\n    "gradient": (\n      property: background-image,\n      class: bg,\n      values: (gradient: var(--#{$prefix}gradient))\n    ),\n    // scss-docs-start utils-interaction\n    "user-select": (\n      property: user-select,\n      values: all auto none\n    ),\n    "pointer-events": (\n      property: pointer-events,\n      class: pe,\n      values: none auto,\n    ),\n    // scss-docs-end utils-interaction\n    // scss-docs-start utils-border-radius\n    "rounded": (\n      property: border-radius,\n      class: rounded,\n      values: (\n        null: var(--#{$prefix}border-radius),\n        0: 0,\n        1: var(--#{$prefix}border-radius-sm),\n        2: var(--#{$prefix}border-radius),\n        3: var(--#{$prefix}border-radius-lg),\n        4: var(--#{$prefix}border-radius-xl),\n        5: var(--#{$prefix}border-radius-xxl),\n        circle: 50%,\n        pill: var(--#{$prefix}border-radius-pill)\n      )\n    ),\n    "rounded-top": (\n      property: border-top-left-radius border-top-right-radius,\n      class: rounded-top,\n      values: (\n        null: var(--#{$prefix}border-radius),\n        0: 0,\n        1: var(--#{$prefix}border-radius-sm),\n        2: var(--#{$prefix}border-radius),\n        3: var(--#{$prefix}border-radius-lg),\n        4: var(--#{$prefix}border-radius-xl),\n        5: var(--#{$prefix}border-radius-xxl),\n        circle: 50%,\n        pill: var(--#{$prefix}border-radius-pill)\n      )\n    ),\n    "rounded-end": (\n      property: border-top-right-radius border-bottom-right-radius,\n      class: rounded-end,\n      values: (\n        null: var(--#{$prefix}border-radius),\n        0: 0,\n        1: var(--#{$prefix}border-radius-sm),\n        2: var(--#{$prefix}border-radius),\n        3: var(--#{$prefix}border-radius-lg),\n        4: var(--#{$prefix}border-radius-xl),\n        5: var(--#{$prefix}border-radius-xxl),\n        circle: 50%,\n        pill: var(--#{$prefix}border-radius-pill)\n      ),\n      rtl: true\n    ),\n    "rounded-bottom": (\n      property: border-bottom-right-radius border-bottom-left-radius,\n      class: rounded-bottom,\n      values: (\n        null: var(--#{$prefix}border-radius),\n        0: 0,\n        1: var(--#{$prefix}border-radius-sm),\n        2: var(--#{$prefix}border-radius),\n        3: var(--#{$prefix}border-radius-lg),\n        4: var(--#{$prefix}border-radius-xl),\n        5: var(--#{$prefix}border-radius-xxl),\n        circle: 50%,\n        pill: var(--#{$prefix}border-radius-pill)\n      )\n    ),\n    "rounded-start": (\n      property: border-bottom-left-radius border-top-left-radius,\n      class: rounded-start,\n      values: (\n        null: var(--#{$prefix}border-radius),\n        0: 0,\n        1: var(--#{$prefix}border-radius-sm),\n        2: var(--#{$prefix}border-radius),\n        3: var(--#{$prefix}border-radius-lg),\n        4: var(--#{$prefix}border-radius-xl),\n        5: var(--#{$prefix}border-radius-xxl),\n        circle: 50%,\n        pill: var(--#{$prefix}border-radius-pill)\n      ),\n      rtl: true\n    ),\n    // scss-docs-end utils-border-radius\n    // scss-docs-start utils-visibility\n    "visibility": (\n      property: visibility,\n      class: null,\n      values: (\n        visible: visible,\n        invisible: hidden,\n      )\n    ),\n    // scss-docs-end utils-visibility\n    // scss-docs-start utils-zindex\n    "z-index": (\n      property: z-index,\n      class: z,\n      values: $zindex-levels,\n    )\n    // scss-docs-end utils-zindex\n  ),\n  $utilities\n);\n';
 const __vite_glob_0_47 = `// Dark color mode variables
 //
@@ -2981,17 +2981,56 @@ $modal-scale-transform:             scale(1.02) !default;
 
 // Avatars
 // scss-docs-start avatar-variables
-$avatar-width:  2rem !default;
+$avatar-width:                 2rem !default;
+$avatar-height:                2rem !default;
+$avatar-font-size:             .8rem !default;
+$avatar-border-radius:         50em !default;
+$avatar-status-width:          .5rem !default;
+$avatar-status-height:         .5rem !default;
+$avatar-status-border-radius:  50em !default;
+$avatar-transition:            margin .15s !default;
+
+$avatar-sizes: (
+  sm: (
+    width: 1.5rem,
+    height: 1.5rem,
+    font-size: .6rem,
+    status-width: .4rem,
+    status-height: .4rem
+  ),
+  md: (
+    width: 2.5rem,
+    height: 2.5rem,
+    font-size: 1rem,
+    status-width: .7rem,
+    status-height: .7rem
+  ),
+  lg: (
+    width: 3rem,
+    height: 3rem,
+    font-size: 1.2rem,
+    status-width: .8rem,
+    status-height: .8rem
+  ),
+  xl: (
+    width: 4rem,
+    height: 4rem,
+    font-size: 1.6rem,
+    status-width: 1rem,
+    status-height: 1rem
+  ),
+) !default;
+// scss-docs-end avatar-variables
 
+// fusv-disable
+// Deprecated in 5.1.0 for CSS variables
 $avatar-widths: (
   sm: 1.5rem,
   md: 2.5rem,
   lg: 3rem,
   xl: 4rem
 ) !default;
-
-$avatar-transition: margin .15s !default;
-// scss-docs-end avatar-variables
+// fusv-enable
 
 // Alerts
 //
@@ -3634,9 +3673,9 @@ const __vite_glob_0_76 = "//\n// Text truncation\n//\n\n.text-truncate {\n  @inc
 const __vite_glob_0_77 = "//\n// Visually hidden\n//\n\n.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  @include visually-hidden();\n}\n";
 const __vite_glob_0_78 = ".vr {\n  display: inline-block;\n  align-self: stretch;\n  width: $vr-border-width;\n  min-height: 1em;\n  padding: 0;\n  background-color: currentcolor;\n  opacity: $hr-opacity;\n}\n";
 const __vite_glob_0_79 = '@include deprecate("`alert-variant()`", "v5.0.0", "v6.0.0");\n\n// scss-docs-start alert-variant-mixin\n@mixin alert-variant($background, $border, $color) {\n  --#{$prefix}alert-color: #{$color};\n  --#{$prefix}alert-bg: #{$background};\n  --#{$prefix}alert-border-color: #{$border};\n  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};\n\n  @if $enable-gradients {\n    background-image: var(--#{$prefix}gradient);\n  }\n\n  .alert-link {\n    color: var(--#{$prefix}alert-link-color);\n  }\n}\n// scss-docs-end alert-variant-mixin\n';
-const __vite_glob_0_80 = "@mixin avatar($width) {\n  width: $width;\n  height: $width;\n  font-size: $width * .4;\n\n  .avatar-status {\n    width: divide($width, 3.75);\n    height: divide($width, 3.75);\n  }\n}\n";
+const __vite_glob_0_80 = '@include deprecate("`avatar()`", "v5.1.0", "v6.0.0");\n\n@mixin avatar($width) {\n  --#{$prefix}avatar-width: #{$width};\n  --#{$prefix}avatar-height: #{$width};\n  --#{$prefix}avatar-font-size: #{$width * .4};\n  --#{$prefix}avatar-status-width: #{divide($width, 3.75)};\n  --#{$prefix}avatar-status-height: #{divide($width, 3.75)};\n}\n';
 const __vite_glob_0_81 = "// Shared between modals and offcanvases\n@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: $zindex;\n  width: 100vw;\n  height: 100vh;\n  background-color: $backdrop-bg;\n\n  // Fade for backdrop\n  &.fade { opacity: 0; }\n  &.show { opacity: $backdrop-opacity; }\n}\n";
-const __vite_glob_0_82 = "@mixin bsBanner($file) {\n  /*!\n   * CoreUI PRO #{$file} v5.2.0 (https://coreui.io)\n   * Copyright (c) 2024 creativeLabs Łukasz Holeczek\n   * License (https://coreui.io/pro/license/)\n   */\n}\n";
+const __vite_glob_0_82 = "@mixin bsBanner($file) {\n  /*!\n   * CoreUI PRO #{$file} v5.3.0 (https://coreui.io)\n   * Copyright (c) 2024 creativeLabs Łukasz Holeczek\n   * License (https://coreui.io/pro/license/)\n   */\n}\n";
 const __vite_glob_0_83 = '// stylelint-disable property-disallowed-list\n// Single side border-radius\n\n// Helper function to replace negative values with 0\n@function valid-radius($radius) {\n  $return: ();\n  @each $value in $radius {\n    @if type-of($value) == number {\n      $return: append($return, max($value, 0));\n    } @else {\n      $return: append($return, $value);\n    }\n  }\n  @return $return;\n}\n\n// scss-docs-start border-radius-mixins\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n  @if $enable-rounded {\n    border-radius: valid-radius($radius);\n  }\n  @else if $fallback-border-radius != false {\n    border-radius: $fallback-border-radius;\n  }\n}\n\n@mixin border-top-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    @include ltr-rtl("border-top-right-radius", valid-radius($radius));\n    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));\n  }\n}\n\n@mixin border-bottom-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    @include ltr-rtl("border-top-left-radius", valid-radius($radius));\n    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));\n  }\n}\n\n@mixin border-top-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-top-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    @include ltr-rtl("border-top-right-radius", valid-radius($radius));\n  }\n}\n\n@mixin border-bottom-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));\n  }\n}\n\n@mixin border-bottom-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));\n  }\n}\n// scss-docs-end border-radius-mixins\n';
 const __vite_glob_0_84 = `@mixin box-shadow($shadow...) {
   @if $enable-shadows {
@@ -4053,7 +4092,7 @@ const __vite_glob_0_112 = `// stylelint-disable function-disallowed-list
 const __vite_glob_0_113 = "$variable-prefix:             cui- !default; // Deprecated in v4.2.6 for the shorter `$prefix`\n$prefix:                      $variable-prefix !default;\n";
 const __vite_glob_0_114 = '@import "variables";\n\n$enable-ltr: false !default;\n$enable-rtl: true !default;\n\n@import "mixins/banner";\n@include bsBanner("");\n\n@import "../../../node_modules/bootstrap/scss/bootstrap";\n@import "../../variables";\n\n/* rtl:begin:ignore */\n@import "../../mixins/avatar";\n@import "../../mixins/elevation";\n@import "../../mixins/icon";\n@import "../../mixins/ltr-rtl";\n\n@import "../../avatar";\n@import "../../calendar";\n@import "../../callout";\n@import "../../date-picker";\n@import "../../footer";\n@import "../../header";\n@import "../../icon";\n@import "../../loading-button";\n@import "../../sidebar";\n@import "../../time-picker";\n@import "../../forms/form-multi-select";\n\n/* rtl:end:ignore */\n';
 const __vite_glob_0_115 = '@import "variables";\n\n@import "mixins/banner";\n@include bsBanner("");\n\n@import "../../../node_modules/bootstrap/scss/bootstrap";\n@import "../../variables";\n\n/* rtl:begin:ignore */\n@import "../../mixins/avatar";\n@import "../../mixins/elevation";\n@import "../../mixins/icon";\n@import "../../mixins/ltr-rtl";\n\n@import "../../avatar";\n@import "../../calendar";\n@import "../../callout";\n@import "../../date-picker";\n@import "../../footer";\n@import "../../header";\n@import "../../icon";\n@import "../../loading-button";\n@import "../../rating";\n@import "../../sidebar";\n@import "../../time-picker";\n@import "../../forms/form-multi-select";\n\n/* rtl:end:ignore */\n';
-const __vite_glob_0_116 = "@mixin bsBanner($file) {\n  /*!\n   * CoreUI PRO for Bootstrap #{$file} v5.2.0 (https://coreui.io/bootstrap/)\n   * Copyright (c) 2024 creativeLabs Łukasz Holeczek\n   * License (https://coreui.io/pro/license/)\n   */\n}\n";
+const __vite_glob_0_116 = "@mixin bsBanner($file) {\n  /*!\n   * CoreUI PRO for Bootstrap #{$file} v5.3.0 (https://coreui.io/bootstrap/)\n   * Copyright (c) 2024 creativeLabs Łukasz Holeczek\n   * License (https://coreui.io/pro/license/)\n   */\n}\n";
 const __vite_glob_0_117 = '// Loop over each breakpoint\n@each $breakpoint in map-keys($grid-breakpoints) {\n\n  // Generate media query if needed\n  @include media-breakpoint-up($breakpoint) {\n    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n    // Loop over each utility property\n    @each $key, $utility in $utilities {\n      // The utility can be disabled with `false`, thus check if the utility is a map first\n      // Only proceed if responsive media queries are enabled or if it\'s the base media query\n      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {\n        @include generate-utility($utility, $infix);\n      }\n    }\n  }\n}\n\n// RFS rescaling\n@media (min-width: $rfs-mq-value) {\n  @each $breakpoint in map-keys($grid-breakpoints) {\n    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {\n      // Loop over each utility property\n      @each $key, $utility in $utilities {\n        // The utility can be disabled with `false`, thus check if the utility is a map first\n        // Only proceed if responsive media queries are enabled or if it\'s the base media query\n        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {\n          @include generate-utility($utility, $infix, true);\n        }\n      }\n    }\n  }\n}\n\n\n// Print utilities\n@media print {\n  @each $key, $utility in $utilities {\n    // The utility can be disabled with `false`, thus check if the utility is a map first\n    // Then check if the utility needs print styles\n    @if type-of($utility) == "map" and map-get($utility, print) == true {\n      @include generate-utility($utility, "-print");\n    }\n  }\n}\n';
 const __vite_glob_0_118 = "@each $color, $value in $theme-gradients {\n  .bg-#{$color}-gradient {\n    background-color: var(--#{$prefix}#{$color});\n    background-image: linear-gradient(45deg, var(--#{$prefix}#{$color}-start) 0%, var(--#{$prefix}#{$color}-stop) 100%);\n  }\n}\n";
 const __vite_glob_0_119 = '// stylelint-disable scss/dimension-no-non-numeric-values\n\n// SCSS RFS mixin\n//\n// Automated responsive values for font sizes, paddings, margins and much more\n//\n// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)\n\n// Configuration\n\n// Base value\n$rfs-base-value: 1.25rem !default;\n$rfs-unit: rem !default;\n\n@if $rfs-unit != rem and $rfs-unit != px {\n  @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";\n}\n\n// Breakpoint at where values start decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {\n  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";\n}\n\n// Resize values based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != number or $rfs-factor <= 1 {\n  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";\n}\n\n// Mode. Possibilities: "min-media-query", "max-media-query"\n$rfs-mode: min-media-query !default;\n\n// Generate enable or disable classes. Possibilities: false, "enable" or "disable"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-rfs to false\n$enable-rfs: true !default;\n\n// Cache $rfs-base-value unit\n$rfs-base-value-unit: unit($rfs-base-value);\n\n@function divide($dividend, $divisor, $precision: 10) {\n  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);\n  $dividend: abs($dividend);\n  $divisor: abs($divisor);\n  @if $dividend == 0 {\n    @return 0;\n  }\n  @if $divisor == 0 {\n    @error "Cannot divide by 0";\n  }\n  $remainder: $dividend;\n  $result: 0;\n  $factor: 10;\n  @while ($remainder > 0 and $precision >= 0) {\n    $quotient: 0;\n    @while ($remainder >= $divisor) {\n      $remainder: $remainder - $divisor;\n      $quotient: $quotient + 1;\n    }\n    $result: $result * 10 + $quotient;\n    $factor: $factor * .1;\n    $remainder: $remainder * 10;\n    $precision: $precision - 1;\n    @if ($precision < 0 and $remainder >= $divisor * 5) {\n      $result: $result + 1;\n    }\n  }\n  $result: $result * $factor * $sign;\n  $dividend-unit: unit($dividend);\n  $divisor-unit: unit($divisor);\n  $unit-map: (\n    "px": 1px,\n    "rem": 1rem,\n    "em": 1em,\n    "%": 1%\n  );\n  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {\n    $result: $result * map-get($unit-map, $dividend-unit);\n  }\n  @return $result;\n}\n\n// Remove px-unit from $rfs-base-value for calculations\n@if $rfs-base-value-unit == px {\n  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);\n}\n@else if $rfs-base-value-unit == rem {\n  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == px {\n  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {\n  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));\n}\n\n// Calculate the media query value\n$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});\n$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);\n$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);\n\n// Internal mixin used to determine which media query needs to be used\n@mixin _rfs-media-query {\n  @if $rfs-two-dimensional {\n    @if $rfs-mode == max-media-query {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n    @else {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n  }\n  @else {\n    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {\n      @content;\n    }\n  }\n}\n\n// Internal mixin that adds disable classes to the selector if needed.\n@mixin _rfs-rule {\n  @if $rfs-class == disable and $rfs-mode == max-media-query {\n    // Adding an extra class increases specificity, which prevents the media query to override the property\n    &,\n    .disable-rfs &,\n    &.disable-rfs {\n      @content;\n    }\n  }\n  @else if $rfs-class == enable and $rfs-mode == min-media-query {\n    .enable-rfs &,\n    &.enable-rfs {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Internal mixin that adds enable classes to the selector if needed.\n@mixin _rfs-media-query-rule {\n\n  @if $rfs-class == enable {\n    @if $rfs-mode == min-media-query {\n      @content;\n    }\n\n    @include _rfs-media-query () {\n      .enable-rfs &,\n      &.enable-rfs {\n        @content;\n      }\n    }\n  }\n  @else {\n    @if $rfs-class == disable and $rfs-mode == min-media-query {\n      .disable-rfs &,\n      &.disable-rfs {\n        @content;\n      }\n    }\n    @include _rfs-media-query () {\n      @content;\n    }\n  }\n}\n\n// Helper function to get the formatted non-responsive value\n@function rfs-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: "";\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + " 0";\n    }\n    @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == "number", unit($value), false);\n\n      @if $unit == px {\n        // Convert to rem if needed\n        $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);\n      }\n      @else if $unit == rem {\n        // Convert to px if needed\n        $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);\n      } @else {\n        // If $value isn\'t a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n        $val: $val + " " + $value;\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// Helper function to get the responsive value calculated by RFS\n@function rfs-fluid-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: "";\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + " 0";\n    } @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == "number", unit($value), false);\n\n      // If $value isn\'t a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n      @if not $unit or $unit != px and $unit != rem {\n        $val: $val + " " + $value;\n      } @else {\n        // Remove unit from $value for calculations\n        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));\n\n        // Only add the media query if the value is greater than the minimum value\n        @if abs($value) <= $rfs-base-value or not $enable-rfs {\n          $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);\n        }\n        @else {\n          // Calculate the minimum value\n          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);\n\n          // Calculate difference between $value and the minimum value\n          $value-diff: abs($value) - $value-min;\n\n          // Base value formatting\n          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);\n\n          // Use negative value if needed\n          $min-width: if($value < 0, -$min-width, $min-width);\n\n          // Use `vmin` if two-dimensional is enabled\n          $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n          // Calculate the variable width between 0 and $rfs-breakpoint\n          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};\n\n          // Return the calculated value\n          $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";\n        }\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// RFS mixin\n@mixin rfs($values, $property: font-size) {\n  @if $values != null {\n    $val: rfs-value($values);\n    $fluid-val: rfs-fluid-value($values);\n\n    // Do not print the media query if responsive & non-responsive values are the same\n    @if $val == $fluid-val {\n      #{$property}: $val;\n    }\n    @else {\n      @include _rfs-rule () {\n        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);\n\n        // Include safari iframe resize fix if needed\n        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);\n      }\n\n      @include _rfs-media-query-rule () {\n        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);\n      }\n    }\n  }\n}\n\n// Shorthand helper mixins\n@mixin font-size($value) {\n  @include rfs($value);\n}\n\n@mixin padding($value) {\n  @include rfs($value, padding);\n}\n\n@mixin padding-top($value) {\n  @include rfs($value, padding-top);\n}\n\n@mixin padding-right($value) {\n  @include rfs($value, padding-right);\n}\n\n@mixin padding-bottom($value) {\n  @include rfs($value, padding-bottom);\n}\n\n@mixin padding-left($value) {\n  @include rfs($value, padding-left);\n}\n\n@mixin margin($value) {\n  @include rfs($value, margin);\n}\n\n@mixin margin-top($value) {\n  @include rfs($value, margin-top);\n}\n\n@mixin margin-right($value) {\n  @include rfs($value, margin-right);\n}\n\n@mixin margin-bottom($value) {\n  @include rfs($value, margin-bottom);\n}\n\n@mixin margin-left($value) {\n  @include rfs($value, margin-left);\n}';
@@ -5594,15 +5633,14 @@ Prism.languages.insertBefore("scss", "function", {
   }
 });
 Prism.languages.scss["atrule"].inside.rest = Prism.languages.scss;
-const _hoisted_1 = { class: "highlight" };
-const _hoisted_2 = ["innerHTML"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ScssDocs",
   props: {
     capture: String,
     file: String
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
+    __expose();
     const props = __props;
     if (typeof window !== "undefined") {
       window.Prism = window.Prism || {};
@@ -5742,17 +5780,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       Prism$1.languages.scss,
       "scss"
     ) : null;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createBaseVNode("pre", {
-          class: "prism-code language-scss",
-          innerHTML: unref(code)
-        }, null, 8, _hoisted_2)
-      ]);
-    };
+    const __returned__ = { props, files, file, captureStart, captureEnd, re, captured, section, code };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-const ScssDocs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "ScssDocs.vue"]]);
+const _hoisted_1 = { class: "highlight" };
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createBaseVNode("pre", {
+      class: "prism-code language-scss",
+      innerHTML: $setup.code
+    }, null, 8, _hoisted_2)
+  ]);
+}
+const ScssDocs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "ScssDocs.vue"]]);
 export {
   ScssDocs as default
 };
diff --git a/vue/docs/assets/accessibility.html-DjMaAPER.js b/vue/docs/assets/accessibility.html-CkVUBrW4.js
similarity index 76%
rename from vue/docs/assets/accessibility.html-DjMaAPER.js
rename to vue/docs/assets/accessibility.html-CkVUBrW4.js
index 2deef5b7dd0..d397f02e04a 100644
--- a/vue/docs/assets/accessibility.html-DjMaAPER.js
+++ b/vue/docs/assets/accessibility.html-CkVUBrW4.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>CoreUI for Vue provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p><h2 id="overview-and-limitations" tabindex="-1">Overview and limitations <a class="anchor-link" href="#overview-and-limitations" aria-hidden="true">#</a></h2><p>The overall accessibility of any project built with CoreUI for Vue depends in large part on the author&#39;s markup, additional styling, and scripting they&#39;ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with CoreUI for Vue that fulfill <a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener noreferrer"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1</a> (A/AA/AAA), <a href="https://www.section508.gov/" target="_blank" rel="noopener noreferrer">Section 508</a>, and similar accessibility standards and requirements.</p><h3 id="structural-markup" tabindex="-1">Structural markup <a class="anchor-link" href="#structural-markup" aria-hidden="true">#</a></h3><p>CoreUI for Vue styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of CoreUI for Vue itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.</p><h3 id="interactive-components" tabindex="-1">Interactive components <a class="anchor-link" href="#interactive-components" aria-hidden="true">#</a></h3><p>CoreUI for Vue interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant <a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).</p><p>Because CoreUI for Vue components are purposely designed to be fairly generic, authors may need to include further <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.</p><h3 id="color-contrast" tabindex="-1">Color contrast <a class="anchor-link" href="#color-contrast" aria-hidden="true">#</a></h3><p>Some combinations of colors that currently make up CoreUI for Vue default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to <em>insufficient</em> color contrast (below the recommended <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum" target="_blank" rel="noopener noreferrer">WCAG 2.1 text color contrast ratio of 4.5:1</a> and the <a href="https://www.w3.org/TR/WCAG21/#non-text-contrast" target="_blank" rel="noopener noreferrer">WCAG 2.1 non-text color contrast ratio of 3:1</a>), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.</p><h3 id="visually-hidden-content" tabindex="-1">Visually hidden content <a class="anchor-link" href="#visually-hidden-content" aria-hidden="true">#</a></h3><p>Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the <code>.visually-hidden</code> class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.</p><div class="language-html line-numbers-mode" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  This action is not reversible</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For visually hidden interactive controls, such as traditional &quot;skip&quot; links, use the <code>.visually-hidden-focusable</code> class. This will ensure that the control becomes visible once focused (for sighted keyboard users). <strong>Watch out, compared to the equivalent <code>.sr-only</code> and <code>.sr-only-focusable</code> classes in past versions, CoreUI&#39;s <code>.visually-hidden-focusable</code> is a standalone class, and must not be used in combination with the <code>.visually-hidden</code> class.</strong></p><div class="language-html line-numbers-mode" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden-focusable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Skip to main content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="reduced-motion" tabindex="-1">Reduced motion <a class="anchor-link" href="#reduced-motion" aria-hidden="true">#</a></h3><p>CoreUI for Vue includes support for the <a href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion" target="_blank" rel="noopener noreferrer"><code>prefers-reduced-motion</code> media feature</a>. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in CoreUI for Vue (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.</p><p>On browsers that support <code>prefers-reduced-motion</code>, and where the user has <em>not</em> explicitly signaled that they&#39;d prefer reduced motion (i.e. where <code>prefers-reduced-motion: no-preference</code>), CoreUI for Vue enables smooth scrolling using the <code>scroll-behavior</code> property.</p><h2 id="additional-resources" tabindex="-1">Additional resources <a class="anchor-link" href="#additional-resources" aria-hidden="true">#</a></h2><ul><li><a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines (WCAG) 2.1</a></li><li><a href="https://www.a11yproject.com/" target="_blank" rel="noopener noreferrer">The A11Y Project</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank" rel="noopener noreferrer">MDN accessibility documentation</a></li><li><a href="https://tenon.io/" target="_blank" rel="noopener noreferrer">Tenon.io Accessibility Checker</a></li><li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/" target="_blank" rel="noopener noreferrer">Color Contrast Analyser (CCA)</a></li><li><a href="https://github.com/squizlabs/HTML_CodeSniffer" target="_blank" rel="noopener noreferrer">&quot;HTML Codesniffer&quot; bookmarklet for identifying accessibility issues</a></li><li><a href="https://accessibilityinsights.io/" target="_blank" rel="noopener noreferrer">Microsoft Accessibility Insights</a></li><li><a href="https://www.deque.com/axe/" target="_blank" rel="noopener noreferrer">Deque Axe testing tools</a></li></ul>', 20);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>CoreUI for Vue provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p><h2 id="overview-and-limitations" tabindex="-1">Overview and limitations <a class="anchor-link" href="#overview-and-limitations" aria-hidden="true">#</a></h2><p>The overall accessibility of any project built with CoreUI for Vue depends in large part on the author&#39;s markup, additional styling, and scripting they&#39;ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with CoreUI for Vue that fulfill <a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener noreferrer"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1</a> (A/AA/AAA), <a href="https://www.section508.gov/" target="_blank" rel="noopener noreferrer">Section 508</a>, and similar accessibility standards and requirements.</p><h3 id="structural-markup" tabindex="-1">Structural markup <a class="anchor-link" href="#structural-markup" aria-hidden="true">#</a></h3><p>CoreUI for Vue styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of CoreUI for Vue itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.</p><h3 id="interactive-components" tabindex="-1">Interactive components <a class="anchor-link" href="#interactive-components" aria-hidden="true">#</a></h3><p>CoreUI for Vue interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant <a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).</p><p>Because CoreUI for Vue components are purposely designed to be fairly generic, authors may need to include further <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.</p><h3 id="color-contrast" tabindex="-1">Color contrast <a class="anchor-link" href="#color-contrast" aria-hidden="true">#</a></h3><p>Some combinations of colors that currently make up CoreUI for Vue default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to <em>insufficient</em> color contrast (below the recommended <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum" target="_blank" rel="noopener noreferrer">WCAG 2.1 text color contrast ratio of 4.5:1</a> and the <a href="https://www.w3.org/TR/WCAG21/#non-text-contrast" target="_blank" rel="noopener noreferrer">WCAG 2.1 non-text color contrast ratio of 3:1</a>), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.</p><h3 id="visually-hidden-content" tabindex="-1">Visually hidden content <a class="anchor-link" href="#visually-hidden-content" aria-hidden="true">#</a></h3><p>Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the <code>.visually-hidden</code> class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.</p><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  This action is not reversible</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For visually hidden interactive controls, such as traditional &quot;skip&quot; links, use the <code>.visually-hidden-focusable</code> class. This will ensure that the control becomes visible once focused (for sighted keyboard users). <strong>Watch out, compared to the equivalent <code>.sr-only</code> and <code>.sr-only-focusable</code> classes in past versions, CoreUI&#39;s <code>.visually-hidden-focusable</code> is a standalone class, and must not be used in combination with the <code>.visually-hidden</code> class.</strong></p><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden-focusable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Skip to main content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="reduced-motion" tabindex="-1">Reduced motion <a class="anchor-link" href="#reduced-motion" aria-hidden="true">#</a></h3><p>CoreUI for Vue includes support for the <a href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion" target="_blank" rel="noopener noreferrer"><code>prefers-reduced-motion</code> media feature</a>. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in CoreUI for Vue (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.</p><p>On browsers that support <code>prefers-reduced-motion</code>, and where the user has <em>not</em> explicitly signaled that they&#39;d prefer reduced motion (i.e. where <code>prefers-reduced-motion: no-preference</code>), CoreUI for Vue enables smooth scrolling using the <code>scroll-behavior</code> property.</p><h2 id="additional-resources" tabindex="-1">Additional resources <a class="anchor-link" href="#additional-resources" aria-hidden="true">#</a></h2><ul><li><a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines (WCAG) 2.1</a></li><li><a href="https://www.a11yproject.com/" target="_blank" rel="noopener noreferrer">The A11Y Project</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank" rel="noopener noreferrer">MDN accessibility documentation</a></li><li><a href="https://tenon.io/" target="_blank" rel="noopener noreferrer">Tenon.io Accessibility Checker</a></li><li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/" target="_blank" rel="noopener noreferrer">Color Contrast Analyser (CCA)</a></li><li><a href="https://github.com/squizlabs/HTML_CodeSniffer" target="_blank" rel="noopener noreferrer">&quot;HTML Codesniffer&quot; bookmarklet for identifying accessibility issues</a></li><li><a href="https://accessibilityinsights.io/" target="_blank" rel="noopener noreferrer">Microsoft Accessibility Insights</a></li><li><a href="https://www.deque.com/axe/" target="_blank" rel="noopener noreferrer">Deque Axe testing tools</a></li></ul>', 20);
 const _hoisted_21 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/accordion.html-DPn8cCyj.js b/vue/docs/assets/accordion.html-DPn8cCyj.js
new file mode 100644
index 00000000000..8763431c554
--- /dev/null
+++ b/vue/docs/assets/accordion.html-DPn8cCyj.js
@@ -0,0 +1,274 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Click the accordions below to expand/collapse the accordion content.", -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the first item's accordion body.", -1);
+const _hoisted_5 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_6 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the second item's accordion body.", -1);
+const _hoisted_7 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_8 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the third item's accordion body.", -1);
+const _hoisted_9 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the first item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the second item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the third item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="flush" tabindex="-1">Flush <a class="anchor-link" href="#flush" aria-hidden="true">#</a></h3><p>Add <code>flush</code> to remove the default <code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>', 3);
+const _hoisted_13 = { class: "docs-example rounded-top p-4" };
+const _hoisted_14 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the first item's accordion body.", -1);
+const _hoisted_15 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_16 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the second item's accordion body.", -1);
+const _hoisted_17 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_18 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the third item's accordion body.", -1);
+const _hoisted_19 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordion</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the first item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the second item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the third item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="always-open" tabindex="-1">Always open <a class="anchor-link" href="#always-open" aria-hidden="true">#</a></h3><p>Add <code>always-open</code> property to make accordion items stay open when another item is opened.</p>', 3);
+const _hoisted_23 = { class: "docs-example rounded-top p-4" };
+const _hoisted_24 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the first item's accordion body.", -1);
+const _hoisted_25 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_26 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the second item's accordion body.", -1);
+const _hoisted_27 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_28 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the third item's accordion body.", -1);
+const _hoisted_29 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordion</span> <span class="token attr-name">:active-item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">always-open</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the first item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the second item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the third item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue accordions use local CSS variables on <code>.accordion</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CAccordion <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CAccordion<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="caccordion" tabindex="-1">CAccordion <a class="anchor-link" href="#caccordion" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordion <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordion <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordion&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>always-open</strong></td><td>Make accordion items stay open when another item is opened</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>flush</strong></td><td>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="caccordionheader" tabindex="-1">CAccordionHeader <a class="anchor-link" href="#caccordionheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="caccordionbody" tabindex="-1">CAccordionBody <a class="anchor-link" href="#caccordionbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 9);
+function _sfc_render(_ctx, _cache) {
+  const _component_CAccordionHeader = resolveComponent("CAccordionHeader");
+  const _component_CAccordionBody = resolveComponent("CAccordionBody");
+  const _component_CAccordionItem = resolveComponent("CAccordionItem");
+  const _component_CAccordion = resolveComponent("CAccordion");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CAccordion, null, {
+        default: withCtx(() => [
+          createVNode(_component_CAccordionItem, { "item-key": 1 }, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #1 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_4,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_5,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CAccordionItem, { "item-key": 2 }, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #2 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_6,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_7,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CAccordionItem, { "item-key": 3 }, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #3 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_8,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_9,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_10,
+    createBaseVNode("div", _hoisted_13, [
+      createVNode(_component_CAccordion, { flush: "" }, {
+        default: withCtx(() => [
+          createVNode(_component_CAccordionItem, null, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #1 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_14,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_15,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CAccordionItem, null, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #2 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_16,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_17,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CAccordionItem, null, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #3 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_18,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_19,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_20,
+    createBaseVNode("div", _hoisted_23, [
+      createVNode(_component_CAccordion, {
+        "active-item-key": 2,
+        "always-open": ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CAccordionItem, { "item-key": 1 }, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #1 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_24,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_25,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CAccordionItem, { "item-key": 2 }, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #2 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_26,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_27,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CAccordionItem, { "item-key": 3 }, {
+            default: withCtx(() => [
+              createVNode(_component_CAccordionHeader, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Accordion Item #3 ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CAccordionBody, null, {
+                default: withCtx(() => [
+                  _hoisted_28,
+                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
+                  _hoisted_29,
+                  createTextVNode(", though the transition does limit overflow. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_30,
+    createVNode(_component_ScssDocs, {
+      file: "_accordion.scss",
+      capture: "accordion-css-vars"
+    }),
+    _hoisted_34,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "accordion-variables"
+    }),
+    _hoisted_37
+  ]);
+}
+const accordion_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "accordion.html.vue"]]);
+const data = JSON.parse('{"path":"/components/accordion.html","title":"Vue Accordion Component","lang":"en-US","frontmatter":{"title":"Vue Accordion Component","name":"Accordion","description":"Build vertically collapsing accordions in combination with our Vue Collapse component.","other_frameworks":"accordion","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/accordion.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Flush","slug":"flush","link":"#flush","children":[]},{"level":3,"title":"Always open","slug":"always-open","link":"#always-open","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CAccordion","slug":"caccordion","link":"#caccordion","children":[]},{"level":3,"title":"CAccordionHeader","slug":"caccordionheader","link":"#caccordionheader","children":[]},{"level":3,"title":"CAccordionBody","slug":"caccordionbody","link":"#caccordionbody","children":[]}]}],"filePathRelative":"components/accordion.md"}');
+export {
+  accordion_html as comp,
+  data
+};
diff --git a/vue/docs/assets/accordion.html-Dn2-DS4M.js b/vue/docs/assets/accordion.html-Dn2-DS4M.js
deleted file mode 100644
index f46e61a9389..00000000000
--- a/vue/docs/assets/accordion.html-Dn2-DS4M.js
+++ /dev/null
@@ -1,274 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "examples",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Examples "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Click the accordions below to expand/collapse the accordion content.", -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the first item's accordion body.", -1);
-const _hoisted_5 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_6 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the second item's accordion body.", -1);
-const _hoisted_7 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_8 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the third item's accordion body.", -1);
-const _hoisted_9 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the first item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the second item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the third item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="flush" tabindex="-1">Flush <a class="anchor-link" href="#flush" aria-hidden="true">#</a></h3><p>Add <code>flush</code> to remove the default <code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>', 3);
-const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the first item's accordion body.", -1);
-const _hoisted_15 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_16 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the second item's accordion body.", -1);
-const _hoisted_17 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_18 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the third item's accordion body.", -1);
-const _hoisted_19 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordion</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the first item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the second item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the third item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="always-open" tabindex="-1">Always open <a class="anchor-link" href="#always-open" aria-hidden="true">#</a></h3><p>Add <code>always-open</code> property to make accordion items stay open when another item is opened.</p>', 3);
-const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the first item's accordion body.", -1);
-const _hoisted_25 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_26 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the second item's accordion body.", -1);
-const _hoisted_27 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_28 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the third item's accordion body.", -1);
-const _hoisted_29 = /* @__PURE__ */ createBaseVNode("code", null, ".accordion-body", -1);
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordion</span> <span class="token attr-name">:active-item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">always-open</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the first item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the second item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionItem</span> <span class="token attr-name">:item-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Accordion Item #3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is the third item&#39;s accordion body.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> It is hidden by default,</span>\n<span class="line">      until the collapse plugin adds the appropriate classes that we use to style each</span>\n<span class="line">      element. These classes control the overall appearance, as well as the showing and</span>\n<span class="line">      hiding via CSS transitions. You can modify any of this with custom CSS or overriding</span>\n<span class="line">      our default variables. It&#39;s also worth noting that just about any HTML can go within</span>\n<span class="line">      the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.accordion-body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>, though the transition does limit overflow.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordionItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAccordion</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue accordions use local CSS variables on <code>.accordion</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CAccordion <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CAccordion<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="caccordion" tabindex="-1">CAccordion <a class="anchor-link" href="#caccordion" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordion <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordion <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordion&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>always-open</strong></td><td>Make accordion items stay open when another item is opened</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>flush</strong></td><td>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="caccordionheader" tabindex="-1">CAccordionHeader <a class="anchor-link" href="#caccordionheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="caccordionbody" tabindex="-1">CAccordionBody <a class="anchor-link" href="#caccordionbody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAccordionBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAccordionBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/accordion/CAccordionBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 9);
-function _sfc_render(_ctx, _cache) {
-  const _component_CAccordionHeader = resolveComponent("CAccordionHeader");
-  const _component_CAccordionBody = resolveComponent("CAccordionBody");
-  const _component_CAccordionItem = resolveComponent("CAccordionItem");
-  const _component_CAccordion = resolveComponent("CAccordion");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    createBaseVNode("div", _hoisted_3, [
-      createVNode(_component_CAccordion, null, {
-        default: withCtx(() => [
-          createVNode(_component_CAccordionItem, { "item-key": 1 }, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #1 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_4,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_5,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CAccordionItem, { "item-key": 2 }, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #2 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_6,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_7,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CAccordionItem, { "item-key": 3 }, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #3 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_8,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_9,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_10,
-    createBaseVNode("div", _hoisted_13, [
-      createVNode(_component_CAccordion, { flush: "" }, {
-        default: withCtx(() => [
-          createVNode(_component_CAccordionItem, null, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #1 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_14,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_15,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CAccordionItem, null, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #2 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_16,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_17,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CAccordionItem, null, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #3 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_18,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_19,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_20,
-    createBaseVNode("div", _hoisted_23, [
-      createVNode(_component_CAccordion, {
-        "active-item-key": 2,
-        "always-open": ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CAccordionItem, { "item-key": 1 }, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #1 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_24,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_25,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CAccordionItem, { "item-key": 2 }, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #2 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_26,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_27,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CAccordionItem, { "item-key": 3 }, {
-            default: withCtx(() => [
-              createVNode(_component_CAccordionHeader, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Accordion Item #3 ")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CAccordionBody, null, {
-                default: withCtx(() => [
-                  _hoisted_28,
-                  createTextVNode(" It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "),
-                  _hoisted_29,
-                  createTextVNode(", though the transition does limit overflow. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_30,
-    createVNode(_component_ScssDocs, {
-      file: "_accordion.scss",
-      capture: "accordion-css-vars"
-    }),
-    _hoisted_34,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "accordion-variables"
-    }),
-    _hoisted_37
-  ]);
-}
-const accordion_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "accordion.html.vue"]]);
-const data = JSON.parse('{"path":"/components/accordion.html","title":"Vue Accordion Component","lang":"en-US","frontmatter":{"title":"Vue Accordion Component","name":"Accordion","description":"Build vertically collapsing accordions in combination with our Vue Collapse component.","other_frameworks":"accordion","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/accordion.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Flush","slug":"flush","link":"#flush","children":[]},{"level":3,"title":"Always open","slug":"always-open","link":"#always-open","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CAccordion","slug":"caccordion","link":"#caccordion","children":[]},{"level":3,"title":"CAccordionHeader","slug":"caccordionheader","link":"#caccordionheader","children":[]},{"level":3,"title":"CAccordionBody","slug":"caccordionbody","link":"#caccordionbody","children":[]}]}],"filePathRelative":"components/accordion.md"}');
-export {
-  accordion_html as comp,
-  data
-};
diff --git a/vue/docs/assets/admin-dashboard.html-DH1hYwCG.js b/vue/docs/assets/admin-dashboard.html-DU-BWvUG.js
similarity index 98%
rename from vue/docs/assets/admin-dashboard.html-DH1hYwCG.js
rename to vue/docs/assets/admin-dashboard.html-DU-BWvUG.js
index 588946685f1..475034511e1 100644
--- a/vue/docs/assets/admin-dashboard.html-DH1hYwCG.js
+++ b/vue/docs/assets/admin-dashboard.html-DU-BWvUG.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, a as createBaseVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, e as createBaseVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "vue-admin-dashboard-templates",
diff --git a/vue/docs/assets/alert.html-CDqS0NZ4.js b/vue/docs/assets/alert.html-CDqS0NZ4.js
new file mode 100644
index 00000000000..b6d35c1d9f4
--- /dev/null
+++ b/vue/docs/assets/alert.html-CDqS0NZ4.js
@@ -0,0 +1,486 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  data() {
+    return {
+      liveExampleVisible: false
+    };
+  },
+  methods: {
+    alert() {
+      alert("👋 Well, hi there! Thanks for dismissing me.");
+    }
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("Vue Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the "),
+  /* @__PURE__ */ createBaseVNode("strong", null, "required"),
+  /* @__PURE__ */ createTextVNode(" contextual "),
+  /* @__PURE__ */ createBaseVNode("code", null, "color"),
+  /* @__PURE__ */ createTextVNode(" props (e.g., "),
+  /* @__PURE__ */ createBaseVNode("code", null, "primary"),
+  /* @__PURE__ */ createTextVNode("). For inline dismissal, use the "),
+  /* @__PURE__ */ createBaseVNode("a", { href: "#dismissing" }, "dismissing prop"),
+  /* @__PURE__ */ createTextVNode(".")
+], -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple primary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple secondary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple success alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple danger alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple warning alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple info alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple light alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple dark alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="live-example" tabindex="-1">Live example <a class="anchor-link" href="#live-example" aria-hidden="true">#</a></h3><p>Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.</p>', 3);
+const _hoisted_7 = { class: "docs-example rounded-top p-4" };
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>liveExampleVisible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dismissible</span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { liveExampleVisible = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple primary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { liveExampleVisible = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Show live alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="link-color" tabindex="-1">Link color <a class="anchor-link" href="#link-color" aria-hidden="true">#</a></h3><p>Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored links inside any alert.</p>', 3);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple primary alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple secondary alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple success alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple danger alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple warning alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple info alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple light alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple dark alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="additional-content" tabindex="-1">Additional content <a class="anchor-link" href="#additional-content" aria-hidden="true">#</a></h3><p>Alert can also incorporate supplementary HTML elements like heading, paragraph, and divider.</p>', 3);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = /* @__PURE__ */ createBaseVNode("p", null, "Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.", -1);
+const _hoisted_17 = /* @__PURE__ */ createBaseVNode("hr", null, null, -1);
+const _hoisted_18 = /* @__PURE__ */ createBaseVNode("p", { class: "mb-0" }, "Whenever you need to, be sure to use margin utilities to keep things nice and tidy.", -1);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertHeading</span><span class="token punctuation">&gt;</span></span>Well done!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertHeading</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="icons" tabindex="-1">Icons <a class="anchor-link" href="#icons" aria-hidden="true">#</a></h3><p>Similarly, you can use <a href="https//coreui.io/docs/4.0/utilities/flex%22">flexbox utilities</a> and <a href="https://icons.coreui.io" target="_blank" rel="noopener noreferrer">CoreUI Icons</a> to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.</p>', 3);
+const _hoisted_22 = { class: "docs-example rounded-top p-4" };
+const _hoisted_23 = /* @__PURE__ */ createBaseVNode("svg", {
+  class: "flex-shrink-0 me-2",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 512 512"
+}, [
+  /* @__PURE__ */ createBaseVNode("rect", {
+    width: "32",
+    height: "176",
+    x: "240",
+    y: "176",
+    fill: "var(--ci-primary-color, currentColor)",
+    class: "ci-primary"
+  }),
+  /* @__PURE__ */ createBaseVNode("rect", {
+    width: "32",
+    height: "32",
+    x: "240",
+    y: "384",
+    fill: "var(--ci-primary-color, currentColor)",
+    class: "ci-primary"
+  }),
+  /* @__PURE__ */ createBaseVNode("path", {
+    fill: "var(--ci-primary-color, currentColor)",
+    d: "M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z",
+    class: "ci-primary"
+  })
+], -1);
+const _hoisted_24 = /* @__PURE__ */ createBaseVNode("div", null, " An example alert with an icon ", -1);
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 512 512<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>176<span class="token punctuation">&quot;</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>240<span class="token punctuation">&quot;</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>176<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>var(--ci-primary-color, currentColor)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>240<span class="token punctuation">&quot;</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>384<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>var(--ci-primary-color, currentColor)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>var(--ci-primary-color, currentColor)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Need more than one icon for your alerts? Consider using <a href="https://icons.coreui.io" target="_blank" rel="noopener noreferrer">CoreUI Icons</a>.</p>', 2);
+const _hoisted_27 = { class: "docs-example rounded-top p-4" };
+const _hoisted_28 = /* @__PURE__ */ createBaseVNode("div", null, " An example alert with an icon ", -1);
+const _hoisted_29 = /* @__PURE__ */ createBaseVNode("div", null, " An example success alert with an icon ", -1);
+const _hoisted_30 = /* @__PURE__ */ createBaseVNode("div", null, " An example warning alert with an icon ", -1);
+const _hoisted_31 = /* @__PURE__ */ createBaseVNode("div", null, " An example danger alert with an icon ", -1);
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-check-circle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example success alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example warning alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-burn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example danger alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="solid" tabindex="-1">Solid <a class="anchor-link" href="#solid" aria-hidden="true">#</a></h3><p>Use <code>variant=&quot;solid&quot;</code> to change contextual colors to solid.</p>', 3);
+const _hoisted_35 = { class: "docs-example rounded-top p-4" };
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid primary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid secondary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid success alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid danger alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid warning alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid info alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid light alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid dark alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dismissing" tabindex="-1">Dismissing <a class="anchor-link" href="#dismissing" aria-hidden="true">#</a></h3><p>Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.</p>', 3);
+const _hoisted_39 = { class: "docs-example rounded-top p-4" };
+const _hoisted_40 = /* @__PURE__ */ createBaseVNode("strong", null, "Go right ahead", -1);
+const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-highlighter="prismjs" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dismissible</span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Go right ahead<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> and click that dimiss over there on the right.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">alert</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;👋 Well, hi there! Thanks for dismissing me.&quot;</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue alerts use local CSS variables on <code>.alert</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CAlert <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CAlert<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlert <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlert&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to alert and allow it to self dismisss.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the alert variant to a solid.</td><td>string</td><td><code>&#39;solid&#39;</code></td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr></tbody></table><h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlertHeading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlertHeading <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlertHeading&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h4&#39;</td></tr></tbody></table>', 11);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CAlert = resolveComponent("CAlert");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CAlertLink = resolveComponent("CAlertLink");
+  const _component_CAlertHeading = resolveComponent("CAlertHeading");
+  const _component_CIcon = resolveComponent("CIcon");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CAlert, { color: "primary" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple primary alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple secondary alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "success" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple success alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "danger" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple danger alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "warning" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple warning alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "info" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple info alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "light" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple light alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "dark" }, {
+        default: withCtx(() => [
+          createTextVNode("A simple dark alert—check it out!")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_7, [
+      createVNode(_component_CAlert, {
+        color: "primary",
+        visible: $data.liveExampleVisible,
+        dismissible: "",
+        onClose: _cache[0] || (_cache[0] = () => {
+          $data.liveExampleVisible = false;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple primary alert—check it out!")
+        ]),
+        _: 1
+      }, 8, ["visible"]),
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[1] || (_cache[1] = () => {
+          $data.liveExampleVisible = true;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Show live alert")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_8,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CAlert, { color: "primary" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple primary alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple secondary alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "success" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple success alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "danger" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple danger alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "warning" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple warning alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "info" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple info alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "light" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple light alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, { color: "dark" }, {
+        default: withCtx(() => [
+          createTextVNode(" A simple dark alert with "),
+          createVNode(_component_CAlertLink, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("an example link")
+            ]),
+            _: 1
+          }),
+          createTextVNode(". Give it a click if you like. ")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_15, [
+      createVNode(_component_CAlert, { color: "success" }, {
+        default: withCtx(() => [
+          createVNode(_component_CAlertHeading, null, {
+            default: withCtx(() => [
+              createTextVNode("Well done!")
+            ]),
+            _: 1
+          }),
+          _hoisted_16,
+          _hoisted_17,
+          _hoisted_18
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_22, [
+      createVNode(_component_CAlert, {
+        color: "primary",
+        class: "d-flex align-items-center"
+      }, {
+        default: withCtx(() => [
+          _hoisted_23,
+          _hoisted_24
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_25,
+    createBaseVNode("div", _hoisted_27, [
+      createVNode(_component_CAlert, {
+        color: "primary",
+        class: "d-flex align-items-center"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: "cil-info",
+            class: "flex-shrink-0 me-2",
+            width: "24",
+            height: "24"
+          }),
+          _hoisted_28
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "success",
+        class: "d-flex align-items-center"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: "cil-check-circle",
+            class: "flex-shrink-0 me-2",
+            width: "24",
+            height: "24"
+          }),
+          _hoisted_29
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "warning",
+        class: "d-flex align-items-center"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: "cil-warning",
+            class: "flex-shrink-0 me-2",
+            width: "24",
+            height: "24"
+          }),
+          _hoisted_30
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "danger",
+        class: "d-flex align-items-center"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: "cil-burn",
+            class: "flex-shrink-0 me-2",
+            width: "24",
+            height: "24"
+          }),
+          _hoisted_31
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_35, [
+      createVNode(_component_CAlert, {
+        color: "primary",
+        variant: "solid"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid primary alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "secondary",
+        variant: "solid"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid secondary alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "success",
+        variant: "solid"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid success alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "danger",
+        variant: "solid"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid danger alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "warning",
+        variant: "solid"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid warning alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "info",
+        variant: "solid"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid info alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "light",
+        variant: "solid",
+        class: "text-high-emphasis"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid light alert—check it out!")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        color: "dark",
+        variant: "solid"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("A simple solid dark alert—check it out!")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_36,
+    createBaseVNode("div", _hoisted_39, [
+      createVNode(_component_CAlert, {
+        color: "warning",
+        dismissible: "",
+        onClose: $options.alert
+      }, {
+        default: withCtx(() => [
+          _hoisted_40,
+          createTextVNode(" and click that dimiss over there on the right. ")
+        ]),
+        _: 1
+      }, 8, ["onClose"])
+    ]),
+    _hoisted_41,
+    createVNode(_component_ScssDocs, {
+      file: "_alert.scss",
+      capture: "alert-css-vars"
+    }),
+    _hoisted_45,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "alert-variables"
+    }),
+    _hoisted_48
+  ]);
+}
+const alert_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "alert.html.vue"]]);
+const data = JSON.parse('{"path":"/components/alert.html","title":"Vue Alert Component","lang":"en-US","frontmatter":{"title":"Vue Alert Component","name":"Alert","description":"Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.","other_frameworks":"alert","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/alert.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Live example","slug":"live-example","link":"#live-example","children":[]},{"level":3,"title":"Link color","slug":"link-color","link":"#link-color","children":[]},{"level":3,"title":"Additional content","slug":"additional-content","link":"#additional-content","children":[]},{"level":3,"title":"Icons","slug":"icons","link":"#icons","children":[]},{"level":3,"title":"Solid","slug":"solid","link":"#solid","children":[]},{"level":3,"title":"Dismissing","slug":"dismissing","link":"#dismissing","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CAlert","slug":"calert","link":"#calert","children":[]},{"level":3,"title":"CAlertHeading","slug":"calertheading","link":"#calertheading","children":[]}]}],"filePathRelative":"components/alert.md"}');
+export {
+  alert_html as comp,
+  data
+};
diff --git a/vue/docs/assets/alert.html-X_cq_Izb.js b/vue/docs/assets/alert.html-X_cq_Izb.js
deleted file mode 100644
index cde4c083a4e..00000000000
--- a/vue/docs/assets/alert.html-X_cq_Izb.js
+++ /dev/null
@@ -1,486 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  data() {
-    return {
-      liveExampleVisible: false
-    };
-  },
-  methods: {
-    alert() {
-      alert("👋 Well, hi there! Thanks for dismissing me.");
-    }
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "examples",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Examples "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("Vue Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the "),
-  /* @__PURE__ */ createBaseVNode("strong", null, "required"),
-  /* @__PURE__ */ createTextVNode(" contextual "),
-  /* @__PURE__ */ createBaseVNode("code", null, "color"),
-  /* @__PURE__ */ createTextVNode(" props (e.g., "),
-  /* @__PURE__ */ createBaseVNode("code", null, "primary"),
-  /* @__PURE__ */ createTextVNode("). For inline dismissal, use the "),
-  /* @__PURE__ */ createBaseVNode("a", { href: "#dismissing" }, "dismissing prop"),
-  /* @__PURE__ */ createTextVNode(".")
-], -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple primary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple secondary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple success alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple danger alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple warning alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple info alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple light alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple dark alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="live-example" tabindex="-1">Live example <a class="anchor-link" href="#live-example" aria-hidden="true">#</a></h3><p>Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.</p>', 3);
-const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>liveExampleVisible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dismissible</span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { liveExampleVisible = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple primary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { liveExampleVisible = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Show live alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="link-color" tabindex="-1">Link color <a class="anchor-link" href="#link-color" aria-hidden="true">#</a></h3><p>Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored links inside any alert.</p>', 3);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple primary alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple secondary alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple success alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple danger alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple warning alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple info alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple light alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  A simple dark alert with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>an example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertLink</span><span class="token punctuation">&gt;</span></span>. Give it a click if you like.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="additional-content" tabindex="-1">Additional content <a class="anchor-link" href="#additional-content" aria-hidden="true">#</a></h3><p>Alert can also incorporate supplementary HTML elements like heading, paragraph, and divider.</p>', 3);
-const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createBaseVNode("p", null, "Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.", -1);
-const _hoisted_17 = /* @__PURE__ */ createBaseVNode("hr", null, null, -1);
-const _hoisted_18 = /* @__PURE__ */ createBaseVNode("p", { class: "mb-0" }, "Whenever you need to, be sure to use margin utilities to keep things nice and tidy.", -1);
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlertHeading</span><span class="token punctuation">&gt;</span></span>Well done!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlertHeading</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="icons" tabindex="-1">Icons <a class="anchor-link" href="#icons" aria-hidden="true">#</a></h3><p>Similarly, you can use <a href="https//coreui.io/docs/4.0/utilities/flex%22">flexbox utilities</a> and <a href="https://icons.coreui.io" target="_blank" rel="noopener noreferrer">CoreUI Icons</a> to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.</p>', 3);
-const _hoisted_22 = { class: "docs-example rounded-top p-4" };
-const _hoisted_23 = /* @__PURE__ */ createBaseVNode("svg", {
-  class: "flex-shrink-0 me-2",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 512 512"
-}, [
-  /* @__PURE__ */ createBaseVNode("rect", {
-    width: "32",
-    height: "176",
-    x: "240",
-    y: "176",
-    fill: "var(--ci-primary-color, currentColor)",
-    class: "ci-primary"
-  }),
-  /* @__PURE__ */ createBaseVNode("rect", {
-    width: "32",
-    height: "32",
-    x: "240",
-    y: "384",
-    fill: "var(--ci-primary-color, currentColor)",
-    class: "ci-primary"
-  }),
-  /* @__PURE__ */ createBaseVNode("path", {
-    fill: "var(--ci-primary-color, currentColor)",
-    d: "M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z",
-    class: "ci-primary"
-  })
-], -1);
-const _hoisted_24 = /* @__PURE__ */ createBaseVNode("div", null, " An example alert with an icon ", -1);
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 512 512<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>176<span class="token punctuation">&quot;</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>240<span class="token punctuation">&quot;</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>176<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>var(--ci-primary-color, currentColor)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>240<span class="token punctuation">&quot;</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>384<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>var(--ci-primary-color, currentColor)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>var(--ci-primary-color, currentColor)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Need more than one icon for your alerts? Consider using <a href="https://icons.coreui.io" target="_blank" rel="noopener noreferrer">CoreUI Icons</a>.</p>', 2);
-const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createBaseVNode("div", null, " An example alert with an icon ", -1);
-const _hoisted_29 = /* @__PURE__ */ createBaseVNode("div", null, " An example success alert with an icon ", -1);
-const _hoisted_30 = /* @__PURE__ */ createBaseVNode("div", null, " An example warning alert with an icon ", -1);
-const _hoisted_31 = /* @__PURE__ */ createBaseVNode("div", null, " An example danger alert with an icon ", -1);
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-check-circle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example success alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example warning alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-burn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-shrink-0 me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    An example danger alert with an icon</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="solid" tabindex="-1">Solid <a class="anchor-link" href="#solid" aria-hidden="true">#</a></h3><p>Use <code>variant=&quot;solid&quot;</code> to change contextual colors to solid.</p>', 3);
-const _hoisted_35 = { class: "docs-example rounded-top p-4" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid primary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid secondary alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid success alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid danger alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid warning alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid info alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid light alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple solid dark alert—check it out!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dismissing" tabindex="-1">Dismissing <a class="anchor-link" href="#dismissing" aria-hidden="true">#</a></h3><p>Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.</p>', 3);
-const _hoisted_39 = { class: "docs-example rounded-top p-4" };
-const _hoisted_40 = /* @__PURE__ */ createBaseVNode("strong", null, "Go right ahead", -1);
-const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-markup line-numbers-mode" data-ext="markup" data-title="markup"><pre class="language-markup"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dismissible</span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Go right ahead<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> and click that dimiss over there on the right.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">alert</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;👋 Well, hi there! Thanks for dismissing me.&quot;</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue alerts use local CSS variables on <code>.alert</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CAlert <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CAlert<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlert <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlert <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlert&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to alert and allow it to self dismisss.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the alert variant to a solid.</td><td>string</td><td><code>&#39;solid&#39;</code></td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr></tbody></table><h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAlertHeading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAlertHeading <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/alert/CAlertHeading&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h4&#39;</td></tr></tbody></table>', 11);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CAlert = resolveComponent("CAlert");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CAlertLink = resolveComponent("CAlertLink");
-  const _component_CAlertHeading = resolveComponent("CAlertHeading");
-  const _component_CIcon = resolveComponent("CIcon");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    createBaseVNode("div", _hoisted_3, [
-      createVNode(_component_CAlert, { color: "primary" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple primary alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple secondary alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "success" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple success alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "danger" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple danger alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "warning" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple warning alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "info" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple info alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "light" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple light alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "dark" }, {
-        default: withCtx(() => [
-          createTextVNode("A simple dark alert—check it out!")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_7, [
-      createVNode(_component_CAlert, {
-        color: "primary",
-        visible: $data.liveExampleVisible,
-        dismissible: "",
-        onClose: _cache[0] || (_cache[0] = () => {
-          $data.liveExampleVisible = false;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple primary alert—check it out!")
-        ]),
-        _: 1
-      }, 8, ["visible"]),
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[1] || (_cache[1] = () => {
-          $data.liveExampleVisible = true;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Show live alert")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_8,
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CAlert, { color: "primary" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple primary alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple secondary alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "success" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple success alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "danger" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple danger alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "warning" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple warning alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "info" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple info alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "light" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple light alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, { color: "dark" }, {
-        default: withCtx(() => [
-          createTextVNode(" A simple dark alert with "),
-          createVNode(_component_CAlertLink, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("an example link")
-            ]),
-            _: 1
-          }),
-          createTextVNode(". Give it a click if you like. ")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_12,
-    createBaseVNode("div", _hoisted_15, [
-      createVNode(_component_CAlert, { color: "success" }, {
-        default: withCtx(() => [
-          createVNode(_component_CAlertHeading, null, {
-            default: withCtx(() => [
-              createTextVNode("Well done!")
-            ]),
-            _: 1
-          }),
-          _hoisted_16,
-          _hoisted_17,
-          _hoisted_18
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_19,
-    createBaseVNode("div", _hoisted_22, [
-      createVNode(_component_CAlert, {
-        color: "primary",
-        class: "d-flex align-items-center"
-      }, {
-        default: withCtx(() => [
-          _hoisted_23,
-          _hoisted_24
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_25,
-    createBaseVNode("div", _hoisted_27, [
-      createVNode(_component_CAlert, {
-        color: "primary",
-        class: "d-flex align-items-center"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CIcon, {
-            icon: "cil-info",
-            class: "flex-shrink-0 me-2",
-            width: "24",
-            height: "24"
-          }),
-          _hoisted_28
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "success",
-        class: "d-flex align-items-center"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CIcon, {
-            icon: "cil-check-circle",
-            class: "flex-shrink-0 me-2",
-            width: "24",
-            height: "24"
-          }),
-          _hoisted_29
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "warning",
-        class: "d-flex align-items-center"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CIcon, {
-            icon: "cil-warning",
-            class: "flex-shrink-0 me-2",
-            width: "24",
-            height: "24"
-          }),
-          _hoisted_30
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "danger",
-        class: "d-flex align-items-center"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CIcon, {
-            icon: "cil-burn",
-            class: "flex-shrink-0 me-2",
-            width: "24",
-            height: "24"
-          }),
-          _hoisted_31
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_32,
-    createBaseVNode("div", _hoisted_35, [
-      createVNode(_component_CAlert, {
-        color: "primary",
-        variant: "solid"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid primary alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "secondary",
-        variant: "solid"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid secondary alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "success",
-        variant: "solid"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid success alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "danger",
-        variant: "solid"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid danger alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "warning",
-        variant: "solid"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid warning alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "info",
-        variant: "solid"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid info alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "light",
-        variant: "solid",
-        class: "text-high-emphasis"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid light alert—check it out!")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        color: "dark",
-        variant: "solid"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("A simple solid dark alert—check it out!")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_36,
-    createBaseVNode("div", _hoisted_39, [
-      createVNode(_component_CAlert, {
-        color: "warning",
-        dismissible: "",
-        onClose: $options.alert
-      }, {
-        default: withCtx(() => [
-          _hoisted_40,
-          createTextVNode(" and click that dimiss over there on the right. ")
-        ]),
-        _: 1
-      }, 8, ["onClose"])
-    ]),
-    _hoisted_41,
-    createVNode(_component_ScssDocs, {
-      file: "_alert.scss",
-      capture: "alert-css-vars"
-    }),
-    _hoisted_45,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "alert-variables"
-    }),
-    _hoisted_48
-  ]);
-}
-const alert_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "alert.html.vue"]]);
-const data = JSON.parse('{"path":"/components/alert.html","title":"Vue Alert Component","lang":"en-US","frontmatter":{"title":"Vue Alert Component","name":"Alert","description":"Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.","other_frameworks":"alert","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/alert.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Live example","slug":"live-example","link":"#live-example","children":[]},{"level":3,"title":"Link color","slug":"link-color","link":"#link-color","children":[]},{"level":3,"title":"Additional content","slug":"additional-content","link":"#additional-content","children":[]},{"level":3,"title":"Icons","slug":"icons","link":"#icons","children":[]},{"level":3,"title":"Solid","slug":"solid","link":"#solid","children":[]},{"level":3,"title":"Dismissing","slug":"dismissing","link":"#dismissing","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CAlert","slug":"calert","link":"#calert","children":[]},{"level":3,"title":"CAlertHeading","slug":"calertheading","link":"#calertheading","children":[]}]}],"filePathRelative":"components/alert.md"}');
-export {
-  alert_html as comp,
-  data
-};
diff --git a/vue/docs/assets/app-Dv803XR0.js b/vue/docs/assets/app-BoHWg5jI.js
similarity index 91%
rename from vue/docs/assets/app-Dv803XR0.js
rename to vue/docs/assets/app-BoHWg5jI.js
index 7b69ba734ed..ad3bbef56da 100644
--- a/vue/docs/assets/app-Dv803XR0.js
+++ b/vue/docs/assets/app-BoHWg5jI.js
@@ -1,10 +1,7 @@
-const __vite__fileDeps=["assets/date-picker.html-BgpVpDIS.js","assets/es-C71wN8BW.js","assets/date-range-picker.html-CNgPdL07.js","assets/multi-select.html-Cj9cgsAk.js","assets/cif-us-C2ywU_oW.js","assets/icon.html-D5YAsQ5X.js"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/date-picker.html-DXrgyOW0.js","assets/es-DXofg4kJ.js","assets/date-range-picker.html-T7otEH2H.js","assets/multi-select.html-DP6UryqG.js","assets/cif-us-C2ywU_oW.js","assets/icon.html-C2C1fAVP.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
 const scriptRel = "modulepreload";
 const assetsURL = function(dep) {
@@ -15,36 +12,42 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   let promise2 = Promise.resolve();
   if (deps && deps.length > 0) {
     document.getElementsByTagName("link");
-    const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
+    const cspNonceMeta = document.querySelector(
+      "meta[property=csp-nonce]"
+    );
     const cspNonce = (cspNonceMeta == null ? void 0 : cspNonceMeta.nonce) || (cspNonceMeta == null ? void 0 : cspNonceMeta.getAttribute("nonce"));
-    promise2 = Promise.all(deps.map((dep) => {
-      dep = assetsURL(dep);
-      if (dep in seen)
-        return;
-      seen[dep] = true;
-      const isCss = dep.endsWith(".css");
-      const cssSelector = isCss ? '[rel="stylesheet"]' : "";
-      if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
-        return;
-      }
-      const link = document.createElement("link");
-      link.rel = isCss ? "stylesheet" : scriptRel;
-      if (!isCss) {
-        link.as = "script";
-        link.crossOrigin = "";
-      }
-      link.href = dep;
-      if (cspNonce) {
-        link.setAttribute("nonce", cspNonce);
-      }
-      document.head.appendChild(link);
-      if (isCss) {
-        return new Promise((res, rej) => {
-          link.addEventListener("load", res);
-          link.addEventListener("error", () => rej(new Error(`Unable to preload CSS for ${dep}`)));
-        });
-      }
-    }));
+    promise2 = Promise.all(
+      deps.map((dep) => {
+        dep = assetsURL(dep);
+        if (dep in seen) return;
+        seen[dep] = true;
+        const isCss = dep.endsWith(".css");
+        const cssSelector = isCss ? '[rel="stylesheet"]' : "";
+        if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
+          return;
+        }
+        const link = document.createElement("link");
+        link.rel = isCss ? "stylesheet" : scriptRel;
+        if (!isCss) {
+          link.as = "script";
+          link.crossOrigin = "";
+        }
+        link.href = dep;
+        if (cspNonce) {
+          link.setAttribute("nonce", cspNonce);
+        }
+        document.head.appendChild(link);
+        if (isCss) {
+          return new Promise((res, rej) => {
+            link.addEventListener("load", res);
+            link.addEventListener(
+              "error",
+              () => rej(new Error(`Unable to preload CSS for ${dep}`))
+            );
+          });
+        }
+      })
+    );
   }
   return promise2.then(() => baseModule()).catch((err) => {
     const e2 = new Event("vite:preloadError", { cancelable: true });
@@ -56,7 +59,7 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   });
 };
 /**
-* @vue/shared v3.4.27
+* @vue/shared v3.4.34
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -130,9 +133,9 @@ const toHandlerKey = cacheStringFunction((str) => {
   return s2;
 });
 const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
-const invokeArrayFns = (fns, arg) => {
+const invokeArrayFns = (fns, ...arg) => {
   for (let i2 = 0; i2 < fns.length; i2++) {
-    fns[i2](arg);
+    fns[i2](...arg);
   }
 };
 const def = (obj, key, value, writable = false) => {
@@ -246,11 +249,14 @@ function isRenderableAttrValue(value) {
   const type = typeof value;
   return type === "string" || type === "number" || type === "boolean";
 }
+const isRef$1 = (val) => {
+  return !!(val && val.__v_isRef === true);
+};
 const toDisplayString = (val) => {
-  return isString$1(val) ? val : val == null ? "" : isArray$c(val) || isObject$d(val) && (val.toString === objectToString$2 || !isFunction$6(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
+  return isString$1(val) ? val : val == null ? "" : isArray$c(val) || isObject$d(val) && (val.toString === objectToString$2 || !isFunction$6(val.toString)) ? isRef$1(val) ? toDisplayString(val.value) : JSON.stringify(val, replacer, 2) : String(val);
 };
 const replacer = (_key, val) => {
-  if (val && val.__v_isRef) {
+  if (isRef$1(val)) {
     return replacer(_key, val.value);
   } else if (isMap(val)) {
     return {
@@ -282,7 +288,7 @@ const stringifySymbol = (v2, i2 = "") => {
   );
 };
 /**
-* @vue/reactivity v3.4.27
+* @vue/reactivity v3.4.34
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -662,8 +668,7 @@ function createArrayInstrumentations() {
   return instrumentations;
 }
 function hasOwnProperty$d(key) {
-  if (!isSymbol$5(key))
-    key = String(key);
+  if (!isSymbol$5(key)) key = String(key);
   const obj = toRaw(this);
   track(obj, "has", key);
   return obj.hasOwnProperty(key);
@@ -842,8 +847,10 @@ function size(target, isReadonly2 = false) {
   !isReadonly2 && track(toRaw(target), "iterate", ITERATE_KEY);
   return Reflect.get(target, "size", target);
 }
-function add(value) {
-  value = toRaw(value);
+function add(value, _isShallow = false) {
+  if (!_isShallow && !isShallow(value) && !isReadonly(value)) {
+    value = toRaw(value);
+  }
   const target = toRaw(this);
   const proto = getProto(target);
   const hadKey = proto.has.call(target, value);
@@ -853,8 +860,10 @@ function add(value) {
   }
   return this;
 }
-function set$1(key, value) {
-  value = toRaw(value);
+function set$1(key, value, _isShallow = false) {
+  if (!_isShallow && !isShallow(value) && !isReadonly(value)) {
+    value = toRaw(value);
+  }
   const target = toRaw(this);
   const { has: has2, get: get2 } = getProto(target);
   let hadKey = has2.call(target, key);
@@ -977,8 +986,12 @@ function createInstrumentations() {
       return size(this);
     },
     has,
-    add,
-    set: set$1,
+    add(value) {
+      return add.call(this, value, true);
+    },
+    set(key, value) {
+      return set$1.call(this, key, value, true);
+    },
     delete: deleteEntry,
     clear,
     forEach: createForEach(false, true)
@@ -1145,7 +1158,11 @@ function shallowReadonly(target) {
 function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
   if (!isObject$d(target)) {
     {
-      warn$3(`value cannot be made reactive: ${String(target)}`);
+      warn$3(
+        `value cannot be made ${isReadonly2 ? "readonly" : "reactive"}: ${String(
+          target
+        )}`
+      );
     }
     return target;
   }
@@ -1279,7 +1296,7 @@ function trackRefValue(ref2) {
     );
   }
 }
-function triggerRefValue(ref2, dirtyLevel = 4, newVal) {
+function triggerRefValue(ref2, dirtyLevel = 4, newVal, oldVal) {
   ref2 = toRaw(ref2);
   const dep = ref2.dep;
   if (dep) {
@@ -1290,7 +1307,8 @@ function triggerRefValue(ref2, dirtyLevel = 4, newVal) {
         target: ref2,
         type: "set",
         key: "value",
-        newValue: newVal
+        newValue: newVal,
+        oldValue: oldVal
       }
     );
   }
@@ -1326,9 +1344,10 @@ class RefImpl {
     const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
     newVal = useDirectValue ? newVal : toRaw(newVal);
     if (hasChanged(newVal, this._rawValue)) {
+      const oldVal = this._rawValue;
       this._rawValue = newVal;
       this._value = useDirectValue ? newVal : toReactive(newVal);
-      triggerRefValue(this, 4, newVal);
+      triggerRefValue(this, 4, newVal, oldVal);
     }
   }
 }
@@ -1404,7 +1423,7 @@ function propertyToRef(source, key, defaultValue) {
   return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
 }
 /**
-* @vue/runtime-core v3.4.27
+* @vue/runtime-core v3.4.34
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -1415,7 +1434,10 @@ function pushWarningContext(vnode) {
 function popWarningContext() {
   stack.pop();
 }
+let isWarning = false;
 function warn$1(msg, ...args) {
+  if (isWarning) return;
+  isWarning = true;
   pauseTracking();
   const instance = stack.length ? stack[stack.length - 1].component : null;
   const appWarnHandler = instance && instance.appContext.config.warnHandler;
@@ -1426,6 +1448,7 @@ function warn$1(msg, ...args) {
       instance,
       11,
       [
+        // eslint-disable-next-line no-restricted-syntax
         msg + args.map((a2) => {
           var _a2, _b;
           return (_b = (_a2 = a2.toString) == null ? void 0 : _a2.call(a2)) != null ? _b : JSON.stringify(a2);
@@ -1447,6 +1470,7 @@ function warn$1(msg, ...args) {
     console.warn(...warnArgs);
   }
   resetTracking();
+  isWarning = false;
 }
 function getComponentTrace() {
   let currentVNode = stack[stack.length - 1];
@@ -1553,7 +1577,8 @@ const ErrorTypeStrings$1 = {
   [11]: "app warnHandler",
   [12]: "ref function",
   [13]: "async component loader",
-  [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core ."
+  [14]: "scheduler flush",
+  [15]: "component update"
 };
 function callWithErrorHandling(fn3, instance, type, args) {
   try {
@@ -1647,7 +1672,7 @@ function nextTick(fn3) {
   const p2 = currentFlushPromise || resolvedPromise;
   return fn3 ? p2.then(this ? fn3.bind(this) : fn3) : p2;
 }
-function findInsertionIndex(id) {
+function findInsertionIndex$1(id) {
   let start2 = flushIndex + 1;
   let end2 = queue.length;
   while (start2 < end2) {
@@ -1670,7 +1695,7 @@ function queueJob(job) {
     if (job.id == null) {
       queue.push(job);
     } else {
-      queue.splice(findInsertionIndex(job.id), 0, job);
+      queue.splice(findInsertionIndex$1(job.id), 0, job);
     }
     queueFlush();
   }
@@ -1734,10 +1759,11 @@ function flushPostFlushCbs(seen2) {
       seen2 = seen2 || /* @__PURE__ */ new Map();
     }
     for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
-      if (checkRecursiveUpdates(seen2, activePostFlushCbs[postFlushIndex])) {
+      const cb = activePostFlushCbs[postFlushIndex];
+      if (checkRecursiveUpdates(seen2, cb)) {
         continue;
       }
-      activePostFlushCbs[postFlushIndex]();
+      if (cb.active !== false) cb();
     }
     activePostFlushCbs = null;
     postFlushIndex = 0;
@@ -1747,10 +1773,8 @@ const getId = (job) => job.id == null ? Infinity : job.id;
 const comparator = (a2, b2) => {
   const diff = getId(a2) - getId(b2);
   if (diff === 0) {
-    if (a2.pre && !b2.pre)
-      return -1;
-    if (b2.pre && !a2.pre)
-      return 1;
+    if (a2.pre && !b2.pre) return -1;
+    if (b2.pre && !a2.pre) return 1;
   }
   return diff;
 };
@@ -1769,7 +1793,11 @@ function flushJobs(seen2) {
         if (check(job)) {
           continue;
         }
-        callWithErrorHandling(job, null, 14);
+        callWithErrorHandling(
+          job,
+          job.i,
+          job.i ? 15 : 14
+        );
       }
     }
   } finally {
@@ -1789,7 +1817,7 @@ function checkRecursiveUpdates(seen2, fn3) {
   } else {
     const count = seen2.get(fn3);
     if (count > RECURSION_LIMIT) {
-      const instance = fn3.ownerInstance;
+      const instance = fn3.i;
       const componentName = instance && getComponentName(instance.type);
       handleError(
         `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
@@ -1803,7 +1831,7 @@ function checkRecursiveUpdates(seen2, fn3) {
   }
 }
 let isHmrUpdating = false;
-const hmrDirtyComponents = /* @__PURE__ */ new Set();
+const hmrDirtyComponents = /* @__PURE__ */ new Map();
 {
   getGlobalThis().__VUE_HMR_RUNTIME__ = {
     createRecord: tryWrap(createRecord),
@@ -1857,29 +1885,34 @@ function rerender(id, newRender) {
 }
 function reload(id, newComp) {
   const record = map$3.get(id);
-  if (!record)
-    return;
+  if (!record) return;
   newComp = normalizeClassComponent(newComp);
   updateComponentDef(record.initialDef, newComp);
   const instances2 = [...record.instances];
-  for (const instance of instances2) {
+  for (let i2 = 0; i2 < instances2.length; i2++) {
+    const instance = instances2[i2];
     const oldComp = normalizeClassComponent(instance.type);
-    if (!hmrDirtyComponents.has(oldComp)) {
+    let dirtyInstances = hmrDirtyComponents.get(oldComp);
+    if (!dirtyInstances) {
       if (oldComp !== record.initialDef) {
         updateComponentDef(oldComp, newComp);
       }
-      hmrDirtyComponents.add(oldComp);
+      hmrDirtyComponents.set(oldComp, dirtyInstances = /* @__PURE__ */ new Set());
     }
+    dirtyInstances.add(instance);
     instance.appContext.propsCache.delete(instance.type);
     instance.appContext.emitsCache.delete(instance.type);
     instance.appContext.optionsCache.delete(instance.type);
     if (instance.ceReload) {
-      hmrDirtyComponents.add(oldComp);
+      dirtyInstances.add(instance);
       instance.ceReload(newComp.styles);
-      hmrDirtyComponents.delete(oldComp);
+      dirtyInstances.delete(instance);
     } else if (instance.parent) {
       instance.parent.effect.dirty = true;
-      queueJob(instance.parent.update);
+      queueJob(() => {
+        instance.parent.update();
+        dirtyInstances.delete(instance);
+      });
     } else if (instance.appContext.reload) {
       instance.appContext.reload();
     } else if (typeof window !== "undefined") {
@@ -1891,11 +1924,7 @@ function reload(id, newComp) {
     }
   }
   queuePostFlushCb(() => {
-    for (const instance of instances2) {
-      hmrDirtyComponents.delete(
-        normalizeClassComponent(instance.type)
-      );
-    }
+    hmrDirtyComponents.clear();
   });
 }
 function updateComponentDef(oldComp, newComp) {
@@ -1941,6 +1970,7 @@ function setDevtoolsHook$1(hook, target) {
     // (#4815)
     typeof window !== "undefined" && // some envs mock window but not fully
     window.HTMLElement && // also exclude jsdom
+    // eslint-disable-next-line no-restricted-syntax
     !((_b = (_a2 = window.navigator) == null ? void 0 : _a2.userAgent) == null ? void 0 : _b.includes("jsdom"))
   ) {
     const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || [];
@@ -2023,144 +2053,6 @@ function devtoolsComponentEmit(component, event, params) {
     params
   );
 }
-function emit(instance, event, ...rawArgs) {
-  if (instance.isUnmounted)
-    return;
-  const props = instance.vnode.props || EMPTY_OBJ;
-  {
-    const {
-      emitsOptions,
-      propsOptions: [propsOptions]
-    } = instance;
-    if (emitsOptions) {
-      if (!(event in emitsOptions) && true) {
-        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
-          warn$1(
-            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
-          );
-        }
-      } else {
-        const validator = emitsOptions[event];
-        if (isFunction$6(validator)) {
-          const isValid = validator(...rawArgs);
-          if (!isValid) {
-            warn$1(
-              `Invalid event arguments: event validation failed for event "${event}".`
-            );
-          }
-        }
-      }
-    }
-  }
-  let args = rawArgs;
-  const isModelListener2 = event.startsWith("update:");
-  const modelArg = isModelListener2 && event.slice(7);
-  if (modelArg && modelArg in props) {
-    const modifiersKey = `${modelArg === "modelValue" ? "model" : modelArg}Modifiers`;
-    const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
-    if (trim) {
-      args = rawArgs.map((a2) => isString$1(a2) ? a2.trim() : a2);
-    }
-    if (number) {
-      args = rawArgs.map(looseToNumber);
-    }
-  }
-  {
-    devtoolsComponentEmit(instance, event, args);
-  }
-  {
-    const lowerCaseEvent = event.toLowerCase();
-    if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
-      warn$1(
-        `Event "${lowerCaseEvent}" is emitted in component ${formatComponentName(
-          instance,
-          instance.type
-        )} but the handler is registered for "${event}". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "${hyphenate(
-          event
-        )}" instead of "${event}".`
-      );
-    }
-  }
-  let handlerName;
-  let handler = props[handlerName = toHandlerKey(event)] || // also try camelCase event handler (#2249)
-  props[handlerName = toHandlerKey(camelize(event))];
-  if (!handler && isModelListener2) {
-    handler = props[handlerName = toHandlerKey(hyphenate(event))];
-  }
-  if (handler) {
-    callWithAsyncErrorHandling(
-      handler,
-      instance,
-      6,
-      args
-    );
-  }
-  const onceHandler = props[handlerName + `Once`];
-  if (onceHandler) {
-    if (!instance.emitted) {
-      instance.emitted = {};
-    } else if (instance.emitted[handlerName]) {
-      return;
-    }
-    instance.emitted[handlerName] = true;
-    callWithAsyncErrorHandling(
-      onceHandler,
-      instance,
-      6,
-      args
-    );
-  }
-}
-function normalizeEmitsOptions(comp, appContext, asMixin = false) {
-  const cache = appContext.emitsCache;
-  const cached = cache.get(comp);
-  if (cached !== void 0) {
-    return cached;
-  }
-  const raw = comp.emits;
-  let normalized = {};
-  let hasExtends = false;
-  if (!isFunction$6(comp)) {
-    const extendEmits = (raw2) => {
-      const normalizedFromExtend = normalizeEmitsOptions(raw2, appContext, true);
-      if (normalizedFromExtend) {
-        hasExtends = true;
-        extend(normalized, normalizedFromExtend);
-      }
-    };
-    if (!asMixin && appContext.mixins.length) {
-      appContext.mixins.forEach(extendEmits);
-    }
-    if (comp.extends) {
-      extendEmits(comp.extends);
-    }
-    if (comp.mixins) {
-      comp.mixins.forEach(extendEmits);
-    }
-  }
-  if (!raw && !hasExtends) {
-    if (isObject$d(comp)) {
-      cache.set(comp, null);
-    }
-    return null;
-  }
-  if (isArray$c(raw)) {
-    raw.forEach((key) => normalized[key] = null);
-  } else {
-    extend(normalized, raw);
-  }
-  if (isObject$d(comp)) {
-    cache.set(comp, normalized);
-  }
-  return normalized;
-}
-function isEmitListener(options, key) {
-  if (!options || !isOn(key)) {
-    return false;
-  }
-  key = key.slice(2).replace(/Once$/, "");
-  return hasOwn(options, key[0].toLowerCase() + key.slice(1)) || hasOwn(options, hyphenate(key)) || hasOwn(options, key);
-}
 let currentRenderingInstance = null;
 let currentScopeId = null;
 function setCurrentRenderingInstance(instance) {
@@ -2170,8 +2062,7 @@ function setCurrentRenderingInstance(instance) {
   return prev;
 }
 function withCtx(fn3, ctx = currentRenderingInstance, isNonScopedSlot) {
-  if (!ctx)
-    return fn3;
+  if (!ctx) return fn3;
   if (fn3._n) {
     return fn3;
   }
@@ -2199,742 +2090,136 @@ function withCtx(fn3, ctx = currentRenderingInstance, isNonScopedSlot) {
   renderFnWithContext._d = true;
   return renderFnWithContext;
 }
-let accessedAttrs = false;
-function markAttrsAccessed() {
-  accessedAttrs = true;
+function validateDirectiveName(name) {
+  if (isBuiltInDirective(name)) {
+    warn$1("Do not use built-in directive ids as custom directive id: " + name);
+  }
 }
-function renderComponentRoot(instance) {
-  const {
-    type: Component,
-    vnode,
-    proxy,
-    withProxy,
-    propsOptions: [propsOptions],
-    slots,
-    attrs,
-    emit: emit2,
-    render,
-    renderCache,
-    props,
-    data,
-    setupState,
-    ctx,
-    inheritAttrs
-  } = instance;
-  const prev = setCurrentRenderingInstance(instance);
-  let result;
-  let fallthroughAttrs;
-  {
-    accessedAttrs = false;
+function withDirectives(vnode, directives) {
+  if (currentRenderingInstance === null) {
+    warn$1(`withDirectives can only be used inside render functions.`);
+    return vnode;
   }
-  try {
-    if (vnode.shapeFlag & 4) {
-      const proxyToUse = withProxy || proxy;
-      const thisProxy = setupState.__isScriptSetup ? new Proxy(proxyToUse, {
-        get(target, key, receiver) {
-          warn$1(
-            `Property '${String(
-              key
-            )}' was accessed via 'this'. Avoid using 'this' in templates.`
-          );
-          return Reflect.get(target, key, receiver);
-        }
-      }) : proxyToUse;
-      result = normalizeVNode(
-        render.call(
-          thisProxy,
-          proxyToUse,
-          renderCache,
-          true ? shallowReadonly(props) : props,
-          setupState,
-          data,
-          ctx
-        )
-      );
-      fallthroughAttrs = attrs;
-    } else {
-      const render2 = Component;
-      if (attrs === props) {
-        markAttrsAccessed();
+  const instance = getComponentPublicInstance(currentRenderingInstance);
+  const bindings = vnode.dirs || (vnode.dirs = []);
+  for (let i2 = 0; i2 < directives.length; i2++) {
+    let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i2];
+    if (dir) {
+      if (isFunction$6(dir)) {
+        dir = {
+          mounted: dir,
+          updated: dir
+        };
       }
-      result = normalizeVNode(
-        render2.length > 1 ? render2(
-          true ? shallowReadonly(props) : props,
-          true ? {
-            get attrs() {
-              markAttrsAccessed();
-              return shallowReadonly(attrs);
-            },
-            slots,
-            emit: emit2
-          } : { attrs, slots, emit: emit2 }
-        ) : render2(
-          true ? shallowReadonly(props) : props,
-          null
-        )
-      );
-      fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs);
-    }
-  } catch (err) {
-    blockStack.length = 0;
-    handleError(err, instance, 1);
-    result = createVNode(Comment);
-  }
-  let root2 = result;
-  let setRoot = void 0;
-  if (result.patchFlag > 0 && result.patchFlag & 2048) {
-    [root2, setRoot] = getChildRoot(result);
-  }
-  if (fallthroughAttrs && inheritAttrs !== false) {
-    const keys2 = Object.keys(fallthroughAttrs);
-    const { shapeFlag } = root2;
-    if (keys2.length) {
-      if (shapeFlag & (1 | 6)) {
-        if (propsOptions && keys2.some(isModelListener)) {
-          fallthroughAttrs = filterModelListeners(
-            fallthroughAttrs,
-            propsOptions
-          );
-        }
-        root2 = cloneVNode(root2, fallthroughAttrs, false, true);
-      } else if (!accessedAttrs && root2.type !== Comment) {
-        const allAttrs = Object.keys(attrs);
-        const eventAttrs = [];
-        const extraAttrs = [];
-        for (let i2 = 0, l2 = allAttrs.length; i2 < l2; i2++) {
-          const key = allAttrs[i2];
-          if (isOn(key)) {
-            if (!isModelListener(key)) {
-              eventAttrs.push(key[2].toLowerCase() + key.slice(3));
-            }
-          } else {
-            extraAttrs.push(key);
-          }
-        }
-        if (extraAttrs.length) {
-          warn$1(
-            `Extraneous non-props attributes (${extraAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.`
-          );
-        }
-        if (eventAttrs.length) {
-          warn$1(
-            `Extraneous non-emits event listeners (${eventAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.`
-          );
-        }
+      if (dir.deep) {
+        traverse(value);
       }
+      bindings.push({
+        dir,
+        instance,
+        value,
+        oldValue: void 0,
+        arg,
+        modifiers
+      });
     }
   }
-  if (vnode.dirs) {
-    if (!isElementRoot(root2)) {
-      warn$1(
-        `Runtime directive used on component with non-element root node. The directives will not function as intended.`
-      );
+  return vnode;
+}
+function invokeDirectiveHook(vnode, prevVNode, instance, name) {
+  const bindings = vnode.dirs;
+  const oldBindings = prevVNode && prevVNode.dirs;
+  for (let i2 = 0; i2 < bindings.length; i2++) {
+    const binding = bindings[i2];
+    if (oldBindings) {
+      binding.oldValue = oldBindings[i2].value;
     }
-    root2 = cloneVNode(root2, null, false, true);
-    root2.dirs = root2.dirs ? root2.dirs.concat(vnode.dirs) : vnode.dirs;
-  }
-  if (vnode.transition) {
-    if (!isElementRoot(root2)) {
-      warn$1(
-        `Component inside <Transition> renders non-element root node that cannot be animated.`
-      );
+    let hook = binding.dir[name];
+    if (hook) {
+      pauseTracking();
+      callWithAsyncErrorHandling(hook, instance, 8, [
+        vnode.el,
+        binding,
+        vnode,
+        prevVNode
+      ]);
+      resetTracking();
     }
-    root2.transition = vnode.transition;
-  }
-  if (setRoot) {
-    setRoot(root2);
-  } else {
-    result = root2;
   }
-  setCurrentRenderingInstance(prev);
-  return result;
 }
-const getChildRoot = (vnode) => {
-  const rawChildren = vnode.children;
-  const dynamicChildren = vnode.dynamicChildren;
-  const childRoot = filterSingleRoot(rawChildren, false);
-  if (!childRoot) {
-    return [vnode, void 0];
-  } else if (childRoot.patchFlag > 0 && childRoot.patchFlag & 2048) {
-    return getChildRoot(childRoot);
-  }
-  const index2 = rawChildren.indexOf(childRoot);
-  const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
-  const setRoot = (updatedRoot) => {
-    rawChildren[index2] = updatedRoot;
-    if (dynamicChildren) {
-      if (dynamicIndex > -1) {
-        dynamicChildren[dynamicIndex] = updatedRoot;
-      } else if (updatedRoot.patchFlag > 0) {
-        vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
-      }
-    }
+const leaveCbKey = Symbol("_leaveCb");
+const enterCbKey = Symbol("_enterCb");
+function useTransitionState() {
+  const state = {
+    isMounted: false,
+    isLeaving: false,
+    isUnmounting: false,
+    leavingVNodes: /* @__PURE__ */ new Map()
   };
-  return [normalizeVNode(childRoot), setRoot];
-};
-function filterSingleRoot(children, recurse = true) {
-  let singleRoot;
-  for (let i2 = 0; i2 < children.length; i2++) {
-    const child = children[i2];
-    if (isVNode(child)) {
-      if (child.type !== Comment || child.children === "v-if") {
-        if (singleRoot) {
-          return;
-        } else {
-          singleRoot = child;
-          if (recurse && singleRoot.patchFlag > 0 && singleRoot.patchFlag & 2048) {
-            return filterSingleRoot(singleRoot.children);
-          }
-        }
-      }
-    } else {
-      return;
-    }
-  }
-  return singleRoot;
+  onMounted(() => {
+    state.isMounted = true;
+  });
+  onBeforeUnmount(() => {
+    state.isUnmounting = true;
+  });
+  return state;
 }
-const getFunctionalFallthrough = (attrs) => {
-  let res;
-  for (const key in attrs) {
-    if (key === "class" || key === "style" || isOn(key)) {
-      (res || (res = {}))[key] = attrs[key];
-    }
-  }
-  return res;
-};
-const filterModelListeners = (attrs, props) => {
-  const res = {};
-  for (const key in attrs) {
-    if (!isModelListener(key) || !(key.slice(9) in props)) {
-      res[key] = attrs[key];
-    }
-  }
-  return res;
+const TransitionHookValidator = [Function, Array];
+const BaseTransitionPropsValidators = {
+  mode: String,
+  appear: Boolean,
+  persisted: Boolean,
+  // enter
+  onBeforeEnter: TransitionHookValidator,
+  onEnter: TransitionHookValidator,
+  onAfterEnter: TransitionHookValidator,
+  onEnterCancelled: TransitionHookValidator,
+  // leave
+  onBeforeLeave: TransitionHookValidator,
+  onLeave: TransitionHookValidator,
+  onAfterLeave: TransitionHookValidator,
+  onLeaveCancelled: TransitionHookValidator,
+  // appear
+  onBeforeAppear: TransitionHookValidator,
+  onAppear: TransitionHookValidator,
+  onAfterAppear: TransitionHookValidator,
+  onAppearCancelled: TransitionHookValidator
 };
-const isElementRoot = (vnode) => {
-  return vnode.shapeFlag & (6 | 1) || vnode.type === Comment;
+const recursiveGetSubtree = (instance) => {
+  const subTree = instance.subTree;
+  return subTree.component ? recursiveGetSubtree(subTree.component) : subTree;
 };
-function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
-  const { props: prevProps, children: prevChildren, component } = prevVNode;
-  const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;
-  const emits = component.emitsOptions;
-  if ((prevChildren || nextChildren) && isHmrUpdating) {
-    return true;
-  }
-  if (nextVNode.dirs || nextVNode.transition) {
-    return true;
-  }
-  if (optimized && patchFlag >= 0) {
-    if (patchFlag & 1024) {
-      return true;
-    }
-    if (patchFlag & 16) {
-      if (!prevProps) {
-        return !!nextProps;
+const BaseTransitionImpl = {
+  name: `BaseTransition`,
+  props: BaseTransitionPropsValidators,
+  setup(props, { slots }) {
+    const instance = getCurrentInstance();
+    const state = useTransitionState();
+    return () => {
+      const children = slots.default && getTransitionRawChildren(slots.default(), true);
+      if (!children || !children.length) {
+        return;
       }
-      return hasPropsChanged(prevProps, nextProps, emits);
-    } else if (patchFlag & 8) {
-      const dynamicProps = nextVNode.dynamicProps;
-      for (let i2 = 0; i2 < dynamicProps.length; i2++) {
-        const key = dynamicProps[i2];
-        if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) {
-          return true;
+      let child = children[0];
+      if (children.length > 1) {
+        let hasFound = false;
+        for (const c2 of children) {
+          if (c2.type !== Comment) {
+            if (hasFound) {
+              warn$1(
+                "<transition> can only be used on a single element or component. Use <transition-group> for lists."
+              );
+              break;
+            }
+            child = c2;
+            hasFound = true;
+          }
         }
       }
-    }
-  } else {
-    if (prevChildren || nextChildren) {
-      if (!nextChildren || !nextChildren.$stable) {
-        return true;
-      }
-    }
-    if (prevProps === nextProps) {
-      return false;
-    }
-    if (!prevProps) {
-      return !!nextProps;
-    }
-    if (!nextProps) {
-      return true;
-    }
-    return hasPropsChanged(prevProps, nextProps, emits);
-  }
-  return false;
-}
-function hasPropsChanged(prevProps, nextProps, emitsOptions) {
-  const nextKeys = Object.keys(nextProps);
-  if (nextKeys.length !== Object.keys(prevProps).length) {
-    return true;
-  }
-  for (let i2 = 0; i2 < nextKeys.length; i2++) {
-    const key = nextKeys[i2];
-    if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) {
-      return true;
-    }
-  }
-  return false;
-}
-function updateHOCHostEl({ vnode, parent }, el) {
-  while (parent) {
-    const root2 = parent.subTree;
-    if (root2.suspense && root2.suspense.activeBranch === vnode) {
-      root2.el = vnode.el;
-    }
-    if (root2 === vnode) {
-      (vnode = parent.vnode).el = el;
-      parent = parent.parent;
-    } else {
-      break;
-    }
-  }
-}
-const COMPONENTS = "components";
-const DIRECTIVES = "directives";
-function resolveComponent(name, maybeSelfReference) {
-  return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
-}
-const NULL_DYNAMIC_COMPONENT = Symbol.for("v-ndc");
-function resolveDirective(name) {
-  return resolveAsset(DIRECTIVES, name);
-}
-function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
-  const instance = currentRenderingInstance || currentInstance;
-  if (instance) {
-    const Component = instance.type;
-    if (type === COMPONENTS) {
-      const selfName = getComponentName(
-        Component,
-        false
-      );
-      if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
-        return Component;
-      }
-    }
-    const res = (
-      // local registration
-      // check instance[type] first which is resolved for options API
-      resolve$1(instance[type] || Component[type], name) || // global registration
-      resolve$1(instance.appContext[type], name)
-    );
-    if (!res && maybeSelfReference) {
-      return Component;
-    }
-    if (warnMissing && !res) {
-      const extra = type === COMPONENTS ? `
-If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``;
-      warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
-    }
-    return res;
-  } else {
-    warn$1(
-      `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().`
-    );
-  }
-}
-function resolve$1(registry2, name) {
-  return registry2 && (registry2[name] || registry2[camelize(name)] || registry2[capitalize(camelize(name))]);
-}
-const isSuspense = (type) => type.__isSuspense;
-function queueEffectWithSuspense(fn3, suspense) {
-  if (suspense && suspense.pendingBranch) {
-    if (isArray$c(fn3)) {
-      suspense.effects.push(...fn3);
-    } else {
-      suspense.effects.push(fn3);
-    }
-  } else {
-    queuePostFlushCb(fn3);
-  }
-}
-const ssrContextKey = Symbol.for("v-scx");
-const useSSRContext = () => {
-  {
-    const ctx = inject(ssrContextKey);
-    if (!ctx) {
-      warn$1(
-        `Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.`
-      );
-    }
-    return ctx;
-  }
-};
-function watchEffect(effect2, options) {
-  return doWatch(effect2, null, options);
-}
-const INITIAL_WATCHER_VALUE = {};
-function watch(source, cb, options) {
-  if (!isFunction$6(cb)) {
-    warn$1(
-      `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
-    );
-  }
-  return doWatch(source, cb, options);
-}
-function doWatch(source, cb, {
-  immediate,
-  deep,
-  flush,
-  once,
-  onTrack,
-  onTrigger
-} = EMPTY_OBJ) {
-  if (cb && once) {
-    const _cb = cb;
-    cb = (...args) => {
-      _cb(...args);
-      unwatch();
-    };
-  }
-  if (deep !== void 0 && typeof deep === "number") {
-    warn$1(
-      `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
-    );
-  }
-  if (!cb) {
-    if (immediate !== void 0) {
-      warn$1(
-        `watch() "immediate" option is only respected when using the watch(source, callback, options?) signature.`
-      );
-    }
-    if (deep !== void 0) {
-      warn$1(
-        `watch() "deep" option is only respected when using the watch(source, callback, options?) signature.`
-      );
-    }
-    if (once !== void 0) {
-      warn$1(
-        `watch() "once" option is only respected when using the watch(source, callback, options?) signature.`
-      );
-    }
-  }
-  const warnInvalidSource = (s2) => {
-    warn$1(
-      `Invalid watch source: `,
-      s2,
-      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
-    );
-  };
-  const instance = currentInstance;
-  const reactiveGetter = (source2) => deep === true ? source2 : (
-    // for deep: false, only traverse root-level properties
-    traverse(source2, deep === false ? 1 : void 0)
-  );
-  let getter;
-  let forceTrigger = false;
-  let isMultiSource = false;
-  if (isRef(source)) {
-    getter = () => source.value;
-    forceTrigger = isShallow(source);
-  } else if (isReactive(source)) {
-    getter = () => reactiveGetter(source);
-    forceTrigger = true;
-  } else if (isArray$c(source)) {
-    isMultiSource = true;
-    forceTrigger = source.some((s2) => isReactive(s2) || isShallow(s2));
-    getter = () => source.map((s2) => {
-      if (isRef(s2)) {
-        return s2.value;
-      } else if (isReactive(s2)) {
-        return reactiveGetter(s2);
-      } else if (isFunction$6(s2)) {
-        return callWithErrorHandling(s2, instance, 2);
-      } else {
-        warnInvalidSource(s2);
-      }
-    });
-  } else if (isFunction$6(source)) {
-    if (cb) {
-      getter = () => callWithErrorHandling(source, instance, 2);
-    } else {
-      getter = () => {
-        if (cleanup) {
-          cleanup();
-        }
-        return callWithAsyncErrorHandling(
-          source,
-          instance,
-          3,
-          [onCleanup]
-        );
-      };
-    }
-  } else {
-    getter = NOOP;
-    warnInvalidSource(source);
-  }
-  if (cb && deep) {
-    const baseGetter = getter;
-    getter = () => traverse(baseGetter());
-  }
-  let cleanup;
-  let onCleanup = (fn3) => {
-    cleanup = effect2.onStop = () => {
-      callWithErrorHandling(fn3, instance, 4);
-      cleanup = effect2.onStop = void 0;
-    };
-  };
-  let ssrCleanup;
-  if (isInSSRComponentSetup) {
-    onCleanup = NOOP;
-    if (!cb) {
-      getter();
-    } else if (immediate) {
-      callWithAsyncErrorHandling(cb, instance, 3, [
-        getter(),
-        isMultiSource ? [] : void 0,
-        onCleanup
-      ]);
-    }
-    if (flush === "sync") {
-      const ctx = useSSRContext();
-      ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
-    } else {
-      return NOOP;
-    }
-  }
-  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
-  const job = () => {
-    if (!effect2.active || !effect2.dirty) {
-      return;
-    }
-    if (cb) {
-      const newValue = effect2.run();
-      if (deep || forceTrigger || (isMultiSource ? newValue.some((v2, i2) => hasChanged(v2, oldValue[i2])) : hasChanged(newValue, oldValue)) || false) {
-        if (cleanup) {
-          cleanup();
-        }
-        callWithAsyncErrorHandling(cb, instance, 3, [
-          newValue,
-          // pass undefined as the old value when it's changed for the first time
-          oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
-          onCleanup
-        ]);
-        oldValue = newValue;
-      }
-    } else {
-      effect2.run();
-    }
-  };
-  job.allowRecurse = !!cb;
-  let scheduler;
-  if (flush === "sync") {
-    scheduler = job;
-  } else if (flush === "post") {
-    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
-  } else {
-    job.pre = true;
-    if (instance)
-      job.id = instance.uid;
-    scheduler = () => queueJob(job);
-  }
-  const effect2 = new ReactiveEffect(getter, NOOP, scheduler);
-  const scope = getCurrentScope();
-  const unwatch = () => {
-    effect2.stop();
-    if (scope) {
-      remove(scope.effects, effect2);
-    }
-  };
-  {
-    effect2.onTrack = onTrack;
-    effect2.onTrigger = onTrigger;
-  }
-  if (cb) {
-    if (immediate) {
-      job();
-    } else {
-      oldValue = effect2.run();
-    }
-  } else if (flush === "post") {
-    queuePostRenderEffect(
-      effect2.run.bind(effect2),
-      instance && instance.suspense
-    );
-  } else {
-    effect2.run();
-  }
-  if (ssrCleanup)
-    ssrCleanup.push(unwatch);
-  return unwatch;
-}
-function instanceWatch(source, value, options) {
-  const publicThis = this.proxy;
-  const getter = isString$1(source) ? source.includes(".") ? createPathGetter(publicThis, source) : () => publicThis[source] : source.bind(publicThis, publicThis);
-  let cb;
-  if (isFunction$6(value)) {
-    cb = value;
-  } else {
-    cb = value.handler;
-    options = value;
-  }
-  const reset = setCurrentInstance(this);
-  const res = doWatch(getter, cb.bind(publicThis), options);
-  reset();
-  return res;
-}
-function createPathGetter(ctx, path) {
-  const segments = path.split(".");
-  return () => {
-    let cur = ctx;
-    for (let i2 = 0; i2 < segments.length && cur; i2++) {
-      cur = cur[segments[i2]];
-    }
-    return cur;
-  };
-}
-function traverse(value, depth = Infinity, seen2) {
-  if (depth <= 0 || !isObject$d(value) || value["__v_skip"]) {
-    return value;
-  }
-  seen2 = seen2 || /* @__PURE__ */ new Set();
-  if (seen2.has(value)) {
-    return value;
-  }
-  seen2.add(value);
-  depth--;
-  if (isRef(value)) {
-    traverse(value.value, depth, seen2);
-  } else if (isArray$c(value)) {
-    for (let i2 = 0; i2 < value.length; i2++) {
-      traverse(value[i2], depth, seen2);
-    }
-  } else if (isSet(value) || isMap(value)) {
-    value.forEach((v2) => {
-      traverse(v2, depth, seen2);
-    });
-  } else if (isPlainObject$4(value)) {
-    for (const key in value) {
-      traverse(value[key], depth, seen2);
-    }
-  }
-  return value;
-}
-function validateDirectiveName(name) {
-  if (isBuiltInDirective(name)) {
-    warn$1("Do not use built-in directive ids as custom directive id: " + name);
-  }
-}
-function withDirectives(vnode, directives) {
-  if (currentRenderingInstance === null) {
-    warn$1(`withDirectives can only be used inside render functions.`);
-    return vnode;
-  }
-  const instance = getExposeProxy(currentRenderingInstance) || currentRenderingInstance.proxy;
-  const bindings = vnode.dirs || (vnode.dirs = []);
-  for (let i2 = 0; i2 < directives.length; i2++) {
-    let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i2];
-    if (dir) {
-      if (isFunction$6(dir)) {
-        dir = {
-          mounted: dir,
-          updated: dir
-        };
-      }
-      if (dir.deep) {
-        traverse(value);
-      }
-      bindings.push({
-        dir,
-        instance,
-        value,
-        oldValue: void 0,
-        arg,
-        modifiers
-      });
-    }
-  }
-  return vnode;
-}
-function invokeDirectiveHook(vnode, prevVNode, instance, name) {
-  const bindings = vnode.dirs;
-  const oldBindings = prevVNode && prevVNode.dirs;
-  for (let i2 = 0; i2 < bindings.length; i2++) {
-    const binding = bindings[i2];
-    if (oldBindings) {
-      binding.oldValue = oldBindings[i2].value;
-    }
-    let hook = binding.dir[name];
-    if (hook) {
-      pauseTracking();
-      callWithAsyncErrorHandling(hook, instance, 8, [
-        vnode.el,
-        binding,
-        vnode,
-        prevVNode
-      ]);
-      resetTracking();
-    }
-  }
-}
-const leaveCbKey = Symbol("_leaveCb");
-const enterCbKey = Symbol("_enterCb");
-function useTransitionState() {
-  const state = {
-    isMounted: false,
-    isLeaving: false,
-    isUnmounting: false,
-    leavingVNodes: /* @__PURE__ */ new Map()
-  };
-  onMounted(() => {
-    state.isMounted = true;
-  });
-  onBeforeUnmount(() => {
-    state.isUnmounting = true;
-  });
-  return state;
-}
-const TransitionHookValidator = [Function, Array];
-const BaseTransitionPropsValidators = {
-  mode: String,
-  appear: Boolean,
-  persisted: Boolean,
-  // enter
-  onBeforeEnter: TransitionHookValidator,
-  onEnter: TransitionHookValidator,
-  onAfterEnter: TransitionHookValidator,
-  onEnterCancelled: TransitionHookValidator,
-  // leave
-  onBeforeLeave: TransitionHookValidator,
-  onLeave: TransitionHookValidator,
-  onAfterLeave: TransitionHookValidator,
-  onLeaveCancelled: TransitionHookValidator,
-  // appear
-  onBeforeAppear: TransitionHookValidator,
-  onAppear: TransitionHookValidator,
-  onAfterAppear: TransitionHookValidator,
-  onAppearCancelled: TransitionHookValidator
-};
-const BaseTransitionImpl = {
-  name: `BaseTransition`,
-  props: BaseTransitionPropsValidators,
-  setup(props, { slots }) {
-    const instance = getCurrentInstance();
-    const state = useTransitionState();
-    return () => {
-      const children = slots.default && getTransitionRawChildren(slots.default(), true);
-      if (!children || !children.length) {
-        return;
-      }
-      let child = children[0];
-      if (children.length > 1) {
-        let hasFound = false;
-        for (const c2 of children) {
-          if (c2.type !== Comment) {
-            if (hasFound) {
-              warn$1(
-                "<transition> can only be used on a single element or component. Use <transition-group> for lists."
-              );
-              break;
-            }
-            child = c2;
-            hasFound = true;
-          }
-        }
-      }
-      const rawProps = toRaw(props);
-      const { mode } = rawProps;
-      if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {
-        warn$1(`invalid <transition> mode: ${mode}`);
+      const rawProps = toRaw(props);
+      const { mode } = rawProps;
+      if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {
+        warn$1(`invalid <transition> mode: ${mode}`);
       }
       if (state.isLeaving) {
         return emptyPlaceholder(child);
@@ -2943,16 +2228,18 @@ const BaseTransitionImpl = {
       if (!innerChild) {
         return emptyPlaceholder(child);
       }
-      const enterHooks = resolveTransitionHooks(
+      let enterHooks = resolveTransitionHooks(
         innerChild,
         rawProps,
         state,
-        instance
+        instance,
+        // #11061, ensure enterHooks is fresh after clone
+        (hooks) => enterHooks = hooks
       );
       setTransitionHooks(innerChild, enterHooks);
       const oldChild = instance.subTree;
       const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
-      if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild)) {
+      if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild) && recursiveGetSubtree(instance).type !== Comment) {
         const leavingHooks = resolveTransitionHooks(
           oldInnerChild,
           rawProps,
@@ -3000,7 +2287,7 @@ function getLeavingNodesForType(state, vnode) {
   }
   return leavingVNodesCache;
 }
-function resolveTransitionHooks(vnode, props, state, instance) {
+function resolveTransitionHooks(vnode, props, state, instance, postClone) {
   const {
     appear,
     mode,
@@ -3032,8 +2319,7 @@ function resolveTransitionHooks(vnode, props, state, instance) {
     const done = args[1];
     callHook2(hook, args);
     if (isArray$c(hook)) {
-      if (hook.every((hook2) => hook2.length <= 1))
-        done();
+      if (hook.every((hook2) => hook2.length <= 1)) done();
     } else if (hook.length <= 1) {
       done();
     }
@@ -3077,8 +2363,7 @@ function resolveTransitionHooks(vnode, props, state, instance) {
       }
       let called = false;
       const done = el[enterCbKey] = (cancelled) => {
-        if (called)
-          return;
+        if (called) return;
         called = true;
         if (cancelled) {
           callHook2(cancelHook, [el]);
@@ -3110,8 +2395,7 @@ function resolveTransitionHooks(vnode, props, state, instance) {
       callHook2(onBeforeLeave, [el]);
       let called = false;
       const done = el[leaveCbKey] = (cancelled) => {
-        if (called)
-          return;
+        if (called) return;
         called = true;
         remove2();
         if (cancelled) {
@@ -3132,7 +2416,15 @@ function resolveTransitionHooks(vnode, props, state, instance) {
       }
     },
     clone(vnode2) {
-      return resolveTransitionHooks(vnode2, props, state, instance);
+      const hooks2 = resolveTransitionHooks(
+        vnode2,
+        props,
+        state,
+        instance,
+        postClone
+      );
+      if (postClone) postClone(hooks2);
+      return hooks2;
     }
   };
   return hooks;
@@ -3178,8 +2470,7 @@ function getTransitionRawChildren(children, keepComment = false, parentKey) {
     let child = children[i2];
     const key = parentKey == null ? child.key : String(parentKey) + String(child.key != null ? child.key : i2);
     if (child.type === Fragment) {
-      if (child.patchFlag & 128)
-        keyedFragmentCount++;
+      if (child.patchFlag & 128) keyedFragmentCount++;
       ret = ret.concat(
         getTransitionRawChildren(child.children, keepComment, key)
       );
@@ -3386,9 +2677,6 @@ function injectHook(type, hook, target = currentInstance, prepend = false) {
   if (target) {
     const hooks = target[type] || (target[type] = []);
     const wrappedHook = hook.__weh || (hook.__weh = (...args) => {
-      if (target.isUnmounted) {
-        return;
-      }
       pauseTracking();
       const reset = setCurrentInstance(target);
       const res = callWithAsyncErrorHandling(hook, target, type, args);
@@ -3409,10 +2697,11 @@ function injectHook(type, hook, target = currentInstance, prepend = false) {
     );
   }
 }
-const createHook = (lifecycle) => (hook, target = currentInstance) => (
-  // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
-  (!isInSSRComponentSetup || lifecycle === "sp") && injectHook(lifecycle, (...args) => hook(...args), target)
-);
+const createHook = (lifecycle) => (hook, target = currentInstance) => {
+  if (!isInSSRComponentSetup || lifecycle === "sp") {
+    injectHook(lifecycle, (...args) => hook(...args), target);
+  }
+};
 const onBeforeMount = createHook("bm");
 const onMounted = createHook("m");
 const onBeforeUpdate = createHook("bu");
@@ -3429,27 +2718,73 @@ const onRenderTracked = createHook(
 function onErrorCaptured(hook, target = currentInstance) {
   injectHook("ec", hook, target);
 }
-function renderList(source, renderItem, cache, index2) {
-  let ret;
-  const cached = cache;
-  if (isArray$c(source) || isString$1(source)) {
-    ret = new Array(source.length);
-    for (let i2 = 0, l2 = source.length; i2 < l2; i2++) {
-      ret[i2] = renderItem(source[i2], i2, void 0, cached);
-    }
-  } else if (typeof source === "number") {
-    if (!Number.isInteger(source)) {
-      warn$1(`The v-for range expect an integer value but got ${source}.`);
-    }
-    ret = new Array(source);
-    for (let i2 = 0; i2 < source; i2++) {
-      ret[i2] = renderItem(i2 + 1, i2, void 0, cached);
-    }
-  } else if (isObject$d(source)) {
-    if (source[Symbol.iterator]) {
-      ret = Array.from(
-        source,
-        (item, i2) => renderItem(item, i2, void 0, cached)
+const COMPONENTS = "components";
+const DIRECTIVES = "directives";
+function resolveComponent(name, maybeSelfReference) {
+  return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
+}
+const NULL_DYNAMIC_COMPONENT = Symbol.for("v-ndc");
+function resolveDirective(name) {
+  return resolveAsset(DIRECTIVES, name);
+}
+function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
+  const instance = currentRenderingInstance || currentInstance;
+  if (instance) {
+    const Component = instance.type;
+    if (type === COMPONENTS) {
+      const selfName = getComponentName(
+        Component,
+        false
+      );
+      if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
+        return Component;
+      }
+    }
+    const res = (
+      // local registration
+      // check instance[type] first which is resolved for options API
+      resolve$1(instance[type] || Component[type], name) || // global registration
+      resolve$1(instance.appContext[type], name)
+    );
+    if (!res && maybeSelfReference) {
+      return Component;
+    }
+    if (warnMissing && !res) {
+      const extra = type === COMPONENTS ? `
+If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``;
+      warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
+    }
+    return res;
+  } else {
+    warn$1(
+      `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().`
+    );
+  }
+}
+function resolve$1(registry2, name) {
+  return registry2 && (registry2[name] || registry2[camelize(name)] || registry2[capitalize(camelize(name))]);
+}
+function renderList(source, renderItem, cache, index2) {
+  let ret;
+  const cached = cache;
+  if (isArray$c(source) || isString$1(source)) {
+    ret = new Array(source.length);
+    for (let i2 = 0, l2 = source.length; i2 < l2; i2++) {
+      ret[i2] = renderItem(source[i2], i2, void 0, cached);
+    }
+  } else if (typeof source === "number") {
+    if (!Number.isInteger(source)) {
+      warn$1(`The v-for range expect an integer value but got ${source}.`);
+    }
+    ret = new Array(source);
+    for (let i2 = 0; i2 < source; i2++) {
+      ret[i2] = renderItem(i2 + 1, i2, void 0, cached);
+    }
+  } else if (isObject$d(source)) {
+    if (source[Symbol.iterator]) {
+      ret = Array.from(
+        source,
+        (item, i2) => renderItem(item, i2, void 0, cached)
       );
     } else {
       const keys2 = Object.keys(source);
@@ -3483,9 +2818,10 @@ function renderSlot(slots, name, props = {}, fallback, noSlotted) {
   const rendered = createBlock(
     Fragment,
     {
-      key: props.key || // slot content array of a dynamic conditional slot may have a branch
+      key: (props.key || // slot content array of a dynamic conditional slot may have a branch
       // key attached in the `createSlots` helper, respect that
-      validSlotContent && validSlotContent.key || `_${name}`
+      validSlotContent && validSlotContent.key || `_${name}`) + // #7256 force differentiate fallback content from actual content
+      (!validSlotContent && fallback ? "_fb" : "")
     },
     validSlotContent || [],
     validSlotContent && slots._ === 1 ? 64 : -2
@@ -3500,10 +2836,8 @@ function renderSlot(slots, name, props = {}, fallback, noSlotted) {
 }
 function ensureValidVNode(vnodes) {
   return vnodes.some((child) => {
-    if (!isVNode(child))
-      return true;
-    if (child.type === Comment)
-      return false;
+    if (!isVNode(child)) return true;
+    if (child.type === Comment) return false;
     if (child.type === Fragment && !ensureValidVNode(child.children))
       return false;
     return true;
@@ -3521,10 +2855,8 @@ function toHandlers(obj, preserveCaseIfNecessary) {
   return ret;
 }
 const getPublicInstance = (i2) => {
-  if (!i2)
-    return null;
-  if (isStatefulComponent(i2))
-    return getExposeProxy(i2) || i2.proxy;
+  if (!i2) return null;
+  if (isStatefulComponent(i2)) return getComponentPublicInstance(i2);
   return getPublicInstance(i2.parent);
 };
 const publicPropertiesMap = (
@@ -3951,10 +3283,8 @@ function applyOptions(instance) {
   if (inheritAttrs != null) {
     instance.inheritAttrs = inheritAttrs;
   }
-  if (components)
-    instance.components = components;
-  if (directives)
-    instance.directives = directives;
+  if (components) instance.components = components;
+  if (directives) instance.directives = directives;
 }
 function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP) {
   if (isArray$c(injectOptions)) {
@@ -4155,10 +3485,8 @@ function mergeEmitsOrPropsOptions(to2, from2) {
   }
 }
 function mergeWatchOptions(to2, from2) {
-  if (!to2)
-    return from2;
-  if (!from2)
-    return to2;
+  if (!to2) return from2;
+  if (!from2) return to2;
   const merged = extend(/* @__PURE__ */ Object.create(null), to2);
   for (const key in from2) {
     merged[key] = mergeAsArray(to2[key], from2[key]);
@@ -4307,7 +3635,7 @@ function createAppAPI(render, hydrate) {
             app._instance = vnode.component;
             devtoolsInitApp(app, version$1);
           }
-          return getExposeProxy(vnode.component) || vnode.component.proxy;
+          return getComponentPublicInstance(vnode.component);
         } else {
           warn$1(
             `App has already been mounted.
@@ -4408,8 +3736,7 @@ function initProps(instance, rawProps, isStateful, isSSR = false) {
 }
 function isInHmrContext(instance) {
   while (instance) {
-    if (instance.type.__hmrId)
-      return true;
+    if (instance.type.__hmrId) return true;
     instance = instance.parent;
   }
 }
@@ -4585,8 +3912,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
   }
   return value;
 }
+const mixinPropsCache = /* @__PURE__ */ new WeakMap();
 function normalizePropsOptions(comp, appContext, asMixin = false) {
-  const cache = appContext.propsCache;
+  const cache = asMixin ? mixinPropsCache : appContext.propsCache;
   const cached = cache.get(comp);
   if (cached) {
     return cached;
@@ -4600,8 +3928,7 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
       hasExtends = true;
       const [props, keys2] = normalizePropsOptions(raw2, appContext, true);
       extend(normalized, props);
-      if (keys2)
-        needCastKeys.push(...keys2);
+      if (keys2) needCastKeys.push(...keys2);
     };
     if (!asMixin && appContext.mixins.length) {
       appContext.mixins.forEach(extendProps);
@@ -4698,8 +4025,7 @@ function validateProps(rawProps, props, instance) {
   const options = instance.propsOptions[0];
   for (const key in options) {
     let opt = options[key];
-    if (opt == null)
-      continue;
+    if (opt == null) continue;
     validateProp(
       key,
       resolvedValues[key],
@@ -4816,8 +4142,7 @@ const normalizeSlot$1 = (key, rawSlot, ctx) => {
 const normalizeObjectSlots = (rawSlots, slots, instance) => {
   const ctx = rawSlots._ctx;
   for (const key in rawSlots) {
-    if (isInternalKey(key))
-      continue;
+    if (isInternalKey(key)) continue;
     const value = rawSlots[key];
     if (isFunction$6(value)) {
       slots[key] = normalizeSlot$1(key, value, ctx);
@@ -4841,13 +4166,22 @@ const normalizeVNodeSlots = (instance, children) => {
   const normalized = normalizeSlotValue(children);
   instance.slots.default = () => normalized;
 };
-const initSlots = (instance, children) => {
+const assignSlots = (slots, children, optimized) => {
+  for (const key in children) {
+    if (optimized || key !== "_") {
+      slots[key] = children[key];
+    }
+  }
+};
+const initSlots = (instance, children, optimized) => {
   const slots = instance.slots = createInternalObject();
   if (instance.vnode.shapeFlag & 32) {
     const type = children._;
     if (type) {
-      extend(slots, children);
-      def(slots, "_", type, true);
+      assignSlots(slots, children, optimized);
+      if (optimized) {
+        def(slots, "_", type, true);
+      }
     } else {
       normalizeObjectSlots(children, slots);
     }
@@ -4863,15 +4197,12 @@ const updateSlots = (instance, children, optimized) => {
     const type = children._;
     if (type) {
       if (isHmrUpdating) {
-        extend(slots, children);
+        assignSlots(slots, children, optimized);
         trigger(instance, "set", "$slots");
       } else if (optimized && type === 1) {
         needDeletionCheck = false;
       } else {
-        extend(slots, children);
-        if (!optimized && type === 1) {
-          delete slots._;
-        }
+        assignSlots(slots, children, optimized);
       }
     } else {
       needDeletionCheck = !children.$stable;
@@ -4906,7 +4237,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
   if (isAsyncWrapper(vnode) && !isUnmount) {
     return;
   }
-  const refValue = vnode.shapeFlag & 4 ? getExposeProxy(vnode.component) || vnode.component.proxy : vnode.el;
+  const refValue = vnode.shapeFlag & 4 ? getComponentPublicInstance(vnode.component) : vnode.el;
   const value = isUnmount ? null : refValue;
   const { i: owner, r: ref3 } = rawRef;
   if (!owner) {
@@ -4948,8 +4279,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
                 }
               } else {
                 ref3.value = [refValue];
-                if (rawRef.k)
-                  refs[rawRef.k] = ref3.value;
+                if (rawRef.k) refs[rawRef.k] = ref3.value;
               }
             } else if (!existing.includes(refValue)) {
               existing.push(refValue);
@@ -4962,8 +4292,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
           }
         } else if (_isRef) {
           ref3.value = value;
-          if (rawRef.k)
-            refs[rawRef.k] = value;
+          if (rawRef.k) refs[rawRef.k] = value;
         } else {
           warn$1("Invalid template ref type:", ref3, `(${typeof ref3})`);
         }
@@ -4979,14 +4308,305 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
     }
   }
 }
-let hasMismatch = false;
+const TeleportEndKey = Symbol("_vte");
+const isTeleport = (type) => type.__isTeleport;
+const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === "");
+const isTargetSVG = (target) => typeof SVGElement !== "undefined" && target instanceof SVGElement;
+const isTargetMathML = (target) => typeof MathMLElement === "function" && target instanceof MathMLElement;
+const resolveTarget = (props, select2) => {
+  const targetSelector = props && props.to;
+  if (isString$1(targetSelector)) {
+    if (!select2) {
+      warn$1(
+        `Current renderer does not support string target for Teleports. (missing querySelector renderer option)`
+      );
+      return null;
+    } else {
+      const target = select2(targetSelector);
+      if (!target && !isTeleportDisabled(props)) {
+        warn$1(
+          `Failed to locate Teleport target with selector "${targetSelector}". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree.`
+        );
+      }
+      return target;
+    }
+  } else {
+    if (!targetSelector && !isTeleportDisabled(props)) {
+      warn$1(`Invalid Teleport target: ${targetSelector}`);
+    }
+    return targetSelector;
+  }
+};
+const TeleportImpl = {
+  name: "Teleport",
+  __isTeleport: true,
+  process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, internals) {
+    const {
+      mc: mountChildren,
+      pc: patchChildren,
+      pbc: patchBlockChildren,
+      o: { insert, querySelector, createText, createComment }
+    } = internals;
+    const disabled = isTeleportDisabled(n2.props);
+    let { shapeFlag, children, dynamicChildren } = n2;
+    if (isHmrUpdating) {
+      optimized = false;
+      dynamicChildren = null;
+    }
+    if (n1 == null) {
+      const placeholder2 = n2.el = createComment("teleport start");
+      const mainAnchor = n2.anchor = createComment("teleport end");
+      const target = n2.target = resolveTarget(n2.props, querySelector);
+      const targetStart = n2.targetStart = createText("");
+      const targetAnchor = n2.targetAnchor = createText("");
+      insert(placeholder2, container, anchor);
+      insert(mainAnchor, container, anchor);
+      targetStart[TeleportEndKey] = targetAnchor;
+      if (target) {
+        insert(targetStart, target);
+        insert(targetAnchor, target);
+        if (namespace === "svg" || isTargetSVG(target)) {
+          namespace = "svg";
+        } else if (namespace === "mathml" || isTargetMathML(target)) {
+          namespace = "mathml";
+        }
+      } else if (!disabled) {
+        warn$1("Invalid Teleport target on mount:", target, `(${typeof target})`);
+      }
+      const mount = (container2, anchor2) => {
+        if (shapeFlag & 16) {
+          mountChildren(
+            children,
+            container2,
+            anchor2,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+        }
+      };
+      if (disabled) {
+        mount(container, mainAnchor);
+      } else if (target) {
+        mount(target, targetAnchor);
+      }
+    } else {
+      n2.el = n1.el;
+      n2.targetStart = n1.targetStart;
+      const mainAnchor = n2.anchor = n1.anchor;
+      const target = n2.target = n1.target;
+      const targetAnchor = n2.targetAnchor = n1.targetAnchor;
+      const wasDisabled = isTeleportDisabled(n1.props);
+      const currentContainer = wasDisabled ? container : target;
+      const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
+      if (namespace === "svg" || isTargetSVG(target)) {
+        namespace = "svg";
+      } else if (namespace === "mathml" || isTargetMathML(target)) {
+        namespace = "mathml";
+      }
+      if (dynamicChildren) {
+        patchBlockChildren(
+          n1.dynamicChildren,
+          dynamicChildren,
+          currentContainer,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds
+        );
+        traverseStaticChildren(n1, n2, true);
+      } else if (!optimized) {
+        patchChildren(
+          n1,
+          n2,
+          currentContainer,
+          currentAnchor,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          false
+        );
+      }
+      if (disabled) {
+        if (!wasDisabled) {
+          moveTeleport(
+            n2,
+            container,
+            mainAnchor,
+            internals,
+            1
+          );
+        } else {
+          if (n2.props && n1.props && n2.props.to !== n1.props.to) {
+            n2.props.to = n1.props.to;
+          }
+        }
+      } else {
+        if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
+          const nextTarget = n2.target = resolveTarget(
+            n2.props,
+            querySelector
+          );
+          if (nextTarget) {
+            moveTeleport(
+              n2,
+              nextTarget,
+              null,
+              internals,
+              0
+            );
+          } else {
+            warn$1(
+              "Invalid Teleport target on update:",
+              target,
+              `(${typeof target})`
+            );
+          }
+        } else if (wasDisabled) {
+          moveTeleport(
+            n2,
+            target,
+            targetAnchor,
+            internals,
+            1
+          );
+        }
+      }
+    }
+    updateCssVars(n2);
+  },
+  remove(vnode, parentComponent, parentSuspense, { um: unmount, o: { remove: hostRemove } }, doRemove) {
+    const {
+      shapeFlag,
+      children,
+      anchor,
+      targetStart,
+      targetAnchor,
+      target,
+      props
+    } = vnode;
+    if (target) {
+      hostRemove(targetStart);
+      hostRemove(targetAnchor);
+    }
+    doRemove && hostRemove(anchor);
+    if (shapeFlag & 16) {
+      const shouldRemove = doRemove || !isTeleportDisabled(props);
+      for (let i2 = 0; i2 < children.length; i2++) {
+        const child = children[i2];
+        unmount(
+          child,
+          parentComponent,
+          parentSuspense,
+          shouldRemove,
+          !!child.dynamicChildren
+        );
+      }
+    }
+  },
+  move: moveTeleport,
+  hydrate: hydrateTeleport
+};
+function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2) {
+  if (moveType === 0) {
+    insert(vnode.targetAnchor, container, parentAnchor);
+  }
+  const { el, anchor, shapeFlag, children, props } = vnode;
+  const isReorder = moveType === 2;
+  if (isReorder) {
+    insert(el, container, parentAnchor);
+  }
+  if (!isReorder || isTeleportDisabled(props)) {
+    if (shapeFlag & 16) {
+      for (let i2 = 0; i2 < children.length; i2++) {
+        move(
+          children[i2],
+          container,
+          parentAnchor,
+          2
+        );
+      }
+    }
+  }
+  if (isReorder) {
+    insert(anchor, container, parentAnchor);
+  }
+}
+function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, {
+  o: { nextSibling, parentNode, querySelector }
+}, hydrateChildren) {
+  const target = vnode.target = resolveTarget(
+    vnode.props,
+    querySelector
+  );
+  if (target) {
+    const targetNode = target._lpa || target.firstChild;
+    if (vnode.shapeFlag & 16) {
+      if (isTeleportDisabled(vnode.props)) {
+        vnode.anchor = hydrateChildren(
+          nextSibling(node),
+          vnode,
+          parentNode(node),
+          parentComponent,
+          parentSuspense,
+          slotScopeIds,
+          optimized
+        );
+        vnode.targetAnchor = targetNode;
+      } else {
+        vnode.anchor = nextSibling(node);
+        let targetAnchor = targetNode;
+        while (targetAnchor) {
+          targetAnchor = nextSibling(targetAnchor);
+          if (targetAnchor && targetAnchor.nodeType === 8 && targetAnchor.data === "teleport anchor") {
+            vnode.targetAnchor = targetAnchor;
+            target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
+            break;
+          }
+        }
+        hydrateChildren(
+          targetNode,
+          vnode,
+          target,
+          parentComponent,
+          parentSuspense,
+          slotScopeIds,
+          optimized
+        );
+      }
+    }
+    updateCssVars(vnode);
+  }
+  return vnode.anchor && nextSibling(vnode.anchor);
+}
+const Teleport = TeleportImpl;
+function updateCssVars(vnode) {
+  const ctx = vnode.ctx;
+  if (ctx && ctx.ut) {
+    let node = vnode.children[0].el;
+    while (node && node !== vnode.targetAnchor) {
+      if (node.nodeType === 1) node.setAttribute("data-v-owner", ctx.uid);
+      node = node.nextSibling;
+    }
+    ctx.ut();
+  }
+}
+let hasLoggedMismatchError = false;
+const logMismatchError = () => {
+  if (hasLoggedMismatchError) {
+    return;
+  }
+  console.error("Hydration completed but contains mismatches.");
+  hasLoggedMismatchError = true;
+};
 const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
 const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
 const getContainerType = (container) => {
-  if (isSVGContainer(container))
-    return "svg";
-  if (isMathMLContainer(container))
-    return "mathml";
+  if (isSVGContainer(container)) return "svg";
+  if (isMathMLContainer(container)) return "mathml";
   return void 0;
 };
 const isComment = (node) => node.nodeType === 8;
@@ -5014,13 +4634,9 @@ function createHydrationFunctions(rendererInternals) {
       container._vnode = vnode;
       return;
     }
-    hasMismatch = false;
     hydrateNode(container.firstChild, vnode, null, null, null);
     flushPostFlushCbs();
     container._vnode = vnode;
-    if (hasMismatch && true) {
-      console.error(`Hydration completed but contains mismatches.`);
-    }
   };
   const hydrateNode = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized = false) => {
     optimized = optimized || !!vnode.dynamicChildren;
@@ -5037,18 +4653,8 @@ function createHydrationFunctions(rendererInternals) {
     let domType = node.nodeType;
     vnode.el = node;
     {
-      if (!("__vnode" in node)) {
-        Object.defineProperty(node, "__vnode", {
-          value: vnode,
-          enumerable: false
-        });
-      }
-      if (!("__vueParentComponent" in node)) {
-        Object.defineProperty(node, "__vueParentComponent", {
-          value: parentComponent,
-          enumerable: false
-        });
-      }
+      def(node, "__vnode", vnode, true);
+      def(node, "__vueParentComponent", parentComponent, true);
     }
     if (patchFlag === -2) {
       optimized = false;
@@ -5066,7 +4672,6 @@ function createHydrationFunctions(rendererInternals) {
           }
         } else {
           if (node.data !== vnode.children) {
-            hasMismatch = true;
             warn$1(
               `Hydration text mismatch in`,
               node.parentNode,
@@ -5076,6 +4681,7 @@ function createHydrationFunctions(rendererInternals) {
               )}
   - expected on client: ${JSON.stringify(vnode.children)}`
             );
+            logMismatchError();
             node.data = vnode.children;
           }
           nextNode = nextSibling(node);
@@ -5241,7 +4847,6 @@ function createHydrationFunctions(rendererInternals) {
         );
         let hasWarned2 = false;
         while (next) {
-          hasMismatch = true;
           if (!hasWarned2) {
             warn$1(
               `Hydration children mismatch on`,
@@ -5251,13 +4856,13 @@ Server rendered element contains more child nodes than client vdom.`
             );
             hasWarned2 = true;
           }
+          logMismatchError();
           const cur = next;
           next = next.nextSibling;
           remove2(cur);
         }
       } else if (shapeFlag & 8) {
         if (el.textContent !== vnode.children) {
-          hasMismatch = true;
           warn$1(
             `Hydration text content mismatch on`,
             el,
@@ -5265,26 +4870,23 @@ Server rendered element contains more child nodes than client vdom.`
   - rendered on server: ${el.textContent}
   - expected on client: ${vnode.children}`
           );
+          logMismatchError();
           el.textContent = vnode.children;
         }
       }
       if (props) {
         {
           for (const key in props) {
-            if (propHasMismatch(el, key, props[key], vnode, parentComponent)) {
-              hasMismatch = true;
+            if (
+              // #11189 skip if this node has directives that have created hooks
+              // as it could have mutated the DOM in any possible way
+              !(dirs && dirs.some((d2) => d2.dir.created)) && propHasMismatch(el, key, props[key], vnode, parentComponent)
+            ) {
+              logMismatchError();
             }
             if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
             key[0] === ".") {
-              patchProp2(
-                el,
-                key,
-                null,
-                props[key],
-                void 0,
-                void 0,
-                parentComponent
-              );
+              patchProp2(el, key, null, props[key], void 0, parentComponent);
             }
           }
         }
@@ -5313,7 +4915,21 @@ Server rendered element contains more child nodes than client vdom.`
     let hasWarned2 = false;
     for (let i2 = 0; i2 < l2; i2++) {
       const vnode = optimized ? children[i2] : children[i2] = normalizeVNode(children[i2]);
+      const isText = vnode.type === Text;
       if (node) {
+        if (isText && !optimized) {
+          let next = children[i2 + 1];
+          if (next && (next = normalizeVNode(next)).type === Text) {
+            insert(
+              createText(
+                node.data.slice(vnode.children.length)
+              ),
+              container,
+              nextSibling(node)
+            );
+            node.data = vnode.children;
+          }
+        }
         node = hydrateNode(
           node,
           vnode,
@@ -5322,10 +4938,9 @@ Server rendered element contains more child nodes than client vdom.`
           slotScopeIds,
           optimized
         );
-      } else if (vnode.type === Text && !vnode.children) {
-        continue;
+      } else if (isText && !vnode.children) {
+        insert(vnode.el = createText(""), container);
       } else {
-        hasMismatch = true;
         if (!hasWarned2) {
           warn$1(
             `Hydration children mismatch on`,
@@ -5335,6 +4950,7 @@ Server rendered element contains fewer child nodes than client vdom.`
           );
           hasWarned2 = true;
         }
+        logMismatchError();
         patch(
           null,
           vnode,
@@ -5367,13 +4983,12 @@ Server rendered element contains fewer child nodes than client vdom.`
     if (next && isComment(next) && next.data === "]") {
       return nextSibling(vnode.anchor = next);
     } else {
-      hasMismatch = true;
+      logMismatchError();
       insert(vnode.anchor = createComment(`]`), container, next);
       return next;
     }
   };
   const handleMismatch = (node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragment) => {
-    hasMismatch = true;
     warn$1(
       `Hydration node mismatch:
 - rendered on server:`,
@@ -5383,6 +4998,7 @@ Server rendered element contains fewer child nodes than client vdom.`
 - expected on client:`,
       vnode.type
     );
+    logMismatchError();
     vnode.el = null;
     if (isFragment) {
       const end2 = locateClosingAnchor(node);
@@ -5415,8 +5031,7 @@ Server rendered element contains fewer child nodes than client vdom.`
     while (node) {
       node = nextSibling(node);
       if (node && isComment(node)) {
-        if (node.data === open)
-          match++;
+        if (node.data === open) match++;
         if (node.data === close) {
           if (match === 0) {
             return nextSibling(node);
@@ -5447,7 +5062,6 @@ Server rendered element contains fewer child nodes than client vdom.`
   return [hydrate, hydrateNode];
 }
 function propHasMismatch(el, key, clientValue, vnode, instance) {
-  var _a2;
   let mismatchType;
   let mismatchKey;
   let actual;
@@ -5470,12 +5084,8 @@ function propHasMismatch(el, key, clientValue, vnode, instance) {
         }
       }
     }
-    const root2 = instance == null ? void 0 : instance.subTree;
-    if (vnode === root2 || (root2 == null ? void 0 : root2.type) === Fragment && root2.children.includes(vnode)) {
-      const cssVars = (_a2 = instance == null ? void 0 : instance.getCssVars) == null ? void 0 : _a2.call(instance);
-      for (const key2 in cssVars) {
-        expectedMap.set(`--${key2}`, String(cssVars[key2]));
-      }
+    if (instance) {
+      resolveCssVars(instance, vnode, expectedMap);
     }
     if (!isMapEqual(actualMap, expectedMap)) {
       mismatchType = mismatchKey = "style";
@@ -5535,8 +5145,8 @@ function toStyleMap(str) {
   const styleMap = /* @__PURE__ */ new Map();
   for (const item of str.split(";")) {
     let [key, value] = item.split(":");
-    key = key == null ? void 0 : key.trim();
-    value = value == null ? void 0 : value.trim();
+    key = key.trim();
+    value = value && value.trim();
     if (key && value) {
       styleMap.set(key, value);
     }
@@ -5554,44 +5164,56 @@ function isMapEqual(a2, b2) {
   }
   return true;
 }
-let supported$1;
-let perf$1;
+function resolveCssVars(instance, vnode, expectedMap) {
+  const root2 = instance.subTree;
+  if (instance.getCssVars && (vnode === root2 || root2 && root2.type === Fragment && root2.children.includes(vnode))) {
+    const cssVars = instance.getCssVars();
+    for (const key in cssVars) {
+      expectedMap.set(`--${key}`, String(cssVars[key]));
+    }
+  }
+  if (vnode === root2 && instance.parent) {
+    resolveCssVars(instance.parent, instance.vnode, expectedMap);
+  }
+}
+let supported$2;
+let perf$2;
 function startMeasure(instance, type) {
   if (instance.appContext.config.performance && isSupported()) {
-    perf$1.mark(`vue-${type}-${instance.uid}`);
+    perf$2.mark(`vue-${type}-${instance.uid}`);
   }
   {
-    devtoolsPerfStart(instance, type, isSupported() ? perf$1.now() : Date.now());
+    devtoolsPerfStart(instance, type, isSupported() ? perf$2.now() : Date.now());
   }
 }
 function endMeasure(instance, type) {
   if (instance.appContext.config.performance && isSupported()) {
     const startTag = `vue-${type}-${instance.uid}`;
     const endTag = startTag + `:end`;
-    perf$1.mark(endTag);
-    perf$1.measure(
+    perf$2.mark(endTag);
+    perf$2.measure(
       `<${formatComponentName(instance, instance.type)}> ${type}`,
       startTag,
       endTag
     );
-    perf$1.clearMarks(startTag);
-    perf$1.clearMarks(endTag);
+    perf$2.clearMarks(startTag);
+    perf$2.clearMarks(endTag);
   }
   {
-    devtoolsPerfEnd(instance, type, isSupported() ? perf$1.now() : Date.now());
+    devtoolsPerfEnd(instance, type, isSupported() ? perf$2.now() : Date.now());
   }
 }
 function isSupported() {
-  if (supported$1 !== void 0) {
-    return supported$1;
+  if (supported$2 !== void 0) {
+    return supported$2;
   }
   if (typeof window !== "undefined" && window.performance) {
-    supported$1 = true;
-    perf$1 = window.performance;
+    supported$2 = true;
+    perf$2 = window.performance;
   } else {
-    supported$1 = false;
+    supported$2 = false;
   }
-  return supported$1;
+  return supported$2;
 }
 function initFeatureFlags() {
   const needWarn = [];
@@ -5859,17 +5481,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     if (props) {
       for (const key in props) {
         if (key !== "value" && !isReservedProp(key)) {
-          hostPatchProp(
-            el,
-            key,
-            null,
-            props[key],
-            namespace,
-            vnode.children,
-            parentComponent,
-            parentSuspense,
-            unmountChildren
-          );
+          hostPatchProp(el, key, null, props[key], namespace, parentComponent);
         }
       }
       if ("value" in props) {
@@ -5880,14 +5492,8 @@ function baseCreateRenderer(options, createHydrationFns) {
       }
     }
     {
-      Object.defineProperty(el, "__vnode", {
-        value: vnode,
-        enumerable: false
-      });
-      Object.defineProperty(el, "__vueParentComponent", {
-        value: parentComponent,
-        enumerable: false
-      });
+      def(el, "__vnode", vnode, true);
+      def(el, "__vueParentComponent", parentComponent, true);
     }
     if (dirs) {
       invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
@@ -5949,6 +5555,9 @@ function baseCreateRenderer(options, createHydrationFns) {
   };
   const patchElement = (n1, n2, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
     const el = n2.el = n1.el;
+    {
+      el.__vnode = n2;
+    }
     let { patchFlag, dynamicChildren, dirs } = n2;
     patchFlag |= n1.patchFlag & 16;
     const oldProps = n1.props || EMPTY_OBJ;
@@ -5967,6 +5576,9 @@ function baseCreateRenderer(options, createHydrationFns) {
       optimized = false;
       dynamicChildren = null;
     }
+    if (oldProps.innerHTML && newProps.innerHTML == null || oldProps.textContent && newProps.textContent == null) {
+      hostSetElementText(el, "");
+    }
     if (dynamicChildren) {
       patchBlockChildren(
         n1.dynamicChildren,
@@ -5995,15 +5607,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     }
     if (patchFlag > 0) {
       if (patchFlag & 16) {
-        patchProps(
-          el,
-          n2,
-          oldProps,
-          newProps,
-          parentComponent,
-          parentSuspense,
-          namespace
-        );
+        patchProps(el, oldProps, newProps, parentComponent, namespace);
       } else {
         if (patchFlag & 2) {
           if (oldProps.class !== newProps.class) {
@@ -6020,17 +5624,7 @@ function baseCreateRenderer(options, createHydrationFns) {
             const prev = oldProps[key];
             const next = newProps[key];
             if (next !== prev || key === "value") {
-              hostPatchProp(
-                el,
-                key,
-                prev,
-                next,
-                namespace,
-                n1.children,
-                parentComponent,
-                parentSuspense,
-                unmountChildren
-              );
+              hostPatchProp(el, key, prev, next, namespace, parentComponent);
             }
           }
         }
@@ -6041,15 +5635,7 @@ function baseCreateRenderer(options, createHydrationFns) {
         }
       }
     } else if (!optimized && dynamicChildren == null) {
-      patchProps(
-        el,
-        n2,
-        oldProps,
-        newProps,
-        parentComponent,
-        parentSuspense,
-        namespace
-      );
+      patchProps(el, oldProps, newProps, parentComponent, namespace);
     }
     if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
       queuePostRenderEffect(() => {
@@ -6089,7 +5675,7 @@ function baseCreateRenderer(options, createHydrationFns) {
       );
     }
   };
-  const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, namespace) => {
+  const patchProps = (el, oldProps, newProps, parentComponent, namespace) => {
     if (oldProps !== newProps) {
       if (oldProps !== EMPTY_OBJ) {
         for (const key in oldProps) {
@@ -6100,31 +5686,17 @@ function baseCreateRenderer(options, createHydrationFns) {
               oldProps[key],
               null,
               namespace,
-              vnode.children,
-              parentComponent,
-              parentSuspense,
-              unmountChildren
+              parentComponent
             );
           }
         }
       }
       for (const key in newProps) {
-        if (isReservedProp(key))
-          continue;
+        if (isReservedProp(key)) continue;
         const next = newProps[key];
         const prev = oldProps[key];
         if (next !== prev && key !== "value") {
-          hostPatchProp(
-            el,
-            key,
-            prev,
-            next,
-            namespace,
-            vnode.children,
-            parentComponent,
-            parentSuspense,
-            unmountChildren
-          );
+          hostPatchProp(el, key, prev, next, namespace, parentComponent);
         }
       }
       if ("value" in newProps) {
@@ -6241,13 +5813,13 @@ function baseCreateRenderer(options, createHydrationFns) {
       {
         startMeasure(instance, `init`);
       }
-      setupComponent(instance);
+      setupComponent(instance, false, optimized);
       {
         endMeasure(instance, `init`);
       }
     }
     if (instance.asyncDep) {
-      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);
+      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect, optimized);
       if (!initialVNode.el) {
         const placeholder2 = instance.subTree = createVNode(Comment);
         processCommentNode(null, placeholder2, container, anchor);
@@ -6478,12 +6050,12 @@ function baseCreateRenderer(options, createHydrationFns) {
         effect2.run();
       }
     };
+    update.i = instance;
     update.id = instance.uid;
     toggleRecurse(instance, true);
     {
       effect2.onTrack = instance.rtc ? (e2) => invokeArrayFns(instance.rtc, e2) : void 0;
       effect2.onTrigger = instance.rtg ? (e2) => invokeArrayFns(instance.rtg, e2) : void 0;
-      update.ownerInstance = instance;
     }
     update();
   };
@@ -6712,8 +6284,7 @@ function baseCreateRenderer(options, createHydrationFns) {
       let moved = false;
       let maxNewIndexSoFar = 0;
       const newIndexToOldIndexMap = new Array(toBePatched);
-      for (i2 = 0; i2 < toBePatched; i2++)
-        newIndexToOldIndexMap[i2] = 0;
+      for (i2 = 0; i2 < toBePatched; i2++) newIndexToOldIndexMap[i2] = 0;
       for (i2 = s1; i2 <= e1; i2++) {
         const prevChild = c1[i2];
         if (patched >= toBePatched) {
@@ -6842,11 +6413,18 @@ function baseCreateRenderer(options, createHydrationFns) {
       dynamicChildren,
       shapeFlag,
       patchFlag,
-      dirs
+      dirs,
+      cacheIndex
     } = vnode;
+    if (patchFlag === -2) {
+      optimized = false;
+    }
     if (ref3 != null) {
       setRef(ref3, null, parentSuspense, vnode, true);
     }
+    if (cacheIndex != null) {
+      parentComponent.renderCache[cacheIndex] = void 0;
+    }
     if (shapeFlag & 256) {
       parentComponent.ctx.deactivate(vnode);
       return;
@@ -6872,11 +6450,15 @@ function baseCreateRenderer(options, createHydrationFns) {
           vnode,
           parentComponent,
           parentSuspense,
-          optimized,
           internals,
           doRemove
         );
-      } else if (dynamicChildren && // #1153: fast path should not be taken for non-stable (v-for) fragments
+      } else if (dynamicChildren && // #5154
+      // when v-once is used inside a block, setBlockTracking(-1) marks the
+      // parent block with hasOnce: true
+      // so that it doesn't take the fast path during unmount - otherwise
+      // components nested in v-once are never unmounted.
+      !dynamicChildren.hasOnce && // #1153: fast path should not be taken for non-stable (v-for) fragments
       (type !== Fragment || patchFlag > 0 && patchFlag & 64)) {
         unmountChildren(
           dynamicChildren,
@@ -6950,7 +6532,9 @@ function baseCreateRenderer(options, createHydrationFns) {
     if (instance.type.__hmrId) {
       unregisterHMR(instance);
     }
-    const { bum, scope, update, subTree, um } = instance;
+    const { bum, scope, update, subTree, um, m: m2, a: a2 } = instance;
+    invalidateMount(m2);
+    invalidateMount(a2);
     if (bum) {
       invokeArrayFns(bum);
     }
@@ -6987,7 +6571,9 @@ function baseCreateRenderer(options, createHydrationFns) {
     if (vnode.shapeFlag & 128) {
       return vnode.suspense.next();
     }
-    return hostNextSibling(vnode.anchor || vnode.el);
+    const el = hostNextSibling(vnode.anchor || vnode.el);
+    const teleportEnd = el && el[TeleportEndKey];
+    return teleportEnd ? hostNextSibling(teleportEnd) : el;
   };
   let isFlushing2 = false;
   const render = (vnode, container, namespace) => {
@@ -7060,7 +6646,7 @@ function traverseStaticChildren(n1, n2, shallow = false) {
           c2 = ch2[i2] = cloneIfMounted(ch2[i2]);
           c2.el = c1.el;
         }
-        if (!shallow)
+        if (!shallow && c2.patchFlag !== -2)
           traverseStaticChildren(c1, c2);
       }
       if (c2.type === Text) {
@@ -7071,328 +6657,765 @@ function traverseStaticChildren(n1, n2, shallow = false) {
       }
     }
   }
-}
-function getSequence(arr) {
-  const p2 = arr.slice();
-  const result = [0];
-  let i2, j2, u2, v2, c2;
-  const len = arr.length;
-  for (i2 = 0; i2 < len; i2++) {
-    const arrI = arr[i2];
-    if (arrI !== 0) {
-      j2 = result[result.length - 1];
-      if (arr[j2] < arrI) {
-        p2[i2] = j2;
-        result.push(i2);
-        continue;
-      }
-      u2 = 0;
-      v2 = result.length - 1;
-      while (u2 < v2) {
-        c2 = u2 + v2 >> 1;
-        if (arr[result[c2]] < arrI) {
-          u2 = c2 + 1;
-        } else {
-          v2 = c2;
+}
+function getSequence(arr) {
+  const p2 = arr.slice();
+  const result = [0];
+  let i2, j2, u2, v2, c2;
+  const len = arr.length;
+  for (i2 = 0; i2 < len; i2++) {
+    const arrI = arr[i2];
+    if (arrI !== 0) {
+      j2 = result[result.length - 1];
+      if (arr[j2] < arrI) {
+        p2[i2] = j2;
+        result.push(i2);
+        continue;
+      }
+      u2 = 0;
+      v2 = result.length - 1;
+      while (u2 < v2) {
+        c2 = u2 + v2 >> 1;
+        if (arr[result[c2]] < arrI) {
+          u2 = c2 + 1;
+        } else {
+          v2 = c2;
+        }
+      }
+      if (arrI < arr[result[u2]]) {
+        if (u2 > 0) {
+          p2[i2] = result[u2 - 1];
+        }
+        result[u2] = i2;
+      }
+    }
+  }
+  u2 = result.length;
+  v2 = result[u2 - 1];
+  while (u2-- > 0) {
+    result[u2] = v2;
+    v2 = p2[v2];
+  }
+  return result;
+}
+function locateNonHydratedAsyncRoot(instance) {
+  const subComponent = instance.subTree.component;
+  if (subComponent) {
+    if (subComponent.asyncDep && !subComponent.asyncResolved) {
+      return subComponent;
+    } else {
+      return locateNonHydratedAsyncRoot(subComponent);
+    }
+  }
+}
+function invalidateMount(hooks) {
+  if (hooks) {
+    for (let i2 = 0; i2 < hooks.length; i2++) hooks[i2].active = false;
+  }
+}
+const ssrContextKey = Symbol.for("v-scx");
+const useSSRContext = () => {
+  {
+    const ctx = inject(ssrContextKey);
+    if (!ctx) {
+      warn$1(
+        `Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.`
+      );
+    }
+    return ctx;
+  }
+};
+function watchEffect(effect2, options) {
+  return doWatch(effect2, null, options);
+}
+const INITIAL_WATCHER_VALUE = {};
+function watch(source, cb, options) {
+  if (!isFunction$6(cb)) {
+    warn$1(
+      `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
+    );
+  }
+  return doWatch(source, cb, options);
+}
+function doWatch(source, cb, {
+  immediate,
+  deep,
+  flush,
+  once,
+  onTrack,
+  onTrigger
+} = EMPTY_OBJ) {
+  if (cb && once) {
+    const _cb = cb;
+    cb = (...args) => {
+      _cb(...args);
+      unwatch();
+    };
+  }
+  if (deep !== void 0 && typeof deep === "number") {
+    warn$1(
+      `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
+    );
+  }
+  if (!cb) {
+    if (immediate !== void 0) {
+      warn$1(
+        `watch() "immediate" option is only respected when using the watch(source, callback, options?) signature.`
+      );
+    }
+    if (deep !== void 0) {
+      warn$1(
+        `watch() "deep" option is only respected when using the watch(source, callback, options?) signature.`
+      );
+    }
+    if (once !== void 0) {
+      warn$1(
+        `watch() "once" option is only respected when using the watch(source, callback, options?) signature.`
+      );
+    }
+  }
+  const warnInvalidSource = (s2) => {
+    warn$1(
+      `Invalid watch source: `,
+      s2,
+      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
+    );
+  };
+  const instance = currentInstance;
+  const reactiveGetter = (source2) => deep === true ? source2 : (
+    // for deep: false, only traverse root-level properties
+    traverse(source2, deep === false ? 1 : void 0)
+  );
+  let getter;
+  let forceTrigger = false;
+  let isMultiSource = false;
+  if (isRef(source)) {
+    getter = () => source.value;
+    forceTrigger = isShallow(source);
+  } else if (isReactive(source)) {
+    getter = () => reactiveGetter(source);
+    forceTrigger = true;
+  } else if (isArray$c(source)) {
+    isMultiSource = true;
+    forceTrigger = source.some((s2) => isReactive(s2) || isShallow(s2));
+    getter = () => source.map((s2) => {
+      if (isRef(s2)) {
+        return s2.value;
+      } else if (isReactive(s2)) {
+        return reactiveGetter(s2);
+      } else if (isFunction$6(s2)) {
+        return callWithErrorHandling(s2, instance, 2);
+      } else {
+        warnInvalidSource(s2);
+      }
+    });
+  } else if (isFunction$6(source)) {
+    if (cb) {
+      getter = () => callWithErrorHandling(source, instance, 2);
+    } else {
+      getter = () => {
+        if (cleanup) {
+          cleanup();
+        }
+        return callWithAsyncErrorHandling(
+          source,
+          instance,
+          3,
+          [onCleanup]
+        );
+      };
+    }
+  } else {
+    getter = NOOP;
+    warnInvalidSource(source);
+  }
+  if (cb && deep) {
+    const baseGetter = getter;
+    getter = () => traverse(baseGetter());
+  }
+  let cleanup;
+  let onCleanup = (fn3) => {
+    cleanup = effect2.onStop = () => {
+      callWithErrorHandling(fn3, instance, 4);
+      cleanup = effect2.onStop = void 0;
+    };
+  };
+  let ssrCleanup;
+  if (isInSSRComponentSetup) {
+    onCleanup = NOOP;
+    if (!cb) {
+      getter();
+    } else if (immediate) {
+      callWithAsyncErrorHandling(cb, instance, 3, [
+        getter(),
+        isMultiSource ? [] : void 0,
+        onCleanup
+      ]);
+    }
+    if (flush === "sync") {
+      const ctx = useSSRContext();
+      ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
+    } else {
+      return NOOP;
+    }
+  }
+  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+  const job = () => {
+    if (!effect2.active || !effect2.dirty) {
+      return;
+    }
+    if (cb) {
+      const newValue = effect2.run();
+      if (deep || forceTrigger || (isMultiSource ? newValue.some((v2, i2) => hasChanged(v2, oldValue[i2])) : hasChanged(newValue, oldValue)) || false) {
+        if (cleanup) {
+          cleanup();
+        }
+        callWithAsyncErrorHandling(cb, instance, 3, [
+          newValue,
+          // pass undefined as the old value when it's changed for the first time
+          oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+          onCleanup
+        ]);
+        oldValue = newValue;
+      }
+    } else {
+      effect2.run();
+    }
+  };
+  job.allowRecurse = !!cb;
+  let scheduler;
+  if (flush === "sync") {
+    scheduler = job;
+  } else if (flush === "post") {
+    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
+  } else {
+    job.pre = true;
+    if (instance) job.id = instance.uid;
+    scheduler = () => queueJob(job);
+  }
+  const effect2 = new ReactiveEffect(getter, NOOP, scheduler);
+  const scope = getCurrentScope();
+  const unwatch = () => {
+    effect2.stop();
+    if (scope) {
+      remove(scope.effects, effect2);
+    }
+  };
+  {
+    effect2.onTrack = onTrack;
+    effect2.onTrigger = onTrigger;
+  }
+  if (cb) {
+    if (immediate) {
+      job();
+    } else {
+      oldValue = effect2.run();
+    }
+  } else if (flush === "post") {
+    queuePostRenderEffect(
+      effect2.run.bind(effect2),
+      instance && instance.suspense
+    );
+  } else {
+    effect2.run();
+  }
+  if (ssrCleanup) ssrCleanup.push(unwatch);
+  return unwatch;
+}
+function instanceWatch(source, value, options) {
+  const publicThis = this.proxy;
+  const getter = isString$1(source) ? source.includes(".") ? createPathGetter(publicThis, source) : () => publicThis[source] : source.bind(publicThis, publicThis);
+  let cb;
+  if (isFunction$6(value)) {
+    cb = value;
+  } else {
+    cb = value.handler;
+    options = value;
+  }
+  const reset = setCurrentInstance(this);
+  const res = doWatch(getter, cb.bind(publicThis), options);
+  reset();
+  return res;
+}
+function createPathGetter(ctx, path) {
+  const segments = path.split(".");
+  return () => {
+    let cur = ctx;
+    for (let i2 = 0; i2 < segments.length && cur; i2++) {
+      cur = cur[segments[i2]];
+    }
+    return cur;
+  };
+}
+function traverse(value, depth = Infinity, seen2) {
+  if (depth <= 0 || !isObject$d(value) || value["__v_skip"]) {
+    return value;
+  }
+  seen2 = seen2 || /* @__PURE__ */ new Set();
+  if (seen2.has(value)) {
+    return value;
+  }
+  seen2.add(value);
+  depth--;
+  if (isRef(value)) {
+    traverse(value.value, depth, seen2);
+  } else if (isArray$c(value)) {
+    for (let i2 = 0; i2 < value.length; i2++) {
+      traverse(value[i2], depth, seen2);
+    }
+  } else if (isSet(value) || isMap(value)) {
+    value.forEach((v2) => {
+      traverse(v2, depth, seen2);
+    });
+  } else if (isPlainObject$4(value)) {
+    for (const key in value) {
+      traverse(value[key], depth, seen2);
+    }
+    for (const key of Object.getOwnPropertySymbols(value)) {
+      if (Object.prototype.propertyIsEnumerable.call(value, key)) {
+        traverse(value[key], depth, seen2);
+      }
+    }
+  }
+  return value;
+}
+const getModelModifiers = (props, modelName) => {
+  return modelName === "modelValue" || modelName === "model-value" ? props.modelModifiers : props[`${modelName}Modifiers`] || props[`${camelize(modelName)}Modifiers`] || props[`${hyphenate(modelName)}Modifiers`];
+};
+function emit(instance, event, ...rawArgs) {
+  if (instance.isUnmounted) return;
+  const props = instance.vnode.props || EMPTY_OBJ;
+  {
+    const {
+      emitsOptions,
+      propsOptions: [propsOptions]
+    } = instance;
+    if (emitsOptions) {
+      if (!(event in emitsOptions) && true) {
+        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+          warn$1(
+            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
+          );
+        }
+      } else {
+        const validator = emitsOptions[event];
+        if (isFunction$6(validator)) {
+          const isValid = validator(...rawArgs);
+          if (!isValid) {
+            warn$1(
+              `Invalid event arguments: event validation failed for event "${event}".`
+            );
+          }
+        }
+      }
+    }
+  }
+  let args = rawArgs;
+  const isModelListener2 = event.startsWith("update:");
+  const modifiers = isModelListener2 && getModelModifiers(props, event.slice(7));
+  if (modifiers) {
+    if (modifiers.trim) {
+      args = rawArgs.map((a2) => isString$1(a2) ? a2.trim() : a2);
+    }
+    if (modifiers.number) {
+      args = rawArgs.map(looseToNumber);
+    }
+  }
+  {
+    devtoolsComponentEmit(instance, event, args);
+  }
+  {
+    const lowerCaseEvent = event.toLowerCase();
+    if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
+      warn$1(
+        `Event "${lowerCaseEvent}" is emitted in component ${formatComponentName(
+          instance,
+          instance.type
+        )} but the handler is registered for "${event}". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "${hyphenate(
+          event
+        )}" instead of "${event}".`
+      );
+    }
+  }
+  let handlerName;
+  let handler = props[handlerName = toHandlerKey(event)] || // also try camelCase event handler (#2249)
+  props[handlerName = toHandlerKey(camelize(event))];
+  if (!handler && isModelListener2) {
+    handler = props[handlerName = toHandlerKey(hyphenate(event))];
+  }
+  if (handler) {
+    callWithAsyncErrorHandling(
+      handler,
+      instance,
+      6,
+      args
+    );
+  }
+  const onceHandler = props[handlerName + `Once`];
+  if (onceHandler) {
+    if (!instance.emitted) {
+      instance.emitted = {};
+    } else if (instance.emitted[handlerName]) {
+      return;
+    }
+    instance.emitted[handlerName] = true;
+    callWithAsyncErrorHandling(
+      onceHandler,
+      instance,
+      6,
+      args
+    );
+  }
+}
+function normalizeEmitsOptions(comp, appContext, asMixin = false) {
+  const cache = appContext.emitsCache;
+  const cached = cache.get(comp);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const raw = comp.emits;
+  let normalized = {};
+  let hasExtends = false;
+  if (!isFunction$6(comp)) {
+    const extendEmits = (raw2) => {
+      const normalizedFromExtend = normalizeEmitsOptions(raw2, appContext, true);
+      if (normalizedFromExtend) {
+        hasExtends = true;
+        extend(normalized, normalizedFromExtend);
+      }
+    };
+    if (!asMixin && appContext.mixins.length) {
+      appContext.mixins.forEach(extendEmits);
+    }
+    if (comp.extends) {
+      extendEmits(comp.extends);
+    }
+    if (comp.mixins) {
+      comp.mixins.forEach(extendEmits);
+    }
+  }
+  if (!raw && !hasExtends) {
+    if (isObject$d(comp)) {
+      cache.set(comp, null);
+    }
+    return null;
+  }
+  if (isArray$c(raw)) {
+    raw.forEach((key) => normalized[key] = null);
+  } else {
+    extend(normalized, raw);
+  }
+  if (isObject$d(comp)) {
+    cache.set(comp, normalized);
+  }
+  return normalized;
+}
+function isEmitListener(options, key) {
+  if (!options || !isOn(key)) {
+    return false;
+  }
+  key = key.slice(2).replace(/Once$/, "");
+  return hasOwn(options, key[0].toLowerCase() + key.slice(1)) || hasOwn(options, hyphenate(key)) || hasOwn(options, key);
+}
+let accessedAttrs = false;
+function markAttrsAccessed() {
+  accessedAttrs = true;
+}
+function renderComponentRoot(instance) {
+  const {
+    type: Component,
+    vnode,
+    proxy,
+    withProxy,
+    propsOptions: [propsOptions],
+    slots,
+    attrs,
+    emit: emit2,
+    render,
+    renderCache,
+    props,
+    data,
+    setupState,
+    ctx,
+    inheritAttrs
+  } = instance;
+  const prev = setCurrentRenderingInstance(instance);
+  let result;
+  let fallthroughAttrs;
+  {
+    accessedAttrs = false;
+  }
+  try {
+    if (vnode.shapeFlag & 4) {
+      const proxyToUse = withProxy || proxy;
+      const thisProxy = setupState.__isScriptSetup ? new Proxy(proxyToUse, {
+        get(target, key, receiver) {
+          warn$1(
+            `Property '${String(
+              key
+            )}' was accessed via 'this'. Avoid using 'this' in templates.`
+          );
+          return Reflect.get(target, key, receiver);
+        }
+      }) : proxyToUse;
+      result = normalizeVNode(
+        render.call(
+          thisProxy,
+          proxyToUse,
+          renderCache,
+          true ? shallowReadonly(props) : props,
+          setupState,
+          data,
+          ctx
+        )
+      );
+      fallthroughAttrs = attrs;
+    } else {
+      const render2 = Component;
+      if (attrs === props) {
+        markAttrsAccessed();
+      }
+      result = normalizeVNode(
+        render2.length > 1 ? render2(
+          true ? shallowReadonly(props) : props,
+          true ? {
+            get attrs() {
+              markAttrsAccessed();
+              return shallowReadonly(attrs);
+            },
+            slots,
+            emit: emit2
+          } : { attrs, slots, emit: emit2 }
+        ) : render2(
+          true ? shallowReadonly(props) : props,
+          null
+        )
+      );
+      fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs);
+    }
+  } catch (err) {
+    blockStack.length = 0;
+    handleError(err, instance, 1);
+    result = createVNode(Comment);
+  }
+  let root2 = result;
+  let setRoot = void 0;
+  if (result.patchFlag > 0 && result.patchFlag & 2048) {
+    [root2, setRoot] = getChildRoot(result);
+  }
+  if (fallthroughAttrs && inheritAttrs !== false) {
+    const keys2 = Object.keys(fallthroughAttrs);
+    const { shapeFlag } = root2;
+    if (keys2.length) {
+      if (shapeFlag & (1 | 6)) {
+        if (propsOptions && keys2.some(isModelListener)) {
+          fallthroughAttrs = filterModelListeners(
+            fallthroughAttrs,
+            propsOptions
+          );
         }
-      }
-      if (arrI < arr[result[u2]]) {
-        if (u2 > 0) {
-          p2[i2] = result[u2 - 1];
+        root2 = cloneVNode(root2, fallthroughAttrs, false, true);
+      } else if (!accessedAttrs && root2.type !== Comment) {
+        const allAttrs = Object.keys(attrs);
+        const eventAttrs = [];
+        const extraAttrs = [];
+        for (let i2 = 0, l2 = allAttrs.length; i2 < l2; i2++) {
+          const key = allAttrs[i2];
+          if (isOn(key)) {
+            if (!isModelListener(key)) {
+              eventAttrs.push(key[2].toLowerCase() + key.slice(3));
+            }
+          } else {
+            extraAttrs.push(key);
+          }
+        }
+        if (extraAttrs.length) {
+          warn$1(
+            `Extraneous non-props attributes (${extraAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.`
+          );
+        }
+        if (eventAttrs.length) {
+          warn$1(
+            `Extraneous non-emits event listeners (${eventAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.`
+          );
         }
-        result[u2] = i2;
       }
     }
   }
-  u2 = result.length;
-  v2 = result[u2 - 1];
-  while (u2-- > 0) {
-    result[u2] = v2;
-    v2 = p2[v2];
+  if (vnode.dirs) {
+    if (!isElementRoot(root2)) {
+      warn$1(
+        `Runtime directive used on component with non-element root node. The directives will not function as intended.`
+      );
+    }
+    root2 = cloneVNode(root2, null, false, true);
+    root2.dirs = root2.dirs ? root2.dirs.concat(vnode.dirs) : vnode.dirs;
+  }
+  if (vnode.transition) {
+    if (!isElementRoot(root2)) {
+      warn$1(
+        `Component inside <Transition> renders non-element root node that cannot be animated.`
+      );
+    }
+    root2.transition = vnode.transition;
+  }
+  if (setRoot) {
+    setRoot(root2);
+  } else {
+    result = root2;
   }
+  setCurrentRenderingInstance(prev);
   return result;
 }
-function locateNonHydratedAsyncRoot(instance) {
-  const subComponent = instance.subTree.component;
-  if (subComponent) {
-    if (subComponent.asyncDep && !subComponent.asyncResolved) {
-      return subComponent;
+const getChildRoot = (vnode) => {
+  const rawChildren = vnode.children;
+  const dynamicChildren = vnode.dynamicChildren;
+  const childRoot = filterSingleRoot(rawChildren, false);
+  if (!childRoot) {
+    return [vnode, void 0];
+  } else if (childRoot.patchFlag > 0 && childRoot.patchFlag & 2048) {
+    return getChildRoot(childRoot);
+  }
+  const index2 = rawChildren.indexOf(childRoot);
+  const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
+  const setRoot = (updatedRoot) => {
+    rawChildren[index2] = updatedRoot;
+    if (dynamicChildren) {
+      if (dynamicIndex > -1) {
+        dynamicChildren[dynamicIndex] = updatedRoot;
+      } else if (updatedRoot.patchFlag > 0) {
+        vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
+      }
+    }
+  };
+  return [normalizeVNode(childRoot), setRoot];
+};
+function filterSingleRoot(children, recurse = true) {
+  let singleRoot;
+  for (let i2 = 0; i2 < children.length; i2++) {
+    const child = children[i2];
+    if (isVNode(child)) {
+      if (child.type !== Comment || child.children === "v-if") {
+        if (singleRoot) {
+          return;
+        } else {
+          singleRoot = child;
+          if (recurse && singleRoot.patchFlag > 0 && singleRoot.patchFlag & 2048) {
+            return filterSingleRoot(singleRoot.children);
+          }
+        }
+      }
     } else {
-      return locateNonHydratedAsyncRoot(subComponent);
+      return;
     }
   }
+  return singleRoot;
 }
-const isTeleport = (type) => type.__isTeleport;
-const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === "");
-const isTargetSVG = (target) => typeof SVGElement !== "undefined" && target instanceof SVGElement;
-const isTargetMathML = (target) => typeof MathMLElement === "function" && target instanceof MathMLElement;
-const resolveTarget = (props, select2) => {
-  const targetSelector = props && props.to;
-  if (isString$1(targetSelector)) {
-    if (!select2) {
-      warn$1(
-        `Current renderer does not support string target for Teleports. (missing querySelector renderer option)`
-      );
-      return null;
-    } else {
-      const target = select2(targetSelector);
-      if (!target) {
-        warn$1(
-          `Failed to locate Teleport target with selector "${targetSelector}". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree.`
-        );
-      }
-      return target;
+const getFunctionalFallthrough = (attrs) => {
+  let res;
+  for (const key in attrs) {
+    if (key === "class" || key === "style" || isOn(key)) {
+      (res || (res = {}))[key] = attrs[key];
     }
-  } else {
-    if (!targetSelector && !isTeleportDisabled(props)) {
-      warn$1(`Invalid Teleport target: ${targetSelector}`);
+  }
+  return res;
+};
+const filterModelListeners = (attrs, props) => {
+  const res = {};
+  for (const key in attrs) {
+    if (!isModelListener(key) || !(key.slice(9) in props)) {
+      res[key] = attrs[key];
     }
-    return targetSelector;
   }
+  return res;
 };
-const TeleportImpl = {
-  name: "Teleport",
-  __isTeleport: true,
-  process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, internals) {
-    const {
-      mc: mountChildren,
-      pc: patchChildren,
-      pbc: patchBlockChildren,
-      o: { insert, querySelector, createText, createComment }
-    } = internals;
-    const disabled = isTeleportDisabled(n2.props);
-    let { shapeFlag, children, dynamicChildren } = n2;
-    if (isHmrUpdating) {
-      optimized = false;
-      dynamicChildren = null;
+const isElementRoot = (vnode) => {
+  return vnode.shapeFlag & (6 | 1) || vnode.type === Comment;
+};
+function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
+  const { props: prevProps, children: prevChildren, component } = prevVNode;
+  const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;
+  const emits = component.emitsOptions;
+  if ((prevChildren || nextChildren) && isHmrUpdating) {
+    return true;
+  }
+  if (nextVNode.dirs || nextVNode.transition) {
+    return true;
+  }
+  if (optimized && patchFlag >= 0) {
+    if (patchFlag & 1024) {
+      return true;
     }
-    if (n1 == null) {
-      const placeholder2 = n2.el = createComment("teleport start");
-      const mainAnchor = n2.anchor = createComment("teleport end");
-      insert(placeholder2, container, anchor);
-      insert(mainAnchor, container, anchor);
-      const target = n2.target = resolveTarget(n2.props, querySelector);
-      const targetAnchor = n2.targetAnchor = createText("");
-      if (target) {
-        insert(targetAnchor, target);
-        if (namespace === "svg" || isTargetSVG(target)) {
-          namespace = "svg";
-        } else if (namespace === "mathml" || isTargetMathML(target)) {
-          namespace = "mathml";
-        }
-      } else if (!disabled) {
-        warn$1("Invalid Teleport target on mount:", target, `(${typeof target})`);
+    if (patchFlag & 16) {
+      if (!prevProps) {
+        return !!nextProps;
       }
-      const mount = (container2, anchor2) => {
-        if (shapeFlag & 16) {
-          mountChildren(
-            children,
-            container2,
-            anchor2,
-            parentComponent,
-            parentSuspense,
-            namespace,
-            slotScopeIds,
-            optimized
-          );
+      return hasPropsChanged(prevProps, nextProps, emits);
+    } else if (patchFlag & 8) {
+      const dynamicProps = nextVNode.dynamicProps;
+      for (let i2 = 0; i2 < dynamicProps.length; i2++) {
+        const key = dynamicProps[i2];
+        if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) {
+          return true;
         }
-      };
-      if (disabled) {
-        mount(container, mainAnchor);
-      } else if (target) {
-        mount(target, targetAnchor);
-      }
-    } else {
-      n2.el = n1.el;
-      const mainAnchor = n2.anchor = n1.anchor;
-      const target = n2.target = n1.target;
-      const targetAnchor = n2.targetAnchor = n1.targetAnchor;
-      const wasDisabled = isTeleportDisabled(n1.props);
-      const currentContainer = wasDisabled ? container : target;
-      const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
-      if (namespace === "svg" || isTargetSVG(target)) {
-        namespace = "svg";
-      } else if (namespace === "mathml" || isTargetMathML(target)) {
-        namespace = "mathml";
-      }
-      if (dynamicChildren) {
-        patchBlockChildren(
-          n1.dynamicChildren,
-          dynamicChildren,
-          currentContainer,
-          parentComponent,
-          parentSuspense,
-          namespace,
-          slotScopeIds
-        );
-        traverseStaticChildren(n1, n2, true);
-      } else if (!optimized) {
-        patchChildren(
-          n1,
-          n2,
-          currentContainer,
-          currentAnchor,
-          parentComponent,
-          parentSuspense,
-          namespace,
-          slotScopeIds,
-          false
-        );
       }
-      if (disabled) {
-        if (!wasDisabled) {
-          moveTeleport(
-            n2,
-            container,
-            mainAnchor,
-            internals,
-            1
-          );
-        } else {
-          if (n2.props && n1.props && n2.props.to !== n1.props.to) {
-            n2.props.to = n1.props.to;
-          }
-        }
-      } else {
-        if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
-          const nextTarget = n2.target = resolveTarget(
-            n2.props,
-            querySelector
-          );
-          if (nextTarget) {
-            moveTeleport(
-              n2,
-              nextTarget,
-              null,
-              internals,
-              0
-            );
-          } else {
-            warn$1(
-              "Invalid Teleport target on update:",
-              target,
-              `(${typeof target})`
-            );
-          }
-        } else if (wasDisabled) {
-          moveTeleport(
-            n2,
-            target,
-            targetAnchor,
-            internals,
-            1
-          );
-        }
+    }
+  } else {
+    if (prevChildren || nextChildren) {
+      if (!nextChildren || !nextChildren.$stable) {
+        return true;
       }
     }
-    updateCssVars(n2);
-  },
-  remove(vnode, parentComponent, parentSuspense, optimized, { um: unmount, o: { remove: hostRemove } }, doRemove) {
-    const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode;
-    if (target) {
-      hostRemove(targetAnchor);
+    if (prevProps === nextProps) {
+      return false;
     }
-    doRemove && hostRemove(anchor);
-    if (shapeFlag & 16) {
-      const shouldRemove = doRemove || !isTeleportDisabled(props);
-      for (let i2 = 0; i2 < children.length; i2++) {
-        const child = children[i2];
-        unmount(
-          child,
-          parentComponent,
-          parentSuspense,
-          shouldRemove,
-          !!child.dynamicChildren
-        );
-      }
+    if (!prevProps) {
+      return !!nextProps;
     }
-  },
-  move: moveTeleport,
-  hydrate: hydrateTeleport
-};
-function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2) {
-  if (moveType === 0) {
-    insert(vnode.targetAnchor, container, parentAnchor);
+    if (!nextProps) {
+      return true;
+    }
+    return hasPropsChanged(prevProps, nextProps, emits);
   }
-  const { el, anchor, shapeFlag, children, props } = vnode;
-  const isReorder = moveType === 2;
-  if (isReorder) {
-    insert(el, container, parentAnchor);
+  return false;
+}
+function hasPropsChanged(prevProps, nextProps, emitsOptions) {
+  const nextKeys = Object.keys(nextProps);
+  if (nextKeys.length !== Object.keys(prevProps).length) {
+    return true;
   }
-  if (!isReorder || isTeleportDisabled(props)) {
-    if (shapeFlag & 16) {
-      for (let i2 = 0; i2 < children.length; i2++) {
-        move(
-          children[i2],
-          container,
-          parentAnchor,
-          2
-        );
-      }
+  for (let i2 = 0; i2 < nextKeys.length; i2++) {
+    const key = nextKeys[i2];
+    if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) {
+      return true;
     }
   }
-  if (isReorder) {
-    insert(anchor, container, parentAnchor);
-  }
+  return false;
 }
-function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, {
-  o: { nextSibling, parentNode, querySelector }
-}, hydrateChildren) {
-  const target = vnode.target = resolveTarget(
-    vnode.props,
-    querySelector
-  );
-  if (target) {
-    const targetNode = target._lpa || target.firstChild;
-    if (vnode.shapeFlag & 16) {
-      if (isTeleportDisabled(vnode.props)) {
-        vnode.anchor = hydrateChildren(
-          nextSibling(node),
-          vnode,
-          parentNode(node),
-          parentComponent,
-          parentSuspense,
-          slotScopeIds,
-          optimized
-        );
-        vnode.targetAnchor = targetNode;
-      } else {
-        vnode.anchor = nextSibling(node);
-        let targetAnchor = targetNode;
-        while (targetAnchor) {
-          targetAnchor = nextSibling(targetAnchor);
-          if (targetAnchor && targetAnchor.nodeType === 8 && targetAnchor.data === "teleport anchor") {
-            vnode.targetAnchor = targetAnchor;
-            target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
-            break;
-          }
-        }
-        hydrateChildren(
-          targetNode,
-          vnode,
-          target,
-          parentComponent,
-          parentSuspense,
-          slotScopeIds,
-          optimized
-        );
-      }
+function updateHOCHostEl({ vnode, parent }, el) {
+  while (parent) {
+    const root2 = parent.subTree;
+    if (root2.suspense && root2.suspense.activeBranch === vnode) {
+      root2.el = vnode.el;
+    }
+    if (root2 === vnode) {
+      (vnode = parent.vnode).el = el;
+      parent = parent.parent;
+    } else {
+      break;
     }
-    updateCssVars(vnode);
   }
-  return vnode.anchor && nextSibling(vnode.anchor);
 }
-const Teleport = TeleportImpl;
-function updateCssVars(vnode) {
-  const ctx = vnode.ctx;
-  if (ctx && ctx.ut) {
-    let node = vnode.children[0].el;
-    while (node && node !== vnode.targetAnchor) {
-      if (node.nodeType === 1)
-        node.setAttribute("data-v-owner", ctx.uid);
-      node = node.nextSibling;
+const isSuspense = (type) => type.__isSuspense;
+function queueEffectWithSuspense(fn3, suspense) {
+  if (suspense && suspense.pendingBranch) {
+    if (isArray$c(fn3)) {
+      suspense.effects.push(...fn3);
+    } else {
+      suspense.effects.push(fn3);
     }
-    ctx.ut();
+  } else {
+    queuePostFlushCb(fn3);
   }
 }
 const Fragment = Symbol.for("v-fgt");
@@ -7411,6 +7434,9 @@ function closeBlock() {
 let isBlockTreeEnabled = 1;
 function setBlockTracking(value) {
   isBlockTreeEnabled += value;
+  if (value < 0 && currentBlock) {
+    currentBlock.hasOnce = true;
+  }
 }
 function setupBlock(vnode) {
   vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || EMPTY_ARR : null;
@@ -7449,10 +7475,13 @@ function isVNode(value) {
   return value ? value.__v_isVNode === true : false;
 }
 function isSameVNodeType(n1, n2) {
-  if (n2.shapeFlag & 6 && hmrDirtyComponents.has(n2.type)) {
-    n1.shapeFlag &= ~256;
-    n2.shapeFlag &= ~512;
-    return false;
+  if (n2.shapeFlag & 6 && n1.component) {
+    const dirtyInstances = hmrDirtyComponents.get(n2.type);
+    if (dirtyInstances && dirtyInstances.has(n1.component)) {
+      n1.shapeFlag &= ~256;
+      n2.shapeFlag &= ~512;
+      return false;
+    }
   }
   return n1.type === n2.type && n1.key === n2.key;
 }
@@ -7493,6 +7522,7 @@ function createBaseVNode(type, props = null, children = null, patchFlag = 0, dyn
     el: null,
     anchor: null,
     target: null,
+    targetStart: null,
     targetAnchor: null,
     staticCount: 0,
     shapeFlag,
@@ -7551,7 +7581,7 @@ function _createVNode(type, props = null, children = null, patchFlag = 0, dynami
         currentBlock.push(cloned);
       }
     }
-    cloned.patchFlag |= -2;
+    cloned.patchFlag = -2;
     return cloned;
   }
   if (isClassComponent(type)) {
@@ -7592,8 +7622,7 @@ Component that was made reactive: `,
   );
 }
 function guardReactiveProps(props) {
-  if (!props)
-    return null;
+  if (!props) return null;
   return isProxy(props) || isInternalObject(props) ? extend({}, props) : props;
 }
 function cloneVNode(vnode, extraProps, mergeRef = false, cloneTransition = false) {
@@ -7615,6 +7644,7 @@ function cloneVNode(vnode, extraProps, mergeRef = false, cloneTransition = false
     slotScopeIds: vnode.slotScopeIds,
     children: patchFlag === -1 && isArray$c(children) ? children.map(deepCloneVNode) : children,
     target: vnode.target,
+    targetStart: vnode.targetStart,
     targetAnchor: vnode.targetAnchor,
     staticCount: vnode.staticCount,
     shapeFlag: vnode.shapeFlag,
@@ -7642,7 +7672,10 @@ function cloneVNode(vnode, extraProps, mergeRef = false, cloneTransition = false
     ce: vnode.ce
   };
   if (transition && cloneTransition) {
-    cloned.transition = transition.clone(cloned);
+    setTransitionHooks(
+      cloned,
+      transition.clone(cloned)
+    );
   }
   return cloned;
 }
@@ -7812,8 +7845,6 @@ function createComponentInstance(vnode, parent, suspense) {
     refs: EMPTY_OBJ,
     setupState: EMPTY_OBJ,
     setupContext: null,
-    attrsProxy: null,
-    slotsProxy: null,
     // suspense related
     suspense,
     suspenseId: suspense ? suspense.pendingId : 0,
@@ -7857,14 +7888,11 @@ let setInSSRSetupState;
   const g2 = getGlobalThis();
   const registerGlobalSetter = (key, setter) => {
     let setters;
-    if (!(setters = g2[key]))
-      setters = g2[key] = [];
+    if (!(setters = g2[key])) setters = g2[key] = [];
     setters.push(setter);
     return (v2) => {
-      if (setters.length > 1)
-        setters.forEach((set2) => set2(v2));
-      else
-        setters[0](v2);
+      if (setters.length > 1) setters.forEach((set2) => set2(v2));
+      else setters[0](v2);
     };
   };
   internalSetCurrentInstance = registerGlobalSetter(
@@ -7901,12 +7929,12 @@ function isStatefulComponent(instance) {
   return instance.vnode.shapeFlag & 4;
 }
 let isInSSRComponentSetup = false;
-function setupComponent(instance, isSSR = false) {
+function setupComponent(instance, isSSR = false, optimized = false) {
   isSSR && setInSSRSetupState(isSSR);
   const { props, children } = instance.vnode;
   const isStateful = isStatefulComponent(instance);
   initProps(instance, props, isStateful, isSSR);
-  initSlots(instance, children);
+  initSlots(instance, children, optimized);
   const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;
   isSSR && setInSSRSetupState(false);
   return setupResult;
@@ -8055,7 +8083,7 @@ function finishComponentSetup(instance, isSSR, skipOptions) {
         `Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`
       );
     } else {
-      warn$1(`Component is missing template or render function.`);
+      warn$1(`Component is missing template or render function: `, Component);
     }
   }
 }
@@ -8075,12 +8103,12 @@ const attrsProxyHandlers = {
   }
 };
 function getSlotsProxy(instance) {
-  return instance.slotsProxy || (instance.slotsProxy = new Proxy(instance.slots, {
+  return new Proxy(instance.slots, {
     get(target, key) {
       track(instance, "get", "$slots");
       return target[key];
     }
-  }));
+  });
 }
 function createSetupContext(instance) {
   const expose = (exposed) => {
@@ -8108,12 +8136,13 @@ function createSetupContext(instance) {
   };
   {
     let attrsProxy;
+    let slotsProxy;
     return Object.freeze({
       get attrs() {
         return attrsProxy || (attrsProxy = new Proxy(instance.attrs, attrsProxyHandlers));
       },
       get slots() {
-        return getSlotsProxy(instance);
+        return slotsProxy || (slotsProxy = getSlotsProxy(instance));
       },
       get emit() {
         return (event, ...args) => instance.emit(event, ...args);
@@ -8122,7 +8151,7 @@ function createSetupContext(instance) {
     });
   }
 }
-function getExposeProxy(instance) {
+function getComponentPublicInstance(instance) {
   if (instance.exposed) {
     return instance.exposeProxy || (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
       get(target, key) {
@@ -8136,6 +8165,8 @@ function getExposeProxy(instance) {
         return key in target || key in publicPropertiesMap;
       }
     }));
+  } else {
+    return instance.proxy;
   }
 }
 const classifyRE = /(?:^|[-_])(\w)/g;
@@ -8207,6 +8238,7 @@ function initCustomFormatter() {
   const stringStyle = { style: "color:#f5222d" };
   const keywordStyle = { style: "color:#eb2f96" };
   const formatter = {
+    __vue_custom_formatter: true,
     header(obj) {
       if (!isObject$d(obj)) {
         return null;
@@ -8373,10 +8405,10 @@ function initCustomFormatter() {
     window.devtoolsFormatters = [formatter];
   }
 }
-const version$1 = "3.4.27";
+const version$1 = "3.4.34";
 const warn$2 = warn$1;
 /**
-* @vue/runtime-dom v3.4.27
+* @vue/runtime-dom v3.4.34
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -8395,7 +8427,7 @@ const nodeOps = {
     }
   },
   createElement: (tag, namespace, is, props) => {
-    const el = namespace === "svg" ? doc.createElementNS(svgNS, tag) : namespace === "mathml" ? doc.createElementNS(mathmlNS, tag) : doc.createElement(tag, is ? { is } : void 0);
+    const el = namespace === "svg" ? doc.createElementNS(svgNS, tag) : namespace === "mathml" ? doc.createElementNS(mathmlNS, tag) : is ? doc.createElement(tag, { is }) : doc.createElement(tag);
     if (tag === "select" && props && props.multiple != null) {
       el.setAttribute("multiple", props.multiple);
     }
@@ -8424,8 +8456,7 @@ const nodeOps = {
     if (start2 && (start2 === end2 || start2.nextSibling)) {
       while (true) {
         parent.insertBefore(start2.cloneNode(true), anchor);
-        if (start2 === end2 || !(start2 = start2.nextSibling))
-          break;
+        if (start2 === end2 || !(start2 = start2.nextSibling)) break;
       }
     } else {
       templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
@@ -8708,8 +8739,7 @@ function getTimeout(delays, durations) {
   return Math.max(...durations.map((d2, i2) => toMs(d2) + toMs(delays[i2])));
 }
 function toMs(s2) {
-  if (s2 === "auto")
-    return 0;
+  if (s2 === "auto") return 0;
   return Number(s2.slice(0, -1).replace(",", ".")) * 1e3;
 }
 function forceReflow() {
@@ -8745,8 +8775,7 @@ const vShow = {
     }
   },
   updated(el, { value, oldValue }, { transition }) {
-    if (!value === !oldValue)
-      return;
+    if (!value === !oldValue) return;
     if (transition) {
       if (value) {
         transition.beforeEnter(el);
@@ -8828,8 +8857,7 @@ function setStyle$1(style, name, val) {
   if (isArray$c(val)) {
     val.forEach((v2) => setStyle$1(style, name, v2));
   } else {
-    if (val == null)
-      val = "";
+    if (val == null) val = "";
     {
       if (semicolonRE.test(val)) {
         warn$2(
@@ -8874,7 +8902,7 @@ function autoPrefix(style, rawName) {
   return rawName;
 }
 const xlinkNS = "http://www.w3.org/1999/xlink";
-function patchAttr(el, key, value, isSVG, instance) {
+function patchAttr(el, key, value, isSVG, instance, isBoolean2 = isSpecialBooleanAttr(key)) {
   if (isSVG && key.startsWith("xlink:")) {
     if (value == null) {
       el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
@@ -8882,27 +8910,27 @@ function patchAttr(el, key, value, isSVG, instance) {
       el.setAttributeNS(xlinkNS, key, value);
     }
   } else {
-    const isBoolean2 = isSpecialBooleanAttr(key);
     if (value == null || isBoolean2 && !includeBooleanAttr(value)) {
       el.removeAttribute(key);
     } else {
-      el.setAttribute(key, isBoolean2 ? "" : value);
+      el.setAttribute(
+        key,
+        isBoolean2 ? "" : isSymbol$5(value) ? String(value) : value
+      );
     }
   }
 }
-function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspense, unmountChildren) {
+function patchDOMProp(el, key, value, parentComponent) {
   if (key === "innerHTML" || key === "textContent") {
-    if (prevChildren) {
-      unmountChildren(prevChildren, parentComponent, parentSuspense);
-    }
-    el[key] = value == null ? "" : value;
+    if (value == null) return;
+    el[key] = value;
     return;
   }
   const tag = el.tagName;
   if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
   !tag.includes("-")) {
     const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
-    const newValue = value == null ? "" : value;
+    const newValue = value == null ? "" : String(value);
     if (oldValue !== newValue || !("_value" in el)) {
       el.value = newValue;
     }
@@ -9024,7 +9052,7 @@ function patchStopImmediatePropagation(e2, value) {
 }
 const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
 key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
-const patchProp = (el, key, prevValue, nextValue, namespace, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
+const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
   const isSVG = namespace === "svg";
   if (key === "class") {
     patchClass(el, nextValue, isSVG);
@@ -9035,15 +9063,10 @@ const patchProp = (el, key, prevValue, nextValue, namespace, prevChildren, paren
       patchEvent(el, key, prevValue, nextValue, parentComponent);
     }
   } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) {
-    patchDOMProp(
-      el,
-      key,
-      nextValue,
-      prevChildren,
-      parentComponent,
-      parentSuspense,
-      unmountChildren
-    );
+    patchDOMProp(el, key, nextValue);
+    if (!el.tagName.includes("-") && (key === "value" || key === "checked" || key === "selected")) {
+      patchAttr(el, key, nextValue, isSVG, parentComponent, key !== "value");
+    }
   } else {
     if (key === "true-value") {
       el._trueValue = nextValue;
@@ -9106,8 +9129,7 @@ const withModifiers = (fn3, modifiers) => {
   return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => {
     for (let i2 = 0; i2 < modifiers.length; i2++) {
       const guard = modifierGuards[modifiers[i2]];
-      if (guard && guard(event, modifiers))
-        return;
+      if (guard && guard(event, modifiers)) return;
     }
     return fn3(event, ...args);
   });
@@ -9196,7 +9218,7 @@ function normalizeContainer(container) {
   return container;
 }
 /**
-* vue v3.4.27
+* vue v3.4.34
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -9210,8 +9232,7 @@ function initDev() {
 }
 var isLinkHttp = (link) => /^(https?:)?\/\//.test(link);
 var inferRoutePath = (path) => {
-  if (!path || path.endsWith("/"))
-    return path;
+  if (!path || path.endsWith("/")) return path;
   let routePath = path.replace(/(^|\/)README.md$/i, "$1index.html");
   if (routePath.endsWith(".md")) {
     routePath = routePath.substring(0, routePath.length - 3) + ".html";
@@ -9299,962 +9320,962 @@ var isPlainObject$3 = (val) => Object.prototype.toString.call(val) === "[object
 var isString = (val) => typeof val === "string";
 const redirects$1 = JSON.parse("{}");
 const routes$1 = Object.fromEntries([
-  ["/", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "index.html" */
-    "./index.html-DnyqOhD0.js"
-  ), true ? [] : void 0), meta: { "title": "Title of this page" } }],
   ["/api/CChart.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_CChart.api.html" */
-    "./CChart.api.html-DQIVenaZ.js"
+    "./CChart.api.html-BFRT-Fhg.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/customize/css-variables.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "customize_css-variables.html" */
+    "./css-variables.html-UJYgUBzW.js"
+  ), true ? [] : void 0), meta: { "title": "CSS variables" } }],
+  ["/customize/options.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "customize_options.html" */
+    "./options.html-B9kdngTZ.js"
+  ), true ? [] : void 0), meta: { "title": "Options" } }],
+  ["/customize/sass.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "customize_sass.html" */
+    "./sass.html-DHfDOQ32.js"
+  ), true ? [] : void 0), meta: { "title": "Sass" } }],
   ["/getting-started/accessibility.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "getting-started_accessibility.html" */
-    "./accessibility.html-DjMaAPER.js"
+    "./accessibility.html-CkVUBrW4.js"
   ), true ? [] : void 0), meta: { "title": "Accessibility" } }],
   ["/getting-started/introduction.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "getting-started_introduction.html" */
-    "./introduction.html-C5v0Zkqd.js"
+    "./introduction.html-CuiibolQ.js"
   ), true ? [] : void 0), meta: { "title": "Introduction" } }],
+  ["/layout/breakpoints.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_breakpoints.html" */
+    "./breakpoints.html-TXDgB0cd.js"
+  ), true ? [] : void 0), meta: { "title": "Breakpoints" } }],
+  ["/layout/columns.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_columns.html" */
+    "./columns.html-c_8p-0J4.js"
+  ), true ? [] : void 0), meta: { "title": "Columns" } }],
+  ["/layout/containers.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_containers.html" */
+    "./containers.html-DC6_LN_j.js"
+  ), true ? [] : void 0), meta: { "title": "Containers" } }],
+  ["/layout/grid.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_grid.html" */
+    "./grid.html-D9aeBmOt.js"
+  ), true ? [] : void 0), meta: { "title": "Grid" } }],
+  ["/layout/gutters.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_gutters.html" */
+    "./gutters.html-BqQUwcbR.js"
+  ), true ? [] : void 0), meta: { "title": "Gutters" } }],
   ["/forms/checkbox.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_checkbox.html" */
-    "./checkbox.html-BmOd7XOD.js"
+    "./checkbox.html-BL-hSbtE.js"
   ), true ? [] : void 0), meta: { "title": "Vue Checkbox Component" } }],
   ["/forms/checks-radios.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_checks-radios.html" */
-    "./checks-radios.html-BKOw9HTt.js"
+    "./checks-radios.html-kyGivGpt.js"
   ), true ? [] : void 0), meta: { "title": "Vue Radio Component" } }],
   ["/forms/date-picker.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_date-picker.html" */
-    "./date-picker.html-BgpVpDIS.js"
+    "./date-picker.html-DXrgyOW0.js"
   ), true ? __vite__mapDeps([0,1]) : void 0), meta: { "title": "Vue Date Picker Component" } }],
   ["/forms/date-range-picker.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_date-range-picker.html" */
-    "./date-range-picker.html-CNgPdL07.js"
+    "./date-range-picker.html-T7otEH2H.js"
   ), true ? __vite__mapDeps([2,1]) : void 0), meta: { "title": "Vue Date Range Picker Component" } }],
   ["/forms/floating-labels.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_floating-labels.html" */
-    "./floating-labels.html-qVWbUgU0.js"
+    "./floating-labels.html-OoHunpjU.js"
   ), true ? [] : void 0), meta: { "title": "Vue Floating labels" } }],
   ["/forms/form-control.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_form-control.html" */
-    "./form-control.html-BLcpw7-P.js"
+    "./form-control.html-Dq3LSWS5.js"
   ), true ? [] : void 0), meta: { "title": "Vue Form Controls" } }],
   ["/forms/input-group.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_input-group.html" */
-    "./input-group.html-BvH0ZUmc.js"
+    "./input-group.html-BD4KH7gA.js"
   ), true ? [] : void 0), meta: { "title": "Vue Input Group Component" } }],
   ["/forms/input.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_input.html" */
-    "./input.html-B-GhU974.js"
+    "./input.html-BPr4o7jo.js"
   ), true ? [] : void 0), meta: { "title": "Vue Form Input" } }],
   ["/forms/layout.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_layout.html" */
-    "./layout.html-ISp5IgqA.js"
+    "./layout.html-DARLKo8o.js"
   ), true ? [] : void 0), meta: { "title": "Vue Form Layout" } }],
   ["/forms/multi-select.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_multi-select.html" */
-    "./multi-select.html-Cj9cgsAk.js"
+    "./multi-select.html-DP6UryqG.js"
   ), true ? __vite__mapDeps([3,4]) : void 0), meta: { "title": "Vue Multi Select" } }],
   ["/forms/overview.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_overview.html" */
-    "./overview.html-CDgnvTPY.js"
+    "./overview.html-DEHhVOWL.js"
   ), true ? [] : void 0), meta: { "title": "Vue Form Components" } }],
   ["/forms/radio.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_radio.html" */
-    "./radio.html-BYHbKHxD.js"
+    "./radio.html-cF7KwA9W.js"
   ), true ? [] : void 0), meta: { "title": "Vue Checkbox & Radio Components" } }],
   ["/forms/range.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_range.html" */
-    "./range.html-BNU63ACw.js"
+    "./range.html-DLE7qJRM.js"
   ), true ? [] : void 0), meta: { "title": "Vue Range Component" } }],
   ["/forms/rating.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_rating.html" */
-    "./rating.html-KMNIDE6n.js"
+    "./rating.html-COUjsjjF.js"
   ), true ? [] : void 0), meta: { "title": "Vue Rating Component" } }],
   ["/forms/select.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_select.html" */
-    "./select.html-CBbgzaWB.js"
+    "./select.html-CGOG4_GI.js"
   ), true ? [] : void 0), meta: { "title": "Vue Select Component" } }],
   ["/forms/switch.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_switch.html" */
-    "./switch.html-BW-dO3so.js"
+    "./switch.html-CzcyoMGb.js"
   ), true ? [] : void 0), meta: { "title": "Vue Switch Component" } }],
   ["/forms/textarea.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_textarea.html" */
-    "./textarea.html-DyU8nYiI.js"
+    "./textarea.html-VjAtYprD.js"
   ), true ? [] : void 0), meta: { "title": "Vue Form Text Component" } }],
   ["/forms/time-picker.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_time-picker.html" */
-    "./time-picker.html-D-LRJcuD.js"
+    "./time-picker.html-DlV52mWV.js"
   ), true ? [] : void 0), meta: { "title": "Vue Time Picker Component" } }],
   ["/forms/validation.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "forms_validation.html" */
-    "./validation.html-raaYsSh8.js"
+    "./validation.html-2QwCYaBH.js"
   ), true ? [] : void 0), meta: { "title": "Vue Form Validation" } }],
   ["/components/accordion.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_accordion.html" */
-    "./accordion.html-Dn2-DS4M.js"
+    "./accordion.html-DPn8cCyj.js"
   ), true ? [] : void 0), meta: { "title": "Vue Accordion Component" } }],
   ["/components/alert.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_alert.html" */
-    "./alert.html-X_cq_Izb.js"
+    "./alert.html-CDqS0NZ4.js"
   ), true ? [] : void 0), meta: { "title": "Vue Alert Component" } }],
   ["/components/avatar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_avatar.html" */
-    "./avatar.html-z0-kiipd.js"
+    "./avatar.html-CGvuFR7Q.js"
   ), true ? [] : void 0), meta: { "title": "Vue Avatar Component" } }],
   ["/components/badge.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_badge.html" */
-    "./badge.html-DZ9fuOYW.js"
+    "./badge.html-BIxXbpUI.js"
   ), true ? [] : void 0), meta: { "title": "Vue Badge Component" } }],
   ["/components/breadcrumb.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_breadcrumb.html" */
-    "./breadcrumb.html-DE4SDiRm.js"
+    "./breadcrumb.html-3P6FIBpg.js"
   ), true ? [] : void 0), meta: { "title": "Vue Breadcrumb Component" } }],
   ["/components/button-group.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_button-group.html" */
-    "./button-group.html-D-Y114W6.js"
+    "./button-group.html-DokwKiVg.js"
   ), true ? [] : void 0), meta: { "title": "Vue Button Group Component" } }],
   ["/components/button.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_button.html" */
-    "./button.html-wRYZPE1L.js"
+    "./button.html-Tm2d-w3G.js"
   ), true ? [] : void 0), meta: { "title": "Vue Buttons Component" } }],
   ["/components/calendar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_calendar.html" */
-    "./calendar.html-CseGxlE_.js"
+    "./calendar.html-aIZ63-sL.js"
   ), true ? [] : void 0), meta: { "title": "Vue Calendar Component" } }],
   ["/components/callout.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_callout.html" */
-    "./callout.html-DJC53ru-.js"
+    "./callout.html-BHcngsku.js"
   ), true ? [] : void 0), meta: { "title": "Vue Callout Component" } }],
   ["/components/card.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_card.html" */
-    "./card.html-DN9WmlIZ.js"
+    "./card.html-CiiNUsv5.js"
   ), true ? [] : void 0), meta: { "title": "Vue Card Component" } }],
   ["/components/carousel.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_carousel.html" */
-    "./carousel.html-61D6vnww.js"
+    "./carousel.html-DN2cjEdX.js"
   ), true ? [] : void 0), meta: { "title": "Vue Carousel Component" } }],
   ["/components/chart.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_chart.html" */
-    "./chart.html-DCdC0-KY.js"
+    "./chart.html-DY5wyS1U.js"
   ), true ? [] : void 0), meta: { "title": "Vue Chart.js Component" } }],
   ["/components/close-button.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_close-button.html" */
-    "./close-button.html-CSQ13MAD.js"
+    "./close-button.html-BS4-GrP8.js"
   ), true ? [] : void 0), meta: { "title": "Vue Close Button Component" } }],
   ["/components/collapse.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_collapse.html" */
-    "./collapse.html-COalO-Qi.js"
+    "./collapse.html-CuA1iHpy.js"
   ), true ? [] : void 0), meta: { "title": "Vue Collapse Component" } }],
   ["/components/dropdown.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_dropdown.html" */
-    "./dropdown.html-DovFmUDM.js"
+    "./dropdown.html-D58fBbQW.js"
   ), true ? [] : void 0), meta: { "title": "Vue Dropdown Component" } }],
   ["/components/footer.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_footer.html" */
-    "./footer.html-BJOHr9F_.js"
+    "./footer.html-DN3ns744.js"
   ), true ? [] : void 0), meta: { "title": "Vue Footer Component" } }],
   ["/components/header.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_header.html" */
-    "./header.html-DHYA60o2.js"
+    "./header.html-DBfVFFNJ.js"
   ), true ? [] : void 0), meta: { "title": "Vue Header Component" } }],
   ["/components/icon.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_icon.html" */
-    "./icon.html-D5YAsQ5X.js"
+    "./icon.html-C2C1fAVP.js"
   ), true ? __vite__mapDeps([5,4]) : void 0), meta: { "title": "Vue Icon Component" } }],
   ["/components/image.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_image.html" */
-    "./image.html-CfWMHRrt.js"
+    "./image.html-DC5HLYH1.js"
   ), true ? [] : void 0), meta: { "title": "Vue Image Component" } }],
   ["/components/link.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_link.html" */
-    "./link.html-CPRhnjZz.js"
+    "./link.html-C2tbxGSf.js"
   ), true ? [] : void 0), meta: { "title": "CLink" } }],
   ["/components/list-group.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_list-group.html" */
-    "./list-group.html-CzeYoW-1.js"
+    "./list-group.html-ChBEIPwp.js"
   ), true ? [] : void 0), meta: { "title": "Vue List Group Component" } }],
   ["/components/loading-button.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_loading-button.html" */
-    "./loading-button.html-CfSizC_p.js"
+    "./loading-button.html-BwfYal81.js"
   ), true ? [] : void 0), meta: { "title": "Vue Loading Button Component" } }],
   ["/components/modal.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_modal.html" */
-    "./modal.html-Cpi2200D.js"
+    "./modal.html-KOyG7M6n.js"
   ), true ? [] : void 0), meta: { "title": "Vue Modal Component" } }],
   ["/components/navbar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_navbar.html" */
-    "./navbar.html-CPFx4VxT.js"
+    "./navbar.html-BCzYXKko.js"
   ), true ? [] : void 0), meta: { "title": "Vue Navbar Component" } }],
   ["/components/navs-tabs.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_navs-tabs.html" */
-    "./navs-tabs.html-DNEhKyKa.js"
+    "./navs-tabs.html-BwFsuHAs.js"
   ), true ? [] : void 0), meta: { "title": "Vue Navs & Tabs Components" } }],
   ["/components/offcanvas.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_offcanvas.html" */
-    "./offcanvas.html-snulfaYO.js"
+    "./offcanvas.html-D6TxFWNe.js"
   ), true ? [] : void 0), meta: { "title": "Vue Offcanvas Component" } }],
   ["/components/pagination.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_pagination.html" */
-    "./pagination.html-CrGjPQzq.js"
+    "./pagination.html-BlNq3AJ1.js"
   ), true ? [] : void 0), meta: { "title": "Vue Pagination Component" } }],
   ["/components/placeholder.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_placeholder.html" */
-    "./placeholder.html-CClTj12m.js"
+    "./placeholder.html-BBrpG9kK.js"
   ), true ? [] : void 0), meta: { "title": "Vue Placeholder Component" } }],
   ["/components/popover.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_popover.html" */
-    "./popover.html-BW84rsRc.js"
+    "./popover.html-CcictLyq.js"
   ), true ? [] : void 0), meta: { "title": "Vue Popover Component and Directive" } }],
   ["/components/progress.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_progress.html" */
-    "./progress.html-DB3yeOum.js"
+    "./progress.html-DAixQyXt.js"
   ), true ? [] : void 0), meta: { "title": "Vue Progress Component" } }],
   ["/components/sidebar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_sidebar.html" */
-    "./sidebar.html-DgW_6PYz.js"
+    "./sidebar.html-CrmBFQhh.js"
   ), true ? [] : void 0), meta: { "title": "Vue Sidebar Component" } }],
   ["/components/smart-pagination.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_smart-pagination.html" */
-    "./smart-pagination.html-nSMfcTcY.js"
+    "./smart-pagination.html-CYqfH6pM.js"
   ), true ? [] : void 0), meta: { "title": "Vue Smart Pagination Component" } }],
   ["/components/smart-table.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_smart-table.html" */
-    "./smart-table.html-CScdoI3i.js"
+    "./smart-table.html-DMqyM7wC.js"
   ), true ? [] : void 0), meta: { "title": "Vue Smart Table Component (DataTable)" } }],
   ["/components/spinner.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_spinner.html" */
-    "./spinner.html-DqVQR-ZV.js"
+    "./spinner.html-Dja_Ea9Q.js"
   ), true ? [] : void 0), meta: { "title": "Vue Spinner Component" } }],
   ["/components/table.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_table.html" */
-    "./table.html-Blmdpj5L.js"
+    "./table.html-BKhXilE_.js"
   ), true ? [] : void 0), meta: { "title": "Vue Table Component" } }],
   ["/components/tabs.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_tabs.html" */
-    "./tabs.html-CkdFhm8K.js"
+    "./tabs.html-BryTxUY8.js"
   ), true ? [] : void 0), meta: { "title": "Vue Tabs Components" } }],
   ["/components/toast.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_toast.html" */
-    "./toast.html-CSjYawpB.js"
+    "./toast.html-B70IM5zC.js"
   ), true ? [] : void 0), meta: { "title": "Vue Toast Component" } }],
   ["/components/tooltip.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_tooltip.html" */
-    "./tooltip.html-D9ViTdwE.js"
+    "./tooltip.html-D2DMDPTK.js"
   ), true ? [] : void 0), meta: { "title": "Vue Tooltip Component and Directive" } }],
   ["/components/virtual-scroller.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_virtual-scroller.html" */
-    "./virtual-scroller.html-Bi-h-EJZ.js"
+    "./virtual-scroller.html-eMrz1664.js"
   ), true ? [] : void 0), meta: { "title": "Vue Virtual Scroller Component" } }],
   ["/components/widgets.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_widgets.html" */
-    "./widgets.html-DSUDFhA1.js"
+    "./widgets.html-CX3InA_E.js"
   ), true ? [] : void 0), meta: { "title": "Vue Widgets Components" } }],
-  ["/customize/css-variables.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "customize_css-variables.html" */
-    "./css-variables.html-D6oXr2T8.js"
-  ), true ? [] : void 0), meta: { "title": "CSS variables" } }],
-  ["/customize/options.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "customize_options.html" */
-    "./options.html-DG8yKKPo.js"
-  ), true ? [] : void 0), meta: { "title": "Options" } }],
-  ["/customize/sass.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "customize_sass.html" */
-    "./sass.html-Db-hwC3H.js"
-  ), true ? [] : void 0), meta: { "title": "Sass" } }],
-  ["/layout/breakpoints.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "layout_breakpoints.html" */
-    "./breakpoints.html-BkLAX3Vl.js"
-  ), true ? [] : void 0), meta: { "title": "Breakpoints" } }],
-  ["/layout/columns.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "layout_columns.html" */
-    "./columns.html-DINIOXPp.js"
-  ), true ? [] : void 0), meta: { "title": "Columns" } }],
-  ["/layout/containers.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "layout_containers.html" */
-    "./containers.html-rXe4Oyfr.js"
-  ), true ? [] : void 0), meta: { "title": "Containers" } }],
-  ["/layout/grid.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "layout_grid.html" */
-    "./grid.html-Dadpow9y.js"
-  ), true ? [] : void 0), meta: { "title": "Grid" } }],
-  ["/layout/gutters.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "layout_gutters.html" */
-    "./gutters.html-DNXIcgRp.js"
-  ), true ? [] : void 0), meta: { "title": "Gutters" } }],
   ["/migration/v4.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "migration_v4.html" */
-    "./v4.html-q9ZeJS7t.js"
+    "./v4.html-Br_AIuga.js"
   ), true ? [] : void 0), meta: { "title": "Migration to v4" } }],
   ["/migration/v5.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "migration_v5.html" */
-    "./v5.html-zQzsnVtz.js"
+    "./v5.html-D8yxOVYF.js"
   ), true ? [] : void 0), meta: { "title": "Migration to v5" } }],
   ["/templates/admin-dashboard.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_admin-dashboard.html" */
-    "./admin-dashboard.html-DH1hYwCG.js"
+    "./admin-dashboard.html-DU-BWvUG.js"
   ), true ? [] : void 0), meta: { "title": "Vue Templates" } }],
   ["/templates/contents.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_contents.html" */
-    "./contents.html-vtL6Xk2K.js"
+    "./contents.html-CKe33LGP.js"
   ), true ? [] : void 0), meta: { "title": "Vue templates contents" } }],
   ["/templates/customize.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_customize.html" */
-    "./customize.html-Dzo1Iup1.js"
+    "./customize.html-CNlse-Z8.js"
   ), true ? [] : void 0), meta: { "title": "Customize vue templates" } }],
   ["/templates/download.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_download.html" */
-    "./download.html-BCaD7SmH.js"
+    "./download.html-91eC3PyH.js"
   ), true ? [] : void 0), meta: { "title": "Download vue templates" } }],
   ["/templates/installation.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_installation.html" */
-    "./installation.html-9rN1EdIK.js"
+    "./installation.html-B9oaQNAO.js"
   ), true ? [] : void 0), meta: { "title": "Vue templates installation" } }],
+  ["/api/alert/CAlert.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_alert_CAlert.api.html" */
+    "./CAlert.api.html-BXjHGX6m.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/alert/CAlertHeading.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_alert_CAlertHeading.api.html" */
+    "./CAlertHeading.api.html-DoJskrT2.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/alert/CAlertLink.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_alert_CAlertLink.api.html" */
+    "./CAlertLink.api.html-Be4cejDR.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordion.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordion.api.html" */
-    "./CAccordion.api.html-CCgXqfRP.js"
+    "./CAccordion.api.html-BmmCbR4F.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionBody.api.html" */
-    "./CAccordionBody.api.html-BXRTlfny.js"
+    "./CAccordionBody.api.html-DnDWpn--.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionButton.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionButton.api.html" */
-    "./CAccordionButton.api.html-JC9LLjmn.js"
+    "./CAccordionButton.api.html-BFZVkVlR.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionHeader.api.html" */
-    "./CAccordionHeader.api.html-DGQX2wqH.js"
+    "./CAccordionHeader.api.html-D3E3-RrY.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionItem.api.html" */
-    "./CAccordionItem.api.html-BpbqLkXq.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/alert/CAlert.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_alert_CAlert.api.html" */
-    "./CAlert.api.html-DJfiMGtZ.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/alert/CAlertHeading.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_alert_CAlertHeading.api.html" */
-    "./CAlertHeading.api.html-D0Fv3SkG.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/alert/CAlertLink.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_alert_CAlertLink.api.html" */
-    "./CAlertLink.api.html-DT7bhrUL.js"
+    "./CAccordionItem.api.html-B_Gvnaeq.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/avatar/CAvatar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_avatar_CAvatar.api.html" */
-    "./CAvatar.api.html-CouQnPfO.js"
+    "./CAvatar.api.html-BTqEczbV.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/backdrop/CBackdrop.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_backdrop_CBackdrop.api.html" */
-    "./CBackdrop.api.html-DPM6F3Ms.js"
+    "./CBackdrop.api.html-DAmzayp3.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/badge/CBadge.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_badge_CBadge.api.html" */
-    "./CBadge.api.html-D2uxambY.js"
+    "./CBadge.api.html-CgAts6f4.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/breadcrumb/CBreadcrumb.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_breadcrumb_CBreadcrumb.api.html" */
-    "./CBreadcrumb.api.html-D3NX_pJM.js"
+    "./CBreadcrumb.api.html-DqwjKss4.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/breadcrumb/CBreadcrumbItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_breadcrumb_CBreadcrumbItem.api.html" */
-    "./CBreadcrumbItem.api.html-BdrNJeRK.js"
+    "./CBreadcrumbItem.api.html-r9RgIwJD.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/button/CButton.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_button_CButton.api.html" */
-    "./CButton.api.html-S2e0JYUT.js"
+    "./CButton.api.html-ekRjLD2P.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/button-group/CButtonGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_button-group_CButtonGroup.api.html" */
-    "./CButtonGroup.api.html-CNYwPqP9.js"
+    "./CButtonGroup.api.html-D0mJf4Og.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/button-group/CButtonToolbar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_button-group_CButtonToolbar.api.html" */
-    "./CButtonToolbar.api.html-BCPhzaLb.js"
+    "./CButtonToolbar.api.html-IKoND_KL.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/calendar/CCalendar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_calendar_CCalendar.api.html" */
-    "./CCalendar.api.html-B_m_ZnQs.js"
+    "./CCalendar.api.html-C4aT9FYA.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/callout/CCallout.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_callout_CCallout.api.html" */
-    "./CCallout.api.html-Ce91fCqR.js"
+    "./CCallout.api.html-DiF4unWf.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCard.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCard.api.html" */
-    "./CCard.api.html-YiMTrKiJ.js"
+    "./CCard.api.html-BmbaZsmK.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardBody.api.html" */
-    "./CCardBody.api.html-B_R1oJ7-.js"
+    "./CCardBody.api.html-D0-tGYrD.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardFooter.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardFooter.api.html" */
-    "./CCardFooter.api.html-LhV_NaZN.js"
+    "./CCardFooter.api.html-CiSjk2NS.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardGroup.api.html" */
-    "./CCardGroup.api.html-DqVXXbib.js"
+    "./CCardGroup.api.html-BABSBoJe.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardHeader.api.html" */
-    "./CCardHeader.api.html-9jD1WYwA.js"
+    "./CCardHeader.api.html-D5ZqQVdw.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardImage.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardImage.api.html" */
-    "./CCardImage.api.html-BRUhG_Yf.js"
+    "./CCardImage.api.html-BBnb9-GW.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardImageOverlay.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardImageOverlay.api.html" */
-    "./CCardImageOverlay.api.html-CUiA6mv_.js"
+    "./CCardImageOverlay.api.html-TpPKznie.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardLink.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardLink.api.html" */
-    "./CCardLink.api.html-DIAX7995.js"
+    "./CCardLink.api.html-MlyoVRZ4.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardSubtitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardSubtitle.api.html" */
-    "./CCardSubtitle.api.html-BCXp-tN1.js"
+    "./CCardSubtitle.api.html-Cl-ezx9Z.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardText.api.html" */
-    "./CCardText.api.html-DLOvyrds.js"
+    "./CCardText.api.html-CeB8bETl.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardTitle.api.html" */
-    "./CCardTitle.api.html-BnqOTLmE.js"
+    "./CCardTitle.api.html-BIewfA00.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/carousel/CCarousel.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_carousel_CCarousel.api.html" */
-    "./CCarousel.api.html-wBjQKaU8.js"
+    "./CCarousel.api.html-B6WYH3KM.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/carousel/CCarouselCaption.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_carousel_CCarouselCaption.api.html" */
-    "./CCarouselCaption.api.html-B6Up5MSy.js"
+    "./CCarouselCaption.api.html-CJ2Co3Eg.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/carousel/CCarouselItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_carousel_CCarouselItem.api.html" */
-    "./CCarouselItem.api.html-Cs9oiIYu.js"
+    "./CCarouselItem.api.html-Bx_efOFH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/close-button/CCloseButton.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_close-button_CCloseButton.api.html" */
-    "./CCloseButton.api.html-CvTwawLT.js"
+    "./CCloseButton.api.html-X5Fmd0Tk.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/collapse/CCollapse.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_collapse_CCollapse.api.html" */
-    "./CCollapse.api.html-DPM8RIAO.js"
+    "./CCollapse.api.html-zVmsFw74.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/conditional-teleport/CConditionalTeleport.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_conditional-teleport_CConditionalTeleport.api.html" */
-    "./CConditionalTeleport.api.html-Cc5-XAf0.js"
+    "./CConditionalTeleport.api.html-7PMLb_Wk.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/date-picker/CDatePicker.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_date-picker_CDatePicker.api.html" */
+    "./CDatePicker.api.html-BmlaHdUZ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/date-range-picker/CDateRangePicker.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_date-range-picker_CDateRangePicker.api.html" */
-    "./CDateRangePicker.api.html-BI3YUNG-.js"
+    "./CDateRangePicker.api.html-Hlubmql2.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/date-picker/CDatePicker.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_date-picker_CDatePicker.api.html" */
-    "./CDatePicker.api.html-CU5snrq0.js"
+  ["/api/dropdown/CDropdown.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_dropdown_CDropdown.api.html" */
+    "./CDropdown.api.html-DGIxjfQ3.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/grid/CCol.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_grid_CCol.api.html" */
-    "./CCol.api.html-_3c0EEkS.js"
+  ["/api/dropdown/CDropdownDivider.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_dropdown_CDropdownDivider.api.html" */
+    "./CDropdownDivider.api.html-VSQ_XlFl.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/grid/CContainer.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_grid_CContainer.api.html" */
-    "./CContainer.api.html-DdB48bcN.js"
+  ["/api/dropdown/CDropdownHeader.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_dropdown_CDropdownHeader.api.html" */
+    "./CDropdownHeader.api.html-Cxpz-KV-.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/grid/CRow.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_grid_CRow.api.html" */
-    "./CRow.api.html-Bqs4xMB8.js"
+  ["/api/dropdown/CDropdownItem.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_dropdown_CDropdownItem.api.html" */
+    "./CDropdownItem.api.html-BVulLqSR.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/dropdown/CDropdownMenu.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_dropdown_CDropdownMenu.api.html" */
+    "./CDropdownMenu.api.html-BckpImA4.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/dropdown/CDropdownToggle.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_dropdown_CDropdownToggle.api.html" */
+    "./CDropdownToggle.api.html-unfICPox.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/footer/CFooter.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_footer_CFooter.api.html" */
+    "./CFooter.api.html-CH8Pc0Ax.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CForm.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CForm.api.html" */
-    "./CForm.api.html-BjVNGcqA.js"
+    "./CForm.api.html-2ixEm0A1.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormCheck.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormCheck.api.html" */
-    "./CFormCheck.api.html-CLNwvt7F.js"
+    "./CFormCheck.api.html-Bf9lhFvH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormControl.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormControl.api.html" */
-    "./CFormControl.api.html-DulT1GYX.js"
+    "./CFormControl.api.html-D9-r3st8.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormControlValidation.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormControlValidation.api.html" */
-    "./CFormControlValidation.api.html-Uo6SZBwL.js"
+    "./CFormControlValidation.api.html-CDKpaVG3.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormControlWrapper.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormControlWrapper.api.html" */
-    "./CFormControlWrapper.api.html-DD-MZHrX.js"
+    "./CFormControlWrapper.api.html-D75G__Lh.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormFeedback.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormFeedback.api.html" */
-    "./CFormFeedback.api.html-Blp_lXIj.js"
+    "./CFormFeedback.api.html-Cs8xHqDe.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormFloating.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormFloating.api.html" */
-    "./CFormFloating.api.html-0A1fU8zv.js"
+    "./CFormFloating.api.html-C-X3BFM6.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormInput.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormInput.api.html" */
-    "./CFormInput.api.html-DWatkuyl.js"
+    "./CFormInput.api.html-CVvr0T_h.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormLabel.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormLabel.api.html" */
-    "./CFormLabel.api.html-DIJltcDf.js"
+    "./CFormLabel.api.html-CpQQKu1b.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormRange.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormRange.api.html" */
-    "./CFormRange.api.html-BkimLsL0.js"
+    "./CFormRange.api.html-C4Wns1Lr.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormSelect.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormSelect.api.html" */
-    "./CFormSelect.api.html-Znx-Qdx4.js"
+    "./CFormSelect.api.html-4dvFandI.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormSwitch.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormSwitch.api.html" */
-    "./CFormSwitch.api.html-COUzNUFt.js"
+    "./CFormSwitch.api.html-CyrjItfh.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormText.api.html" */
-    "./CFormText.api.html-30wocJd2.js"
+    "./CFormText.api.html-CpJOPSQg.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormTextarea.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormTextarea.api.html" */
-    "./CFormTextarea.api.html-Cz-QEqc-.js"
+    "./CFormTextarea.api.html-DMhqjvWY.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CInputGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CInputGroup.api.html" */
-    "./CInputGroup.api.html-BI6IyylY.js"
+    "./CInputGroup.api.html-B9Jacvbh.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CInputGroupText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CInputGroupText.api.html" */
-    "./CInputGroupText.api.html-vqsqCFC5.js"
+    "./CInputGroupText.api.html-nYw0lYnn.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/grid/CCol.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_grid_CCol.api.html" */
+    "./CCol.api.html-DFGWxu75.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/grid/CContainer.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_grid_CContainer.api.html" */
+    "./CContainer.api.html-CJReqk6k.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/grid/CRow.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_grid_CRow.api.html" */
+    "./CRow.api.html-CIrSW5Ga.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/header/CHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_header_CHeader.api.html" */
-    "./CHeader.api.html-DYJ2DbMA.js"
+    "./CHeader.api.html-CJg_IEiF.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/header/CHeaderBrand.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_header_CHeaderBrand.api.html" */
-    "./CHeaderBrand.api.html-DZviNjBB.js"
+    "./CHeaderBrand.api.html-4A7AgRNX.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/header/CHeaderDivider.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_header_CHeaderDivider.api.html" */
-    "./CHeaderDivider.api.html-Dxr15zWG.js"
+    "./CHeaderDivider.api.html-DKNK6-VZ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/header/CHeaderNav.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_header_CHeaderNav.api.html" */
-    "./CHeaderNav.api.html-CVpRI11a.js"
+    "./CHeaderNav.api.html-Bbsph2xH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/header/CHeaderText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_header_CHeaderText.api.html" */
-    "./CHeaderText.api.html-BrKDOelw.js"
+    "./CHeaderText.api.html-dosyBX2D.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/header/CHeaderToggler.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_header_CHeaderToggler.api.html" */
-    "./CHeaderToggler.api.html-glxtGeI8.js"
+    "./CHeaderToggler.api.html-BlIes8qe.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/image/CImage.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_image_CImage.api.html" */
-    "./CImage.api.html-DMywvO2K.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/footer/CFooter.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_footer_CFooter.api.html" */
-    "./CFooter.api.html-CTDUziBO.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/dropdown/CDropdown.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_dropdown_CDropdown.api.html" */
-    "./CDropdown.api.html-D62WSwCI.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/dropdown/CDropdownDivider.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_dropdown_CDropdownDivider.api.html" */
-    "./CDropdownDivider.api.html-CbdalXg1.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/dropdown/CDropdownHeader.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_dropdown_CDropdownHeader.api.html" */
-    "./CDropdownHeader.api.html-CWfJRgQK.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/dropdown/CDropdownItem.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_dropdown_CDropdownItem.api.html" */
-    "./CDropdownItem.api.html-I17bWEzI.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/dropdown/CDropdownMenu.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_dropdown_CDropdownMenu.api.html" */
-    "./CDropdownMenu.api.html-ozovUzWv.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/dropdown/CDropdownToggle.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_dropdown_CDropdownToggle.api.html" */
-    "./CDropdownToggle.api.html-CgArM2Dq.js"
+    "./CImage.api.html-C1zwuBO9.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/link/CLink.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_link_CLink.api.html" */
-    "./CLink.api.html-DOUEZfTt.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/loading-button/CLoadingButton.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_loading-button_CLoadingButton.api.html" */
-    "./CLoadingButton.api.html-CHbOzqNb.js"
+    "./CLink.api.html-6FAjEedH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/list-group/CListGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_list-group_CListGroup.api.html" */
-    "./CListGroup.api.html-BqZfzYr_.js"
+    "./CListGroup.api.html-CWB2ebuP.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/list-group/CListGroupItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_list-group_CListGroupItem.api.html" */
-    "./CListGroupItem.api.html-DrZDBS4q.js"
+    "./CListGroupItem.api.html-B75RiEoP.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/loading-button/CLoadingButton.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_loading-button_CLoadingButton.api.html" */
+    "./CLoadingButton.api.html-DlKJUvsa.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModal.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModal.api.html" */
-    "./CModal.api.html-BCUFPKPI.js"
+    "./CModal.api.html-8P7cw-ZY.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalBody.api.html" */
-    "./CModalBody.api.html-B4PDRuiq.js"
+    "./CModalBody.api.html-CHE1pY1A.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalFooter.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalFooter.api.html" */
-    "./CModalFooter.api.html-I3zNFYrU.js"
+    "./CModalFooter.api.html-BsNGmVfu.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalHeader.api.html" */
-    "./CModalHeader.api.html-BEbIxHSk.js"
+    "./CModalHeader.api.html-Dg9LwxqA.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalTitle.api.html" */
-    "./CModalTitle.api.html-Dsn_5uO1.js"
+    "./CModalTitle.api.html-BBDuhOrq.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/multi-select/CMultiSelect.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_multi-select_CMultiSelect.api.html" */
+    "./CMultiSelect.api.html-B9pw_7rn.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/multi-select/CMultiSelectNativeSelect.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_multi-select_CMultiSelectNativeSelect.api.html" */
+    "./CMultiSelectNativeSelect.api.html-Mfuatll8.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/multi-select/CMultiSelectOptions.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_multi-select_CMultiSelectOptions.api.html" */
+    "./CMultiSelectOptions.api.html-DivQq4t9.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/multi-select/CMultiSelectSelection.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_multi-select_CMultiSelectSelection.api.html" */
+    "./CMultiSelectSelection.api.html-D2u4Hpu2.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNav.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNav.api.html" */
-    "./CNav.api.html-BixfBxUo.js"
+    "./CNav.api.html-CHflKJ-r.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavGroup.api.html" */
-    "./CNavGroup.api.html-DjoL3rDD.js"
+    "./CNavGroup.api.html-B69rD5K0.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavGroupItems.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavGroupItems.api.html" */
-    "./CNavGroupItems.api.html-iDaB1GPK.js"
+    "./CNavGroupItems.api.html-MzViYoW-.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavItem.api.html" */
-    "./CNavItem.api.html-BEXD-jT_.js"
+    "./CNavItem.api.html-BluVGAkl.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavLink.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavLink.api.html" */
-    "./CNavLink.api.html-B1Fra5GG.js"
+    "./CNavLink.api.html-BLbL7bWh.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavTitle.api.html" */
-    "./CNavTitle.api.html-CWU7sJed.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/multi-select/CMultiSelect.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_multi-select_CMultiSelect.api.html" */
-    "./CMultiSelect.api.html-BmAsQVzE.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/multi-select/CMultiSelectNativeSelect.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_multi-select_CMultiSelectNativeSelect.api.html" */
-    "./CMultiSelectNativeSelect.api.html-BmnaF-ZV.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/multi-select/CMultiSelectOptions.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_multi-select_CMultiSelectOptions.api.html" */
-    "./CMultiSelectOptions.api.html-BqQlwptE.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/multi-select/CMultiSelectSelection.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_multi-select_CMultiSelectSelection.api.html" */
-    "./CMultiSelectSelection.api.html-Dutv3Y68.js"
+    "./CNavTitle.api.html-B5pzzmsO.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbar.api.html" */
-    "./CNavbar.api.html-BeCcpzSN.js"
+    "./CNavbar.api.html-D6jrKQQE.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarBrand.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarBrand.api.html" */
-    "./CNavbarBrand.api.html-J_G_IdJv.js"
+    "./CNavbarBrand.api.html-iAKNmT2K.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarNav.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarNav.api.html" */
-    "./CNavbarNav.api.html-Cd7uTEsr.js"
+    "./CNavbarNav.api.html-DTmYoiRc.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarText.api.html" */
-    "./CNavbarText.api.html-BvWhRe00.js"
+    "./CNavbarText.api.html-DhRgVY0Q.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarToggler.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarToggler.api.html" */
-    "./CNavbarToggler.api.html-VWI7FIAd.js"
+    "./CNavbarToggler.api.html-BHSE5jxT.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvas.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvas.api.html" */
-    "./COffcanvas.api.html-C17Hgo5q.js"
+    "./COffcanvas.api.html--9epuLuW.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvasBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvasBody.api.html" */
-    "./COffcanvasBody.api.html-7xNiFQIc.js"
+    "./COffcanvasBody.api.html-DpuEcC8p.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvasHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvasHeader.api.html" */
-    "./COffcanvasHeader.api.html-z90OVBc1.js"
+    "./COffcanvasHeader.api.html-CA3y4VF-.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvasTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvasTitle.api.html" */
-    "./COffcanvasTitle.api.html-C6NXTtFn.js"
+    "./COffcanvasTitle.api.html-BCDNOR0i.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/pagination/CPagination.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_pagination_CPagination.api.html" */
-    "./CPagination.api.html-BFRDJVfm.js"
+    "./CPagination.api.html-mFhXc4Yf.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/pagination/CPaginationItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_pagination_CPaginationItem.api.html" */
-    "./CPaginationItem.api.html-BeMGgnpT.js"
+    "./CPaginationItem.api.html-Bsa5oQkt.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/pagination/CSmartPagination.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_pagination_CSmartPagination.api.html" */
-    "./CSmartPagination.api.html-DAbADGMm.js"
+    "./CSmartPagination.api.html-CrCaD_lP.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/picker/CPicker.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_picker_CPicker.api.html" */
-    "./CPicker.api.html-9VeqvbFd.js"
+    "./CPicker.api.html-Da5Hysn9.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/placeholder/CPlaceholder.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_placeholder_CPlaceholder.api.html" */
-    "./CPlaceholder.api.html-Bg2cOzGv.js"
+    "./CPlaceholder.api.html-CpcOzpbr.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/popover/CPopover.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_popover_CPopover.api.html" */
-    "./CPopover.api.html-D9o0t5Mg.js"
+    "./CPopover.api.html-ymVfjSSe.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/progress/CProgress.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_progress_CProgress.api.html" */
-    "./CProgress.api.html-B8_3XJj0.js"
+    "./CProgress.api.html-C-66SSng.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/progress/CProgressBar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_progress_CProgressBar.api.html" */
-    "./CProgressBar.api.html-D3vDyWpF.js"
+    "./CProgressBar.api.html-BjA2nShz.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/progress/CProgressStacked.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_progress_CProgressStacked.api.html" */
-    "./CProgressStacked.api.html-DkDz4CoY.js"
+    "./CProgressStacked.api.html-iS9rdju9.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/rating/CRating.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_rating_CRating.api.html" */
-    "./CRating.api.html-CNQcY5OX.js"
+    "./CRating.api.html-CbBSuHpA.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebar.api.html" */
-    "./CSidebar.api.html-CU-ReA5a.js"
+    "./CSidebar.api.html-DaxOjldv.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarBrand.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarBrand.api.html" */
-    "./CSidebarBrand.api.html-BRcYS6vj.js"
+    "./CSidebarBrand.api.html-CMvNigzU.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarFooter.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarFooter.api.html" */
-    "./CSidebarFooter.api.html-ejFT7uLz.js"
+    "./CSidebarFooter.api.html-DG6rj4Di.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarHeader.api.html" */
-    "./CSidebarHeader.api.html-BQRLDdkW.js"
+    "./CSidebarHeader.api.html-UjLXre_-.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarNav.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarNav.api.html" */
-    "./CSidebarNav.api.html-D_E51N0Z.js"
+    "./CSidebarNav.api.html-ZV8snc4P.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarToggler.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarToggler.api.html" */
-    "./CSidebarToggler.api.html-BsbRHzMl.js"
+    "./CSidebarToggler.api.html-CwaVG0LH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/smart-pagination/CSmartPagination.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_smart-pagination_CSmartPagination.api.html" */
-    "./CSmartPagination.api.html-BZNxDexA.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/spinner/CSpinner.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_spinner_CSpinner.api.html" */
-    "./CSpinner.api.html-nhkoGdh0.js"
+    "./CSmartPagination.api.html-BikuSyAw.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/smart-table/CSmartTable.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_smart-table_CSmartTable.api.html" */
-    "./CSmartTable.api.html-C_27owD5.js"
+    "./CSmartTable.api.html-DBtpefqV.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/smart-table/CSmartTableBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_smart-table_CSmartTableBody.api.html" */
-    "./CSmartTableBody.api.html--kdQLwaK.js"
+    "./CSmartTableBody.api.html-BnkPBl42.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/smart-table/CSmartTableCleaner.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_smart-table_CSmartTableCleaner.api.html" */
-    "./CSmartTableCleaner.api.html-2JqW2Tbq.js"
+    "./CSmartTableCleaner.api.html-Ca51YF0C.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/smart-table/CSmartTableFilter.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_smart-table_CSmartTableFilter.api.html" */
-    "./CSmartTableFilter.api.html-CGF2OHjR.js"
+    "./CSmartTableFilter.api.html-B7_1b50f.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/smart-table/CSmartTableHead.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_smart-table_CSmartTableHead.api.html" */
-    "./CSmartTableHead.api.html-BF9DPtLV.js"
+    "./CSmartTableHead.api.html-DW9ZUntG.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/smart-table/CSmartTableItemsPerPageSelector.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_smart-table_CSmartTableItemsPerPageSelector.api.html" */
-    "./CSmartTableItemsPerPageSelector.api.html-71l86LhN.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/tabs/CTab.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_tabs_CTab.api.html" */
-    "./CTab.api.html-BZmJ5EOH.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/tabs/CTabContent.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_tabs_CTabContent.api.html" */
-    "./CTabContent.api.html-BMf7lokg.js"
+    "./CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/tabs/CTabList.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_tabs_CTabList.api.html" */
-    "./CTabList.api.html-B4-8A2N0.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/tabs/CTabPane.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_tabs_CTabPane.api.html" */
-    "./CTabPane.api.html-BGSLX6iu.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/tabs/CTabPanel.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_tabs_CTabPanel.api.html" */
-    "./CTabPanel.api.html-BI93f942.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/tabs/CTabs.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_tabs_CTabs.api.html" */
-    "./CTabs.api.html-BUUB5NCE.js"
+  ["/api/spinner/CSpinner.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_spinner_CSpinner.api.html" */
+    "./CSpinner.api.html-O0NhTV-x.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTable.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTable.api.html" */
-    "./CTable.api.html-Bzg4sm1k.js"
+    "./CTable.api.html-D0dRnCW-.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableBody.api.html" */
-    "./CTableBody.api.html-x_85TkL5.js"
+    "./CTableBody.api.html-BFPdQqw6.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableCaption.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableCaption.api.html" */
-    "./CTableCaption.api.html-Adpho5J1.js"
+    "./CTableCaption.api.html-MTWPlJR7.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableDataCell.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableDataCell.api.html" */
-    "./CTableDataCell.api.html-C_tHXIad.js"
+    "./CTableDataCell.api.html-r0s-YiAY.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableFoot.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableFoot.api.html" */
-    "./CTableFoot.api.html-CIk-TJRN.js"
+    "./CTableFoot.api.html-FVtyDTMQ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableHead.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableHead.api.html" */
-    "./CTableHead.api.html-D0oDPZMH.js"
+    "./CTableHead.api.html-CuaSabQj.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableHeaderCell.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableHeaderCell.api.html" */
-    "./CTableHeaderCell.api.html-BmqIZ_n_.js"
+    "./CTableHeaderCell.api.html-DahKEodk.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableRow.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableRow.api.html" */
-    "./CTableRow.api.html-DgkbFIZb.js"
+    "./CTableRow.api.html-Bh9JvciN.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/tabs/CTab.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_tabs_CTab.api.html" */
+    "./CTab.api.html-DOCKLIPZ.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/tabs/CTabContent.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_tabs_CTabContent.api.html" */
+    "./CTabContent.api.html-C2PinBa9.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/tabs/CTabList.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_tabs_CTabList.api.html" */
+    "./CTabList.api.html-BEqv9sl7.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/tabs/CTabPane.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_tabs_CTabPane.api.html" */
+    "./CTabPane.api.html-B47A_sq6.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/tabs/CTabPanel.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_tabs_CTabPanel.api.html" */
+    "./CTabPanel.api.html-CZYhUIL_.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/tabs/CTabs.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_tabs_CTabs.api.html" */
+    "./CTabs.api.html-BFEYxLzk.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/time-picker/CTimePicker.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_time-picker_CTimePicker.api.html" */
-    "./CTimePicker.api.html-MGclcBvI.js"
+    "./CTimePicker.api.html-B1LPdULH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/time-picker/CTimePickerRollCol.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_time-picker_CTimePickerRollCol.api.html" */
-    "./CTimePickerRollCol.api.html-C4Fp0Pqz.js"
+    "./CTimePickerRollCol.api.html-CKuM6oLe.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToast.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToast.api.html" */
-    "./CToast.api.html-C4bWuNTL.js"
+    "./CToast.api.html-CrpEOCPn.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToastBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToastBody.api.html" */
-    "./CToastBody.api.html-h12k_UFm.js"
+    "./CToastBody.api.html-4viEj-di.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToastClose.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToastClose.api.html" */
-    "./CToastClose.api.html-TcUeczaV.js"
+    "./CToastClose.api.html-D5MPMBvN.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToastHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToastHeader.api.html" */
-    "./CToastHeader.api.html-D4gIDkxo.js"
+    "./CToastHeader.api.html-Bp3krdZ3.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToaster.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToaster.api.html" */
-    "./CToaster.api.html-u0fhJi6C.js"
+    "./CToaster.api.html-CZ4AWR-a.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/virtual-scroller/CVirtualScroller.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_virtual-scroller_CVirtualScroller.api.html" */
-    "./CVirtualScroller.api.html-CU3ZFwZn.js"
+    "./CVirtualScroller.api.html-OI5523Hm.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/tooltip/CTooltip.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_tooltip_CTooltip.api.html" */
+    "./CTooltip.api.html-Dd9JcsKh.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsA.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsA.api.html" */
-    "./CWidgetStatsA.api.html-7zkarq-M.js"
+    "./CWidgetStatsA.api.html-DD_G_0XR.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsB.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsB.api.html" */
-    "./CWidgetStatsB.api.html-CshS5FQG.js"
+    "./CWidgetStatsB.api.html-BDmKGNGc.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsC.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsC.api.html" */
-    "./CWidgetStatsC.api.html-CpDLFFWY.js"
+    "./CWidgetStatsC.api.html-Ck65oxiQ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsD.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsD.api.html" */
-    "./CWidgetStatsD.api.html-CJt_7ymp.js"
+    "./CWidgetStatsD.api.html-C6jHMRVC.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsE.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsE.api.html" */
-    "./CWidgetStatsE.api.html-Dv_4qEcz.js"
+    "./CWidgetStatsE.api.html-WqFr1dq3.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsF.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsF.api.html" */
-    "./CWidgetStatsF.api.html-C0fVjDJM.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/tooltip/CTooltip.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_tooltip_CTooltip.api.html" */
-    "./CTooltip.api.html-J4_VEmfV.js"
+    "./CWidgetStatsF.api.html-DQOglbDZ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/coreui-icons-vue/src/CIcon.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_coreui-icons-vue_src_CIcon.api.html" */
-    "./CIcon.api.html-Pbl12hew.js"
+    "./CIcon.api.html-B3u-PJZc.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/coreui-icons-vue/src/CIconSvg.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_coreui-icons-vue_src_CIconSvg.api.html" */
+    "./CIconSvg.api.html-DboTNlH1.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/404.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "404.html" */
-    "./404.html-B1Fx-RCH.js"
+    "./404.html-RliG702a.js"
   ), true ? [] : void 0), meta: { "title": "" } }]
 ]);
-function getDevtoolsGlobalHook() {
-  return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
+function getDevtoolsGlobalHook$1() {
+  return getTarget$1().__VUE_DEVTOOLS_GLOBAL_HOOK__;
 }
-function getTarget() {
+function getTarget$1() {
   return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : {};
 }
-const isProxyAvailable = typeof Proxy === "function";
-const HOOK_SETUP = "devtools-plugin:setup";
-const HOOK_PLUGIN_SETTINGS_SET = "plugin:settings:set";
-let supported;
-let perf;
-function isPerformanceSupported() {
+const isProxyAvailable$1 = typeof Proxy === "function";
+const HOOK_SETUP$1 = "devtools-plugin:setup";
+const HOOK_PLUGIN_SETTINGS_SET$1 = "plugin:settings:set";
+let supported$1;
+let perf$1;
+function isPerformanceSupported$1() {
   var _a2;
-  if (supported !== void 0) {
-    return supported;
+  if (supported$1 !== void 0) {
+    return supported$1;
   }
   if (typeof window !== "undefined" && window.performance) {
-    supported = true;
-    perf = window.performance;
+    supported$1 = true;
+    perf$1 = window.performance;
   } else if (typeof globalThis !== "undefined" && ((_a2 = globalThis.perf_hooks) === null || _a2 === void 0 ? void 0 : _a2.performance)) {
-    supported = true;
-    perf = globalThis.perf_hooks.performance;
+    supported$1 = true;
+    perf$1 = globalThis.perf_hooks.performance;
   } else {
-    supported = false;
+    supported$1 = false;
   }
-  return supported;
+  return supported$1;
 }
-function now() {
-  return isPerformanceSupported() ? perf.now() : Date.now();
+function now$1() {
+  return isPerformanceSupported$1() ? perf$1.now() : Date.now();
 }
-class ApiProxy {
+let ApiProxy$1 = class ApiProxy {
   constructor(plugin, hook) {
     this.target = null;
     this.targetQueue = [];
@@ -10288,11 +10309,11 @@ class ApiProxy {
         currentSettings = value;
       },
       now() {
-        return now();
+        return now$1();
       }
     };
     if (hook) {
-      hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
+      hook.on(HOOK_PLUGIN_SETTINGS_SET$1, (pluginId, value) => {
         if (pluginId === this.plugin.id) {
           this.fallbacks.setSettings(value);
         }
@@ -10351,16 +10372,16 @@ class ApiProxy {
       item.resolve(await this.target[item.method](...item.args));
     }
   }
-}
-function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+};
+function setupDevtoolsPlugin$1(pluginDescriptor, setupFn) {
   const descriptor = pluginDescriptor;
-  const target = getTarget();
-  const hook = getDevtoolsGlobalHook();
-  const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
+  const target = getTarget$1();
+  const hook = getDevtoolsGlobalHook$1();
+  const enableProxy = isProxyAvailable$1 && descriptor.enableEarlyProxy;
   if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
-    hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
+    hook.emit(HOOK_SETUP$1, pluginDescriptor, setupFn);
   } else {
-    const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
+    const proxy = enableProxy ? new ApiProxy$1(descriptor, hook) : null;
     const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
     list.push({
       pluginDescriptor: descriptor,
@@ -10373,7 +10394,7 @@ function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
   }
 }
 /*!
-  * vue-router v4.3.2
+  * vue-router v4.4.0
   * (c) 2024 Eduardo San Martin Morote
   * @license MIT
   */
@@ -10525,6 +10546,18 @@ function resolveRelativePath(to2, from2) {
   }
   return fromSegments.slice(0, position).join("/") + "/" + toSegments.slice(toPosition).join("/");
 }
+const START_LOCATION_NORMALIZED = {
+  path: "/",
+  // TODO: could we use a symbol in the future?
+  name: void 0,
+  params: {},
+  query: {},
+  hash: "",
+  fullPath: "/",
+  matched: [],
+  meta: {},
+  redirectedFrom: void 0
+};
 var NavigationType;
 (function(NavigationType2) {
   NavigationType2["pop"] = "pop";
@@ -10781,7 +10814,7 @@ function createWebHistory(base) {
   base = normalizeBase(base);
   const historyNavigation = useHistoryStateNavigation(base);
   const historyListeners = useHistoryListeners(base, historyNavigation.state, historyNavigation.location, historyNavigation.replace);
-  function go2(delta, triggerListeners = true) {
+  function go(delta, triggerListeners = true) {
     if (!triggerListeners)
       historyListeners.pauseListeners();
     history.go(delta);
@@ -10790,7 +10823,7 @@ function createWebHistory(base) {
     // it's overridden right after
     location: "",
     base,
-    go: go2,
+    go,
     createHref: createHref.bind(null, base)
   }, historyNavigation, historyListeners);
   Object.defineProperty(routerHistory, "location", {
@@ -10809,17 +10842,6 @@ function isRouteLocation(route) {
 function isRouteName(name) {
   return typeof name === "string" || typeof name === "symbol";
 }
-const START_LOCATION_NORMALIZED = {
-  path: "/",
-  name: void 0,
-  params: {},
-  query: {},
-  hash: "",
-  fullPath: "/",
-  matched: [],
-  meta: {},
-  redirectedFrom: void 0
-};
 const NavigationFailureSymbol = Symbol("navigation failure");
 var NavigationFailureType;
 (function(NavigationFailureType2) {
@@ -11253,6 +11275,9 @@ function createRouterMatcher(routes2, globalOptions) {
         if (isRootAdd && record.name && !isAliasRecord(matcher))
           removeRoute(record.name);
       }
+      if (isMatchable(matcher)) {
+        insertMatcher(matcher);
+      }
       if (mainNormalizedRecord.children) {
         const children = mainNormalizedRecord.children;
         for (let i2 = 0; i2 < children.length; i2++) {
@@ -11260,9 +11285,6 @@ function createRouterMatcher(routes2, globalOptions) {
         }
       }
       originalRecord = originalRecord || matcher;
-      if (matcher.record.components && Object.keys(matcher.record.components).length || matcher.record.name || matcher.record.redirect) {
-        insertMatcher(matcher);
-      }
     }
     return originalMatcher ? () => {
       removeRoute(originalMatcher);
@@ -11292,12 +11314,8 @@ function createRouterMatcher(routes2, globalOptions) {
     return matchers;
   }
   function insertMatcher(matcher) {
-    let i2 = 0;
-    while (i2 < matchers.length && comparePathParserScore(matcher, matchers[i2]) >= 0 && // Adding children with empty path should still appear before the parent
-    // https://github.com/vuejs/router/issues/1124
-    (matcher.record.path !== matchers[i2].record.path || !isRecordChildOf(matcher, matchers[i2])))
-      i2++;
-    matchers.splice(i2, 0, matcher);
+    const index2 = findInsertionIndex(matcher, matchers);
+    matchers.splice(index2, 0, matcher);
     if (matcher.record.name && !isAliasRecord(matcher))
       matcherMap.set(matcher.record.name, matcher);
   }
@@ -11368,7 +11386,18 @@ function createRouterMatcher(routes2, globalOptions) {
     };
   }
   routes2.forEach((route) => addRoute(route));
-  return { addRoute, resolve: resolve2, removeRoute, getRoutes, getRecordMatcher };
+  function clearRoutes() {
+    matchers.length = 0;
+    matcherMap.clear();
+  }
+  return {
+    addRoute,
+    resolve: resolve2,
+    removeRoute,
+    clearRoutes,
+    getRoutes,
+    getRecordMatcher
+  };
 }
 function paramsFromLocation(params, keys2) {
   const newParams = {};
@@ -11448,8 +11477,38 @@ function checkMissingParamsInAbsolutePath(record, parent) {
       return warn(`Absolute path "${record.record.path}" must have the exact same param named "${key.name}" as its parent "${parent.record.path}".`);
   }
 }
-function isRecordChildOf(record, parent) {
-  return parent.children.some((child) => child === record || isRecordChildOf(record, child));
+function findInsertionIndex(matcher, matchers) {
+  let lower = 0;
+  let upper = matchers.length;
+  while (lower !== upper) {
+    const mid = lower + upper >> 1;
+    const sortOrder = comparePathParserScore(matcher, matchers[mid]);
+    if (sortOrder < 0) {
+      upper = mid;
+    } else {
+      lower = mid + 1;
+    }
+  }
+  const insertionAncestor = getInsertionAncestor(matcher);
+  if (insertionAncestor) {
+    upper = matchers.lastIndexOf(insertionAncestor, upper - 1);
+    if (upper < 0) {
+      warn(`Finding ancestor route "${insertionAncestor.record.path}" failed for "${matcher.record.path}"`);
+    }
+  }
+  return upper;
+}
+function getInsertionAncestor(matcher) {
+  let ancestor = matcher;
+  while (ancestor = ancestor.parent) {
+    if (isMatchable(ancestor) && comparePathParserScore(matcher, ancestor) === 0) {
+      return ancestor;
+    }
+  }
+  return;
+}
+function isMatchable({ record }) {
+  return !!(record.name || record.components && Object.keys(record.components).length || record.redirect);
 }
 function parseQuery(search) {
   const query = {};
@@ -11946,7 +12005,7 @@ function addDevtools(app, router, matcher) {
     return;
   router.__hasDevtools = true;
   const id = routerId++;
-  setupDevtoolsPlugin({
+  setupDevtoolsPlugin$1({
     id: "org.vuejs.router" + (id ? "." + id : ""),
     label: "Vue Router",
     packageName: "vue-router",
@@ -12385,7 +12444,7 @@ function createRouter(options) {
     if (!isRouteLocation(rawLocation)) {
       warn(`router.resolve() was passed an invalid location. This will fail in production.
 - Location:`, rawLocation);
-      rawLocation = {};
+      return resolve2({});
     }
     let matcherLocation;
     if (rawLocation.path != null) {
@@ -12775,7 +12834,7 @@ ${JSON.stringify(newTargetLocation, null, 2)}
     const scrollPosition = !isPush && getSavedScrollPosition(getScrollKey(to2.fullPath, 0)) || (isFirstNavigation || !isPush) && history.state && history.state.scroll || null;
     return nextTick().then(() => scrollBehavior(to2, from2, scrollPosition)).then((position) => position && scrollToPosition(position)).catch((err) => triggerError(err, to2, from2));
   }
-  const go2 = (delta) => routerHistory.go(delta);
+  const go = (delta) => routerHistory.go(delta);
   let started;
   const installedApps = /* @__PURE__ */ new Set();
   const router = {
@@ -12783,15 +12842,16 @@ ${JSON.stringify(newTargetLocation, null, 2)}
     listening: true,
     addRoute,
     removeRoute,
+    clearRoutes: matcher.clearRoutes,
     hasRoute,
     getRoutes,
     resolve: resolve2,
     options,
     push,
     replace,
-    go: go2,
-    back: () => go2(-1),
-    forward: () => go2(1),
+    go,
+    back: () => go(-1),
+    forward: () => go(1),
     beforeEach: beforeGuards.add,
     beforeResolve: beforeResolveGuards.add,
     afterEach: afterGuards.add,
@@ -12873,7 +12933,7 @@ function extractChangingRecords(to2, from2) {
 function useRouter() {
   return inject(routerKey);
 }
-function useRoute() {
+function useRoute(_name) {
   return inject(routeLocationKey);
 }
 var clientDataSymbol = Symbol(
@@ -12900,8 +12960,7 @@ var redirects = shallowRef(redirects$1);
 var routes = shallowRef(routes$1);
 var resolveRoutePath = (pathname, currentPath) => {
   const normalizedRoutePath = normalizeRoutePath(pathname, currentPath);
-  if (routes.value[normalizedRoutePath])
-    return normalizedRoutePath;
+  if (routes.value[normalizedRoutePath]) return normalizedRoutePath;
   const encodedRoutePath = encodeURI(normalizedRoutePath);
   if (routes.value[encodedRoutePath]) {
     return encodedRoutePath;
@@ -12934,16 +12993,12 @@ var resolveRouteFullPath = (path, currentPath) => {
   return resolveRoutePath(pathname, currentPath) + hashAndQueries;
 };
 var guardEvent = (event) => {
-  if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
-    return;
-  if (event.defaultPrevented)
-    return;
-  if (event.button !== void 0 && event.button !== 0)
-    return;
+  if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return;
+  if (event.defaultPrevented) return;
+  if (event.button !== void 0 && event.button !== 0) return;
   if (event.currentTarget) {
     const target = event.currentTarget.getAttribute("target");
-    if (target == null ? void 0 : target.match(/\b_blank\b/i))
-      return;
+    if (target == null ? void 0 : target.match(/\b_blank\b/i)) return;
   }
   event.preventDefault();
   return true;
@@ -13023,8 +13078,7 @@ var Content = /* @__PURE__ */ defineComponent({
   setup(props) {
     const pageComponent = usePageComponent();
     const ContentComponent = computed(() => {
-      if (!props.path)
-        return pageComponent.value;
+      if (!props.path) return pageComponent.value;
       const route = resolveRoute(props.path);
       return /* @__PURE__ */ defineAsyncComponent(() => route.loader().then(({ comp }) => comp));
     });
@@ -13106,10 +13160,157 @@ var resolvers = reactive({
 });
 var defineClientConfig = (clientConfig = {}) => clientConfig;
 var withBase = (url) => {
-  if (isLinkHttp(url))
-    return url;
+  if (isLinkHttp(url)) return url;
   return `${"/vue/docs/"}${removeLeadingSlash(url)}`;
 };
+function getDevtoolsGlobalHook() {
+  return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
+}
+function getTarget() {
+  return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : {};
+}
+const isProxyAvailable = typeof Proxy === "function";
+const HOOK_SETUP = "devtools-plugin:setup";
+const HOOK_PLUGIN_SETTINGS_SET = "plugin:settings:set";
+let supported;
+let perf;
+function isPerformanceSupported() {
+  var _a2;
+  if (supported !== void 0) {
+    return supported;
+  }
+  if (typeof window !== "undefined" && window.performance) {
+    supported = true;
+    perf = window.performance;
+  } else if (typeof globalThis !== "undefined" && ((_a2 = globalThis.perf_hooks) === null || _a2 === void 0 ? void 0 : _a2.performance)) {
+    supported = true;
+    perf = globalThis.perf_hooks.performance;
+  } else {
+    supported = false;
+  }
+  return supported;
+}
+function now() {
+  return isPerformanceSupported() ? perf.now() : Date.now();
+}
+class ApiProxy2 {
+  constructor(plugin, hook) {
+    this.target = null;
+    this.targetQueue = [];
+    this.onQueue = [];
+    this.plugin = plugin;
+    this.hook = hook;
+    const defaultSettings = {};
+    if (plugin.settings) {
+      for (const id in plugin.settings) {
+        const item = plugin.settings[id];
+        defaultSettings[id] = item.defaultValue;
+      }
+    }
+    const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
+    let currentSettings = Object.assign({}, defaultSettings);
+    try {
+      const raw = localStorage.getItem(localSettingsSaveId);
+      const data = JSON.parse(raw);
+      Object.assign(currentSettings, data);
+    } catch (e2) {
+    }
+    this.fallbacks = {
+      getSettings() {
+        return currentSettings;
+      },
+      setSettings(value) {
+        try {
+          localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
+        } catch (e2) {
+        }
+        currentSettings = value;
+      },
+      now() {
+        return now();
+      }
+    };
+    if (hook) {
+      hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
+        if (pluginId === this.plugin.id) {
+          this.fallbacks.setSettings(value);
+        }
+      });
+    }
+    this.proxiedOn = new Proxy({}, {
+      get: (_target, prop) => {
+        if (this.target) {
+          return this.target.on[prop];
+        } else {
+          return (...args) => {
+            this.onQueue.push({
+              method: prop,
+              args
+            });
+          };
+        }
+      }
+    });
+    this.proxiedTarget = new Proxy({}, {
+      get: (_target, prop) => {
+        if (this.target) {
+          return this.target[prop];
+        } else if (prop === "on") {
+          return this.proxiedOn;
+        } else if (Object.keys(this.fallbacks).includes(prop)) {
+          return (...args) => {
+            this.targetQueue.push({
+              method: prop,
+              args,
+              resolve: () => {
+              }
+            });
+            return this.fallbacks[prop](...args);
+          };
+        } else {
+          return (...args) => {
+            return new Promise((resolve2) => {
+              this.targetQueue.push({
+                method: prop,
+                args,
+                resolve: resolve2
+              });
+            });
+          };
+        }
+      }
+    });
+  }
+  async setRealTarget(target) {
+    this.target = target;
+    for (const item of this.onQueue) {
+      this.target.on[item.method](...item.args);
+    }
+    for (const item of this.targetQueue) {
+      item.resolve(await this.target[item.method](...item.args));
+    }
+  }
+}
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+  const descriptor = pluginDescriptor;
+  const target = getTarget();
+  const hook = getDevtoolsGlobalHook();
+  const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
+  if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
+    hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
+  } else {
+    const proxy = enableProxy ? new ApiProxy2(descriptor, hook) : null;
+    const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
+    list.push({
+      pluginDescriptor: descriptor,
+      setupFn,
+      proxy
+    });
+    if (proxy) {
+      setupFn(proxy.proxiedTarget);
+    }
+  }
+}
 const themeData$1 = JSON.parse(`{"sidebar":[{"text":"Getting started","icon":"<rect width=\\"32\\" height=\\"32\\" x=\\"144\\" y=\\"464\\" fill=\\"var(--ci-primary-color, currentColor)\\" class=\\"ci-primary\\"></rect><rect width=\\"32\\" height=\\"32\\" x=\\"240\\" y=\\"464\\" fill=\\"var(--ci-primary-color, currentColor)\\" class=\\"ci-primary\\"></rect><rect width=\\"32\\" height=\\"32\\" x=\\"336\\" y=\\"464\\" fill=\\"var(--ci-primary-color, currentColor)\\" class=\\"ci-primary\\"></rect><path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M312,76.82v34.265a142.419,142.419,0,0,1,86.207,130.708C398.207,320.206,334.413,384,256,384S113.793,320.206,113.793,241.793A142.419,142.419,0,0,1,200,111.085V76.82c-68.671,23.373-118.207,88.5-118.207,165.073C81.793,337.851,159.942,416,256,416s174.207-78.149,174.207-174.207C430.207,165.316,380.671,100.193,312,76.82Z\\" class=\\"ci-primary\\"></path><rect width=\\"32\\" height=\\"229.793\\" x=\\"240\\" y=\\"16\\" fill=\\"var(--ci-primary-color, currentColor)\\" class=\\"ci-primary\\"></rect>","link":"/getting-started/","children":[{"text":"Introduction","link":"/getting-started/introduction.html"},{"text":"Accessibility","link":"/getting-started/accessibility.html"}]},{"text":"Customize","icon":"<path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M425.514,82.055C380.778,39.458,320.673,16,256.271,16,196.248,16,136.415,36.073,92.115,71.071,43.032,109.85,16,164.161,16,224c0,60.1,15.531,98.87,48.876,122.019,28,19.438,68.412,27.731,135.124,27.731h29.75A26.28,26.28,0,0,1,256,400v47.984a32,32,0,0,0,32,32h.032l90.755-.088a32.094,32.094,0,0,0,19.686-6.8c9.725-7.622,34.727-29.4,56.8-66.9C482.3,360.262,496,307.037,496,248,496,184.268,470.968,125.334,425.514,82.055Zm2.173,307.915c-19.3,32.792-40.663,51.447-48.932,57.926L288,447.984V400a58.316,58.316,0,0,0-58.25-58.25H200c-59.69,0-94.644-6.585-116.876-22.019C58.833,302.869,48,273.344,48,224,48,113.833,153.9,48,256.271,48,372.755,48,464,135.851,464,248,464,301.253,451.782,349.019,427.687,389.97Z\\" class=\\"ci-primary\\"/><path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M128,144a56,56,0,1,0,56,56A56.064,56.064,0,0,0,128,144Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,128,224Z\\" class=\\"ci-primary\\"/><path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M240,72a56,56,0,1,0,56,56A56.064,56.064,0,0,0,240,72Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,240,152Z\\" class=\\"ci-primary\\"/><path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M360,128a56,56,0,1,0,56,56A56.064,56.064,0,0,0,360,128Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,360,208Z\\" class=\\"ci-primary\\"/><path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M376,264a56,56,0,1,0,56,56A56.064,56.064,0,0,0,376,264Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,376,344Z\\" class=\\"ci-primary\\"/>","link":"/customize/","children":[{"text":"Sass","link":"/customize/sass.html"},{"text":"Options","link":"/customize/options.html"},{"text":"CSS Variables","link":"/customize/css-variables.html"}]},{"text":"Layout","icon":"<path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M16,64V448H496V64ZM464,240H192V96H464ZM192,272H312V416H192ZM48,96H160V416H48ZM344,416V272H464V416Z\\"></path>","link":"/layout/","children":[{"text":"Breakpoints","link":"/layout/breakpoints.html"},{"text":"Columns","link":"/layout/columns.html"},{"text":"Containers","link":"/layout/containers.html"},{"text":"Grid","link":"/layout/grid.html"},{"text":"Gutters","link":"/layout/gutters.html"}]},{"text":"Forms","icon":"<rect width=\\"288\\" height=\\"32\\" x=\\"112\\" y=\\"152\\" fill=\\"var(--ci-primary-color, currentColor)\\" class=\\"ci-primary\\"></rect><rect width=\\"288\\" height=\\"32\\" x=\\"112\\" y=\\"240\\" fill=\\"var(--ci-primary-color, currentColor)\\" class=\\"ci-primary\\"></rect><rect width=\\"152\\" height=\\"32\\" x=\\"112\\" y=\\"328\\" fill=\\"var(--ci-primary-color, currentColor)\\" class=\\"ci-primary\\"></rect><path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M480,48H32V464H480ZM448,432H64V80H448Z\\" class=\\"ci-primary\\"></path>","link":"/forms/","children":[{"text":"Checkbox","link":"/forms/checkbox.html"},{"text":"Date Picker","link":"/forms/date-picker.html","badge":{"color":"danger","text":"PRO"}},{"text":"Date Range Picker","link":"/forms/date-range-picker.html","badge":{"color":"danger","text":"PRO"}},{"text":"Floating labels","link":"/forms/floating-labels.html"},{"text":"Input","link":"/forms/input.html"},{"text":"Input group","link":"/forms/input-group.html"},{"text":"Multi Select","link":"/forms/multi-select.html","badge":{"color":"danger","text":"PRO"}},{"text":"Radio","link":"/forms/radio.html"},{"text":"Range","link":"/forms/range.html"},{"text":"Rating","link":"/forms/rating.html","badge":[{"color":"success","text":"NEW"},{"color":"danger","text":"PRO","className":"ms-1"}]},{"text":"Select","link":"/forms/select.html"},{"text":"Switch","link":"/forms/switch.html"},{"text":"Textarea","link":"/forms/textarea.html"},{"text":"Time Picker","link":"/forms/time-picker.html","badge":{"color":"danger","text":"PRO"}},{"text":"Layout","link":"/forms/layout.html"},{"text":"Validation","link":"/forms/validation.html"}]},{"text":"Components","icon":"<path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M410.989,16H101.011L16,237.029V496H496V237.029Zm-288,32H240V240H49.143ZM184,272H328v40H184ZM464,464H48V272H152v72H360V272H464ZM272,240V48H389.012l73.845,192Z\\" class=\\"ci-primary\\"></path>","link":"/components/","children":[{"text":"Accordion","link":"/components/accordion.html"},{"text":"Alert","link":"/components/alert.html"},{"text":"Avatar","link":"/components/avatar.html"},{"text":"Badge","link":"/components/badge.html"},{"text":"Breadcrumb","link":"/components/breadcrumb.html"},{"text":"Buttons","link":"/components/button.html"},{"text":"Button Group","link":"/components/button-group.html"},{"text":"Callout","link":"/components/callout.html"},{"text":"Card","link":"/components/card.html"},{"text":"Carousel","link":"/components/carousel.html"},{"text":"Chart","link":"/components/chart.html"},{"text":"Close Button","link":"/components/close-button.html"},{"text":"Collapse","link":"/components/collapse.html"},{"text":"Dropdown","link":"/components/dropdown.html"},{"text":"Footer","link":"/components/footer.html"},{"text":"Header","link":"/components/header.html"},{"text":"Icon","link":"/components/icon.html"},{"text":"Image","link":"/components/image.html"},{"text":"List Group","link":"/components/list-group.html"},{"text":"Loading Button","link":"/components/loading-button.html","badge":{"color":"danger","text":"PRO"}},{"text":"Modal","link":"/components/modal.html"},{"text":"Navs & Tabs","link":"/components/navs-tabs.html"},{"text":"Navbar","link":"/components/navbar.html"},{"text":"Offcanvas","link":"/components/offcanvas.html"},{"text":"Pagination","link":"/components/pagination.html"},{"text":"Placeholder","link":"/components/placeholder.html"},{"text":"Popover","link":"/components/popover.html"},{"text":"Progress","link":"/components/progress.html"},{"text":"Sidebar","link":"/components/sidebar.html"},{"text":"Sidebar","link":"/components/sidebar.html"},{"text":"Smart Pagination","link":"/components/smart-pagination.html","badge":{"color":"danger","text":"PRO"}},{"text":"Smart Table","link":"/components/smart-table.html","badge":{"color":"danger","text":"PRO"}},{"text":"Spinner","link":"/components/spinner.html"},{"text":"Table","link":"/components/table.html"},{"text":"Tabs","link":"/components/tabs.html","badge":{"color":"success","text":"New"}},{"text":"Toast","link":"/components/toast.html"},{"text":"Tooltip","link":"/components/tooltip.html"},{"text":"Virtual Scroller","link":"/components/virtual-scroller.html"},{"text":"Widgets","link":"/components/widgets.html"}]},{"text":"Templates","link":"/templates/","icon":"<path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M472,232H424V120a24.028,24.028,0,0,0-24-24H40a24.028,24.028,0,0,0-24,24V366a24.028,24.028,0,0,0,24,24H212v50H152v32H304V440H244V390h92v58a24.027,24.027,0,0,0,24,24H472a24.027,24.027,0,0,0,24-24V256A24.027,24.027,0,0,0,472,232ZM336,256V358H48V128H392V232H360A24.027,24.027,0,0,0,336,256ZM464,440H368V264h96Z\\" class=\\"ci-primary\\"/>","children":[{"text":"Admin & Dashboard","link":"/templates/admin-dashboard.html","badge":{"color":"success","text":"New"}},{"text":"Download","link":"/templates/download.html"},{"text":"Installation","link":"/templates/installation.html"},{"text":"Customize","link":"/templates/customize.html"},{"text":"Contents","link":"/templates/contents.html"}]},{"text":"Migration","link":"/migration/","icon":"<path fill=\\"var(--ci-primary-color, currentColor)\\" d=\\"M464,256.25C464,370.8,370.8,464,256.25,464S48.5,370.8,48.5,256.25,141.7,48.5,256.25,48.5a208,208,0,0,1,149.963,64H328.5v32h128V16.5h-32V85.478A239.717,239.717,0,1,0,496,256.25Z\\" class=\\"ci-primary\\"></path><polygon fill=\\"var(--ci-primary-color, currentColor)\\" points=\\"272.5 112.451 240.5 112.549 241.017 282.756 353.301 334.53 366.699 305.47 272.954 262.244 272.5 112.451\\" class=\\"ci-primary\\"></polygon>","children":[{"text":"v4","link":"/migration/v4.html"},{"text":"v5","link":"/migration/v5.html"}]}],"locales":{"/":{"selectLanguageName":"English"}},"navbar":[],"logo":null,"darkMode":true,"repo":null,"selectLanguageText":"Languages","selectLanguageAriaLabel":"Select language","sidebarDepth":2,"editLink":true,"editLinkText":"Edit this page","lastUpdated":true,"lastUpdatedText":"Last Updated","contributors":true,"contributorsText":"Contributors","notFound":["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],"backToHome":"Take me home","openInNewWindow":"open in new window","toggleDarkMode":"toggle dark mode"}`);
 const themeData = ref(themeData$1);
 const useThemeData = () => themeData;
@@ -13299,7 +13500,7 @@ const resolveMultiSidebarItems = (sidebarConfig, sidebarDepth) => {
   const matchedSidebarConfig = sidebarConfig[sidebarPath] ?? [];
   return resolveArraySidebarItems(matchedSidebarConfig, sidebarDepth);
 };
-/*! @docsearch/js 3.6.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
+/*! @docsearch/js 3.6.1 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
 function e(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
@@ -13335,510 +13536,416 @@ function o$1() {
   return o$1 = Object.assign || function(e2) {
     for (var t2 = 1; t2 < arguments.length; t2++) {
       var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
+      for (var r2 in n2) Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
     }
     return e2;
   }, o$1.apply(this, arguments);
 }
 function i$1(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-function c$1(e2, t2) {
   return function(e3) {
-    if (Array.isArray(e3))
-      return e3;
+    if (Array.isArray(e3)) return e3;
   }(e2) || function(e3, t3) {
     var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
-    if (null == n2)
-      return;
-    var r2, o2, i2 = [], c2 = true, a2 = false;
-    try {
-      for (n2 = n2.call(e3); !(c2 = (r2 = n2.next()).done) && (i2.push(r2.value), !t3 || i2.length !== t3); c2 = true)
-        ;
-    } catch (e4) {
-      a2 = true, o2 = e4;
-    } finally {
+    if (null != n2) {
+      var r2, o2, i2 = [], c2 = true, a2 = false;
       try {
-        c2 || null == n2.return || n2.return();
+        for (n2 = n2.call(e3); !(c2 = (r2 = n2.next()).done) && (i2.push(r2.value), !t3 || i2.length !== t3); c2 = true) ;
+      } catch (e4) {
+        a2 = true, o2 = e4;
       } finally {
-        if (a2)
-          throw o2;
+        try {
+          c2 || null == n2.return || n2.return();
+        } finally {
+          if (a2) throw o2;
+        }
       }
+      return i2;
     }
-    return i2;
-  }(e2, t2) || u$1(e2, t2) || function() {
+  }(e2, t2) || a$1(e2, t2) || function() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }();
 }
-function a$1(e2) {
+function c$1(e2) {
   return function(e3) {
-    if (Array.isArray(e3))
-      return l$1(e3);
+    if (Array.isArray(e3)) return u$1(e3);
   }(e2) || function(e3) {
-    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"])
-      return Array.from(e3);
-  }(e2) || u$1(e2) || function() {
+    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"]) return Array.from(e3);
+  }(e2) || a$1(e2) || function() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }();
 }
-function u$1(e2, t2) {
+function a$1(e2, t2) {
   if (e2) {
-    if ("string" == typeof e2)
-      return l$1(e2, t2);
+    if ("string" == typeof e2) return u$1(e2, t2);
     var n2 = Object.prototype.toString.call(e2).slice(8, -1);
-    return "Object" === n2 && e2.constructor && (n2 = e2.constructor.name), "Map" === n2 || "Set" === n2 ? Array.from(e2) : "Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2) ? l$1(e2, t2) : void 0;
+    return "Object" === n2 && e2.constructor && (n2 = e2.constructor.name), "Map" === n2 || "Set" === n2 ? Array.from(e2) : "Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2) ? u$1(e2, t2) : void 0;
   }
 }
-function l$1(e2, t2) {
+function u$1(e2, t2) {
   (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) r2[n2] = e2[n2];
   return r2;
 }
-var s$1, f$1, p$1, m$1, v$1, d$1 = {}, y$1 = [], h$1 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
-function b$1(e2, t2) {
-  for (var n2 in t2)
-    e2[n2] = t2[n2];
+var l$1, s$1, f$1, p$1, m$1, v$1 = {}, d$1 = [], h$1 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+function y$1(e2, t2) {
+  for (var n2 in t2) e2[n2] = t2[n2];
   return e2;
 }
-function g$1(e2) {
+function _$1(e2) {
   var t2 = e2.parentNode;
   t2 && t2.removeChild(e2);
 }
-function _$1(e2, t2, n2) {
+function b$1(e2, t2, n2) {
   var r2, o2, i2, c2 = arguments, a2 = {};
-  for (i2 in t2)
-    "key" == i2 ? r2 = t2[i2] : "ref" == i2 ? o2 = t2[i2] : a2[i2] = t2[i2];
-  if (arguments.length > 3)
-    for (n2 = [n2], i2 = 3; i2 < arguments.length; i2++)
-      n2.push(c2[i2]);
-  if (null != n2 && (a2.children = n2), "function" == typeof e2 && null != e2.defaultProps)
-    for (i2 in e2.defaultProps)
-      void 0 === a2[i2] && (a2[i2] = e2.defaultProps[i2]);
-  return O$1(e2, a2, r2, o2, null);
-}
-function O$1(e2, t2, n2, r2, o2) {
-  var i2 = { type: e2, props: t2, key: n2, ref: r2, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: null == o2 ? ++s$1.__v : o2 };
-  return null != s$1.vnode && s$1.vnode(i2), i2;
+  for (i2 in t2) "key" == i2 ? r2 = t2[i2] : "ref" == i2 ? o2 = t2[i2] : a2[i2] = t2[i2];
+  if (arguments.length > 3) for (n2 = [n2], i2 = 3; i2 < arguments.length; i2++) n2.push(c2[i2]);
+  if (null != n2 && (a2.children = n2), "function" == typeof e2 && null != e2.defaultProps) for (i2 in e2.defaultProps) void 0 === a2[i2] && (a2[i2] = e2.defaultProps[i2]);
+  return g$1(e2, a2, r2, o2, null);
+}
+function g$1(e2, t2, n2, r2, o2) {
+  var i2 = { type: e2, props: t2, key: n2, ref: r2, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: null == o2 ? ++l$1.__v : o2 };
+  return null != l$1.vnode && l$1.vnode(i2), i2;
 }
 function S$1(e2) {
   return e2.children;
 }
-function w$1(e2, t2) {
+function O$1(e2, t2) {
   this.props = e2, this.context = t2;
 }
-function j$1(e2, t2) {
-  if (null == t2)
-    return e2.__ ? j$1(e2.__, e2.__.__k.indexOf(e2) + 1) : null;
-  for (var n2; t2 < e2.__k.length; t2++)
-    if (null != (n2 = e2.__k[t2]) && null != n2.__e)
-      return n2.__e;
-  return "function" == typeof e2.type ? j$1(e2) : null;
+function w$1(e2, t2) {
+  if (null == t2) return e2.__ ? w$1(e2.__, e2.__.__k.indexOf(e2) + 1) : null;
+  for (var n2; t2 < e2.__k.length; t2++) if (null != (n2 = e2.__k[t2]) && null != n2.__e) return n2.__e;
+  return "function" == typeof e2.type ? w$1(e2) : null;
 }
 function E$1(e2) {
   var t2, n2;
   if (null != (e2 = e2.__) && null != e2.__c) {
-    for (e2.__e = e2.__c.base = null, t2 = 0; t2 < e2.__k.length; t2++)
-      if (null != (n2 = e2.__k[t2]) && null != n2.__e) {
-        e2.__e = e2.__c.base = n2.__e;
-        break;
-      }
+    for (e2.__e = e2.__c.base = null, t2 = 0; t2 < e2.__k.length; t2++) if (null != (n2 = e2.__k[t2]) && null != n2.__e) {
+      e2.__e = e2.__c.base = n2.__e;
+      break;
+    }
     return E$1(e2);
   }
 }
-function P$1(e2) {
-  (!e2.__d && (e2.__d = true) && f$1.push(e2) && !I$1.__r++ || m$1 !== s$1.debounceRendering) && ((m$1 = s$1.debounceRendering) || p$1)(I$1);
+function j$1(e2) {
+  (!e2.__d && (e2.__d = true) && s$1.push(e2) && !P$1.__r++ || p$1 !== l$1.debounceRendering) && ((p$1 = l$1.debounceRendering) || f$1)(P$1);
 }
-function I$1() {
-  for (var e2; I$1.__r = f$1.length; )
-    e2 = f$1.sort(function(e3, t2) {
-      return e3.__v.__b - t2.__v.__b;
-    }), f$1 = [], e2.some(function(e3) {
-      var t2, n2, r2, o2, i2, c2;
-      e3.__d && (i2 = (o2 = (t2 = e3).__v).__e, (c2 = t2.__P) && (n2 = [], (r2 = b$1({}, o2)).__v = o2.__v + 1, q$1(c2, o2, r2, t2.__n, void 0 !== c2.ownerSVGElement, null != o2.__h ? [i2] : null, n2, null == i2 ? j$1(o2) : i2, o2.__h), L$1(n2, o2), o2.__e != i2 && E$1(o2)));
-    });
+function P$1() {
+  for (var e2; P$1.__r = s$1.length; ) e2 = s$1.sort(function(e3, t2) {
+    return e3.__v.__b - t2.__v.__b;
+  }), s$1 = [], e2.some(function(e3) {
+    var t2, n2, r2, o2, i2, c2;
+    e3.__d && (i2 = (o2 = (t2 = e3).__v).__e, (c2 = t2.__P) && (n2 = [], (r2 = y$1({}, o2)).__v = o2.__v + 1, R$1(c2, o2, r2, t2.__n, void 0 !== c2.ownerSVGElement, null != o2.__h ? [i2] : null, n2, null == i2 ? w$1(o2) : i2, o2.__h), q$1(n2, o2), o2.__e != i2 && E$1(o2)));
+  });
 }
-function D$1(e2, t2, n2, r2, o2, i2, c2, a2, u2, l2) {
-  var s2, f2, p2, m2, v2, h22, b2, g2 = r2 && r2.__k || y$1, _2 = g2.length;
-  for (n2.__k = [], s2 = 0; s2 < t2.length; s2++)
-    if (null != (m2 = n2.__k[s2] = null == (m2 = t2[s2]) || "boolean" == typeof m2 ? null : "string" == typeof m2 || "number" == typeof m2 ? O$1(null, m2, null, null, m2) : Array.isArray(m2) ? O$1(S$1, { children: m2 }, null, null, null) : m2.__b > 0 ? O$1(m2.type, m2.props, m2.key, null, m2.__v) : m2)) {
-      if (m2.__ = n2, m2.__b = n2.__b + 1, null === (p2 = g2[s2]) || p2 && m2.key == p2.key && m2.type === p2.type)
-        g2[s2] = void 0;
-      else
-        for (f2 = 0; f2 < _2; f2++) {
-          if ((p2 = g2[f2]) && m2.key == p2.key && m2.type === p2.type) {
-            g2[f2] = void 0;
-            break;
-          }
-          p2 = null;
-        }
-      q$1(e2, m2, p2 = p2 || d$1, o2, i2, c2, a2, u2, l2), v2 = m2.__e, (f2 = m2.ref) && p2.ref != f2 && (b2 || (b2 = []), p2.ref && b2.push(p2.ref, null, m2), b2.push(f2, m2.__c || v2, m2)), null != v2 ? (null == h22 && (h22 = v2), "function" == typeof m2.type && null != m2.__k && m2.__k === p2.__k ? m2.__d = u2 = k$1(m2, u2, e2) : u2 = C(e2, m2, p2, g2, v2, u2), l2 || "option" !== n2.type ? "function" == typeof n2.type && (n2.__d = u2) : e2.value = "") : u2 && p2.__e == u2 && u2.parentNode != e2 && (u2 = j$1(p2));
+function I$1(e2, t2, n2, r2, o2, i2, c2, a2, u2, l2) {
+  var s2, f2, p2, m2, h3, y2, _2, b2 = r2 && r2.__k || d$1, O2 = b2.length;
+  for (n2.__k = [], s2 = 0; s2 < t2.length; s2++) if (null != (m2 = n2.__k[s2] = null == (m2 = t2[s2]) || "boolean" == typeof m2 ? null : "string" == typeof m2 || "number" == typeof m2 ? g$1(null, m2, null, null, m2) : Array.isArray(m2) ? g$1(S$1, { children: m2 }, null, null, null) : m2.__b > 0 ? g$1(m2.type, m2.props, m2.key, null, m2.__v) : m2)) {
+    if (m2.__ = n2, m2.__b = n2.__b + 1, null === (p2 = b2[s2]) || p2 && m2.key == p2.key && m2.type === p2.type) b2[s2] = void 0;
+    else for (f2 = 0; f2 < O2; f2++) {
+      if ((p2 = b2[f2]) && m2.key == p2.key && m2.type === p2.type) {
+        b2[f2] = void 0;
+        break;
+      }
+      p2 = null;
     }
-  for (n2.__e = h22, s2 = _2; s2--; )
-    null != g2[s2] && ("function" == typeof n2.type && null != g2[s2].__e && g2[s2].__e == n2.__d && (n2.__d = j$1(r2, s2 + 1)), U$1(g2[s2], g2[s2]));
-  if (b2)
-    for (s2 = 0; s2 < b2.length; s2++)
-      H(b2[s2], b2[++s2], b2[++s2]);
+    R$1(e2, m2, p2 = p2 || v$1, o2, i2, c2, a2, u2, l2), h3 = m2.__e, (f2 = m2.ref) && p2.ref != f2 && (_2 || (_2 = []), p2.ref && _2.push(p2.ref, null, m2), _2.push(f2, m2.__c || h3, m2)), null != h3 ? (null == y2 && (y2 = h3), "function" == typeof m2.type && null != m2.__k && m2.__k === p2.__k ? m2.__d = u2 = D$1(m2, u2, e2) : u2 = C(e2, m2, p2, b2, h3, u2), l2 || "option" !== n2.type ? "function" == typeof n2.type && (n2.__d = u2) : e2.value = "") : u2 && p2.__e == u2 && u2.parentNode != e2 && (u2 = w$1(p2));
+  }
+  for (n2.__e = y2, s2 = O2; s2--; ) null != b2[s2] && ("function" == typeof n2.type && null != b2[s2].__e && b2[s2].__e == n2.__d && (n2.__d = w$1(r2, s2 + 1)), H(b2[s2], b2[s2]));
+  if (_2) for (s2 = 0; s2 < _2.length; s2++) M$1(_2[s2], _2[++s2], _2[++s2]);
 }
-function k$1(e2, t2, n2) {
+function D$1(e2, t2, n2) {
   var r2, o2;
-  for (r2 = 0; r2 < e2.__k.length; r2++)
-    (o2 = e2.__k[r2]) && (o2.__ = e2, t2 = "function" == typeof o2.type ? k$1(o2, t2, n2) : C(n2, o2, o2, e2.__k, o2.__e, t2));
+  for (r2 = 0; r2 < e2.__k.length; r2++) (o2 = e2.__k[r2]) && (o2.__ = e2, t2 = "function" == typeof o2.type ? D$1(o2, t2, n2) : C(n2, o2, o2, e2.__k, o2.__e, t2));
   return t2;
 }
-function A$1(e2, t2) {
+function k$1(e2, t2) {
   return t2 = t2 || [], null == e2 || "boolean" == typeof e2 || (Array.isArray(e2) ? e2.some(function(e3) {
-    A$1(e3, t2);
+    k$1(e3, t2);
   }) : t2.push(e2)), t2;
 }
 function C(e2, t2, n2, r2, o2, i2) {
   var c2, a2, u2;
-  if (void 0 !== t2.__d)
-    c2 = t2.__d, t2.__d = void 0;
-  else if (null == n2 || o2 != i2 || null == o2.parentNode)
-    e:
-      if (null == i2 || i2.parentNode !== e2)
-        e2.appendChild(o2), c2 = null;
-      else {
-        for (a2 = i2, u2 = 0; (a2 = a2.nextSibling) && u2 < r2.length; u2 += 2)
-          if (a2 == o2)
-            break e;
-        e2.insertBefore(o2, i2), c2 = i2;
-      }
+  if (void 0 !== t2.__d) c2 = t2.__d, t2.__d = void 0;
+  else if (null == n2 || o2 != i2 || null == o2.parentNode) e: if (null == i2 || i2.parentNode !== e2) e2.appendChild(o2), c2 = null;
+  else {
+    for (a2 = i2, u2 = 0; (a2 = a2.nextSibling) && u2 < r2.length; u2 += 2) if (a2 == o2) break e;
+    e2.insertBefore(o2, i2), c2 = i2;
+  }
   return void 0 !== c2 ? c2 : o2.nextSibling;
 }
-function N$1(e2, t2, n2) {
+function A$1(e2, t2, n2) {
   "-" === t2[0] ? e2.setProperty(t2, n2) : e2[t2] = null == n2 ? "" : "number" != typeof n2 || h$1.test(t2) ? n2 : n2 + "px";
 }
 function x$1(e2, t2, n2, r2, o2) {
   var i2;
-  e:
-    if ("style" === t2)
-      if ("string" == typeof n2)
-        e2.style.cssText = n2;
-      else {
-        if ("string" == typeof r2 && (e2.style.cssText = r2 = ""), r2)
-          for (t2 in r2)
-            n2 && t2 in n2 || N$1(e2.style, t2, "");
-        if (n2)
-          for (t2 in n2)
-            r2 && n2[t2] === r2[t2] || N$1(e2.style, t2, n2[t2]);
-      }
-    else if ("o" === t2[0] && "n" === t2[1])
-      i2 = t2 !== (t2 = t2.replace(/Capture$/, "")), t2 = t2.toLowerCase() in e2 ? t2.toLowerCase().slice(2) : t2.slice(2), e2.l || (e2.l = {}), e2.l[t2 + i2] = n2, n2 ? r2 || e2.addEventListener(t2, i2 ? R$1 : T$1, i2) : e2.removeEventListener(t2, i2 ? R$1 : T$1, i2);
-    else if ("dangerouslySetInnerHTML" !== t2) {
-      if (o2)
-        t2 = t2.replace(/xlink[H:h]/, "h").replace(/sName$/, "s");
-      else if ("href" !== t2 && "list" !== t2 && "form" !== t2 && "download" !== t2 && t2 in e2)
-        try {
-          e2[t2] = null == n2 ? "" : n2;
-          break e;
-        } catch (e3) {
-        }
-      "function" == typeof n2 || (null != n2 && (false !== n2 || "a" === t2[0] && "r" === t2[1]) ? e2.setAttribute(t2, n2) : e2.removeAttribute(t2));
+  e: if ("style" === t2) if ("string" == typeof n2) e2.style.cssText = n2;
+  else {
+    if ("string" == typeof r2 && (e2.style.cssText = r2 = ""), r2) for (t2 in r2) n2 && t2 in n2 || A$1(e2.style, t2, "");
+    if (n2) for (t2 in n2) r2 && n2[t2] === r2[t2] || A$1(e2.style, t2, n2[t2]);
+  }
+  else if ("o" === t2[0] && "n" === t2[1]) i2 = t2 !== (t2 = t2.replace(/Capture$/, "")), t2 = t2.toLowerCase() in e2 ? t2.toLowerCase().slice(2) : t2.slice(2), e2.l || (e2.l = {}), e2.l[t2 + i2] = n2, n2 ? r2 || e2.addEventListener(t2, i2 ? T$1 : N$1, i2) : e2.removeEventListener(t2, i2 ? T$1 : N$1, i2);
+  else if ("dangerouslySetInnerHTML" !== t2) {
+    if (o2) t2 = t2.replace(/xlink[H:h]/, "h").replace(/sName$/, "s");
+    else if ("href" !== t2 && "list" !== t2 && "form" !== t2 && "download" !== t2 && t2 in e2) try {
+      e2[t2] = null == n2 ? "" : n2;
+      break e;
+    } catch (e3) {
     }
+    "function" == typeof n2 || (null != n2 && (false !== n2 || "a" === t2[0] && "r" === t2[1]) ? e2.setAttribute(t2, n2) : e2.removeAttribute(t2));
+  }
 }
-function T$1(e2) {
-  this.l[e2.type + false](s$1.event ? s$1.event(e2) : e2);
+function N$1(e2) {
+  this.l[e2.type + false](l$1.event ? l$1.event(e2) : e2);
 }
-function R$1(e2) {
-  this.l[e2.type + true](s$1.event ? s$1.event(e2) : e2);
+function T$1(e2) {
+  this.l[e2.type + true](l$1.event ? l$1.event(e2) : e2);
 }
-function q$1(e2, t2, n2, r2, o2, i2, c2, a2, u2) {
-  var l2, f2, p2, m2, v2, d2, y2, h22, g2, _2, O2, j2 = t2.type;
-  if (void 0 !== t2.constructor)
-    return null;
-  null != n2.__h && (u2 = n2.__h, a2 = t2.__e = n2.__e, t2.__h = null, i2 = [a2]), (l2 = s$1.__b) && l2(t2);
+function R$1(e2, t2, n2, r2, o2, i2, c2, a2, u2) {
+  var s2, f2, p2, m2, v2, d2, h3, _2, b2, g2, w2, E2 = t2.type;
+  if (void 0 !== t2.constructor) return null;
+  null != n2.__h && (u2 = n2.__h, a2 = t2.__e = n2.__e, t2.__h = null, i2 = [a2]), (s2 = l$1.__b) && s2(t2);
   try {
-    e:
-      if ("function" == typeof j2) {
-        if (h22 = t2.props, g2 = (l2 = j2.contextType) && r2[l2.__c], _2 = l2 ? g2 ? g2.props.value : l2.__ : r2, n2.__c ? y2 = (f2 = t2.__c = n2.__c).__ = f2.__E : ("prototype" in j2 && j2.prototype.render ? t2.__c = f2 = new j2(h22, _2) : (t2.__c = f2 = new w$1(h22, _2), f2.constructor = j2, f2.render = F$1), g2 && g2.sub(f2), f2.props = h22, f2.state || (f2.state = {}), f2.context = _2, f2.__n = r2, p2 = f2.__d = true, f2.__h = []), null == f2.__s && (f2.__s = f2.state), null != j2.getDerivedStateFromProps && (f2.__s == f2.state && (f2.__s = b$1({}, f2.__s)), b$1(f2.__s, j2.getDerivedStateFromProps(h22, f2.__s))), m2 = f2.props, v2 = f2.state, p2)
-          null == j2.getDerivedStateFromProps && null != f2.componentWillMount && f2.componentWillMount(), null != f2.componentDidMount && f2.__h.push(f2.componentDidMount);
-        else {
-          if (null == j2.getDerivedStateFromProps && h22 !== m2 && null != f2.componentWillReceiveProps && f2.componentWillReceiveProps(h22, _2), !f2.__e && null != f2.shouldComponentUpdate && false === f2.shouldComponentUpdate(h22, f2.__s, _2) || t2.__v === n2.__v) {
-            f2.props = h22, f2.state = f2.__s, t2.__v !== n2.__v && (f2.__d = false), f2.__v = t2, t2.__e = n2.__e, t2.__k = n2.__k, f2.__h.length && c2.push(f2);
-            break e;
-          }
-          null != f2.componentWillUpdate && f2.componentWillUpdate(h22, f2.__s, _2), null != f2.componentDidUpdate && f2.__h.push(function() {
-            f2.componentDidUpdate(m2, v2, d2);
-          });
+    e: if ("function" == typeof E2) {
+      if (_2 = t2.props, b2 = (s2 = E2.contextType) && r2[s2.__c], g2 = s2 ? b2 ? b2.props.value : s2.__ : r2, n2.__c ? h3 = (f2 = t2.__c = n2.__c).__ = f2.__E : ("prototype" in E2 && E2.prototype.render ? t2.__c = f2 = new E2(_2, g2) : (t2.__c = f2 = new O$1(_2, g2), f2.constructor = E2, f2.render = U$1), b2 && b2.sub(f2), f2.props = _2, f2.state || (f2.state = {}), f2.context = g2, f2.__n = r2, p2 = f2.__d = true, f2.__h = []), null == f2.__s && (f2.__s = f2.state), null != E2.getDerivedStateFromProps && (f2.__s == f2.state && (f2.__s = y$1({}, f2.__s)), y$1(f2.__s, E2.getDerivedStateFromProps(_2, f2.__s))), m2 = f2.props, v2 = f2.state, p2) null == E2.getDerivedStateFromProps && null != f2.componentWillMount && f2.componentWillMount(), null != f2.componentDidMount && f2.__h.push(f2.componentDidMount);
+      else {
+        if (null == E2.getDerivedStateFromProps && _2 !== m2 && null != f2.componentWillReceiveProps && f2.componentWillReceiveProps(_2, g2), !f2.__e && null != f2.shouldComponentUpdate && false === f2.shouldComponentUpdate(_2, f2.__s, g2) || t2.__v === n2.__v) {
+          f2.props = _2, f2.state = f2.__s, t2.__v !== n2.__v && (f2.__d = false), f2.__v = t2, t2.__e = n2.__e, t2.__k = n2.__k, f2.__h.length && c2.push(f2);
+          break e;
         }
-        f2.context = _2, f2.props = h22, f2.state = f2.__s, (l2 = s$1.__r) && l2(t2), f2.__d = false, f2.__v = t2, f2.__P = e2, l2 = f2.render(f2.props, f2.state, f2.context), f2.state = f2.__s, null != f2.getChildContext && (r2 = b$1(b$1({}, r2), f2.getChildContext())), p2 || null == f2.getSnapshotBeforeUpdate || (d2 = f2.getSnapshotBeforeUpdate(m2, v2)), O2 = null != l2 && l2.type === S$1 && null == l2.key ? l2.props.children : l2, D$1(e2, Array.isArray(O2) ? O2 : [O2], t2, n2, r2, o2, i2, c2, a2, u2), f2.base = t2.__e, t2.__h = null, f2.__h.length && c2.push(f2), y2 && (f2.__E = f2.__ = null), f2.__e = false;
-      } else
-        null == i2 && t2.__v === n2.__v ? (t2.__k = n2.__k, t2.__e = n2.__e) : t2.__e = M$1(n2.__e, t2, n2, r2, o2, i2, c2, u2);
-    (l2 = s$1.diffed) && l2(t2);
+        null != f2.componentWillUpdate && f2.componentWillUpdate(_2, f2.__s, g2), null != f2.componentDidUpdate && f2.__h.push(function() {
+          f2.componentDidUpdate(m2, v2, d2);
+        });
+      }
+      f2.context = g2, f2.props = _2, f2.state = f2.__s, (s2 = l$1.__r) && s2(t2), f2.__d = false, f2.__v = t2, f2.__P = e2, s2 = f2.render(f2.props, f2.state, f2.context), f2.state = f2.__s, null != f2.getChildContext && (r2 = y$1(y$1({}, r2), f2.getChildContext())), p2 || null == f2.getSnapshotBeforeUpdate || (d2 = f2.getSnapshotBeforeUpdate(m2, v2)), w2 = null != s2 && s2.type === S$1 && null == s2.key ? s2.props.children : s2, I$1(e2, Array.isArray(w2) ? w2 : [w2], t2, n2, r2, o2, i2, c2, a2, u2), f2.base = t2.__e, t2.__h = null, f2.__h.length && c2.push(f2), h3 && (f2.__E = f2.__ = null), f2.__e = false;
+    } else null == i2 && t2.__v === n2.__v ? (t2.__k = n2.__k, t2.__e = n2.__e) : t2.__e = L$1(n2.__e, t2, n2, r2, o2, i2, c2, u2);
+    (s2 = l$1.diffed) && s2(t2);
   } catch (e3) {
-    t2.__v = null, (u2 || null != i2) && (t2.__e = a2, t2.__h = !!u2, i2[i2.indexOf(a2)] = null), s$1.__e(e3, t2, n2);
+    t2.__v = null, (u2 || null != i2) && (t2.__e = a2, t2.__h = !!u2, i2[i2.indexOf(a2)] = null), l$1.__e(e3, t2, n2);
   }
 }
-function L$1(e2, t2) {
-  s$1.__c && s$1.__c(t2, e2), e2.some(function(t3) {
+function q$1(e2, t2) {
+  l$1.__c && l$1.__c(t2, e2), e2.some(function(t3) {
     try {
       e2 = t3.__h, t3.__h = [], e2.some(function(e3) {
         e3.call(t3);
       });
     } catch (e3) {
-      s$1.__e(e3, t3.__v);
+      l$1.__e(e3, t3.__v);
     }
   });
 }
-function M$1(e2, t2, n2, r2, o2, i2, c2, a2) {
-  var u2, l2, s2, f2, p2 = n2.props, m2 = t2.props, v2 = t2.type, h22 = 0;
-  if ("svg" === v2 && (o2 = true), null != i2) {
-    for (; h22 < i2.length; h22++)
-      if ((u2 = i2[h22]) && (u2 === e2 || (v2 ? u2.localName == v2 : 3 == u2.nodeType))) {
-        e2 = u2, i2[h22] = null;
-        break;
-      }
+function L$1(e2, t2, n2, r2, o2, i2, c2, a2) {
+  var u2, l2, s2, f2, p2 = n2.props, m2 = t2.props, h3 = t2.type, y2 = 0;
+  if ("svg" === h3 && (o2 = true), null != i2) {
+    for (; y2 < i2.length; y2++) if ((u2 = i2[y2]) && (u2 === e2 || (h3 ? u2.localName == h3 : 3 == u2.nodeType))) {
+      e2 = u2, i2[y2] = null;
+      break;
+    }
   }
   if (null == e2) {
-    if (null === v2)
-      return document.createTextNode(m2);
-    e2 = o2 ? document.createElementNS("http://www.w3.org/2000/svg", v2) : document.createElement(v2, m2.is && m2), i2 = null, a2 = false;
+    if (null === h3) return document.createTextNode(m2);
+    e2 = o2 ? document.createElementNS("http://www.w3.org/2000/svg", h3) : document.createElement(h3, m2.is && m2), i2 = null, a2 = false;
   }
-  if (null === v2)
-    p2 === m2 || a2 && e2.data === m2 || (e2.data = m2);
+  if (null === h3) p2 === m2 || a2 && e2.data === m2 || (e2.data = m2);
   else {
-    if (i2 = i2 && y$1.slice.call(e2.childNodes), l2 = (p2 = n2.props || d$1).dangerouslySetInnerHTML, s2 = m2.dangerouslySetInnerHTML, !a2) {
-      if (null != i2)
-        for (p2 = {}, f2 = 0; f2 < e2.attributes.length; f2++)
-          p2[e2.attributes[f2].name] = e2.attributes[f2].value;
+    if (i2 = i2 && d$1.slice.call(e2.childNodes), l2 = (p2 = n2.props || v$1).dangerouslySetInnerHTML, s2 = m2.dangerouslySetInnerHTML, !a2) {
+      if (null != i2) for (p2 = {}, f2 = 0; f2 < e2.attributes.length; f2++) p2[e2.attributes[f2].name] = e2.attributes[f2].value;
       (s2 || l2) && (s2 && (l2 && s2.__html == l2.__html || s2.__html === e2.innerHTML) || (e2.innerHTML = s2 && s2.__html || ""));
     }
     if (function(e3, t3, n3, r3, o3) {
       var i3;
-      for (i3 in n3)
-        "children" === i3 || "key" === i3 || i3 in t3 || x$1(e3, i3, null, n3[i3], r3);
-      for (i3 in t3)
-        o3 && "function" != typeof t3[i3] || "children" === i3 || "key" === i3 || "value" === i3 || "checked" === i3 || n3[i3] === t3[i3] || x$1(e3, i3, t3[i3], n3[i3], r3);
-    }(e2, m2, p2, o2, a2), s2)
-      t2.__k = [];
-    else if (h22 = t2.props.children, D$1(e2, Array.isArray(h22) ? h22 : [h22], t2, n2, r2, o2 && "foreignObject" !== v2, i2, c2, e2.firstChild, a2), null != i2)
-      for (h22 = i2.length; h22--; )
-        null != i2[h22] && g$1(i2[h22]);
-    a2 || ("value" in m2 && void 0 !== (h22 = m2.value) && (h22 !== e2.value || "progress" === v2 && !h22) && x$1(e2, "value", h22, p2.value, false), "checked" in m2 && void 0 !== (h22 = m2.checked) && h22 !== e2.checked && x$1(e2, "checked", h22, p2.checked, false));
+      for (i3 in n3) "children" === i3 || "key" === i3 || i3 in t3 || x$1(e3, i3, null, n3[i3], r3);
+      for (i3 in t3) o3 && "function" != typeof t3[i3] || "children" === i3 || "key" === i3 || "value" === i3 || "checked" === i3 || n3[i3] === t3[i3] || x$1(e3, i3, t3[i3], n3[i3], r3);
+    }(e2, m2, p2, o2, a2), s2) t2.__k = [];
+    else if (y2 = t2.props.children, I$1(e2, Array.isArray(y2) ? y2 : [y2], t2, n2, r2, o2 && "foreignObject" !== h3, i2, c2, e2.firstChild, a2), null != i2) for (y2 = i2.length; y2--; ) null != i2[y2] && _$1(i2[y2]);
+    a2 || ("value" in m2 && void 0 !== (y2 = m2.value) && (y2 !== e2.value || "progress" === h3 && !y2) && x$1(e2, "value", y2, p2.value, false), "checked" in m2 && void 0 !== (y2 = m2.checked) && y2 !== e2.checked && x$1(e2, "checked", y2, p2.checked, false));
   }
   return e2;
 }
-function H(e2, t2, n2) {
+function M$1(e2, t2, n2) {
   try {
     "function" == typeof e2 ? e2(t2) : e2.current = t2;
   } catch (e3) {
-    s$1.__e(e3, n2);
+    l$1.__e(e3, n2);
   }
 }
-function U$1(e2, t2, n2) {
+function H(e2, t2, n2) {
   var r2, o2, i2;
-  if (s$1.unmount && s$1.unmount(e2), (r2 = e2.ref) && (r2.current && r2.current !== e2.__e || H(r2, null, t2)), n2 || "function" == typeof e2.type || (n2 = null != (o2 = e2.__e)), e2.__e = e2.__d = void 0, null != (r2 = e2.__c)) {
-    if (r2.componentWillUnmount)
-      try {
-        r2.componentWillUnmount();
-      } catch (e3) {
-        s$1.__e(e3, t2);
-      }
+  if (l$1.unmount && l$1.unmount(e2), (r2 = e2.ref) && (r2.current && r2.current !== e2.__e || M$1(r2, null, t2)), n2 || "function" == typeof e2.type || (n2 = null != (o2 = e2.__e)), e2.__e = e2.__d = void 0, null != (r2 = e2.__c)) {
+    if (r2.componentWillUnmount) try {
+      r2.componentWillUnmount();
+    } catch (e3) {
+      l$1.__e(e3, t2);
+    }
     r2.base = r2.__P = null;
   }
-  if (r2 = e2.__k)
-    for (i2 = 0; i2 < r2.length; i2++)
-      r2[i2] && U$1(r2[i2], t2, n2);
-  null != o2 && g$1(o2);
+  if (r2 = e2.__k) for (i2 = 0; i2 < r2.length; i2++) r2[i2] && H(r2[i2], t2, n2);
+  null != o2 && _$1(o2);
 }
-function F$1(e2, t2, n2) {
+function U$1(e2, t2, n2) {
   return this.constructor(e2, n2);
 }
-function B$1(e2, t2, n2) {
+function F$1(e2, t2, n2) {
   var r2, o2, i2;
-  s$1.__ && s$1.__(e2, t2), o2 = (r2 = "function" == typeof n2) ? null : n2 && n2.__k || t2.__k, i2 = [], q$1(t2, e2 = (!r2 && n2 || t2).__k = _$1(S$1, null, [e2]), o2 || d$1, d$1, void 0 !== t2.ownerSVGElement, !r2 && n2 ? [n2] : o2 ? null : t2.firstChild ? y$1.slice.call(t2.childNodes) : null, i2, !r2 && n2 ? n2 : o2 ? o2.__e : t2.firstChild, r2), L$1(i2, e2);
-}
-function V$1(e2, t2) {
-  B$1(e2, t2, V$1);
-}
-function K(e2, t2, n2) {
-  var r2, o2, i2, c2 = arguments, a2 = b$1({}, e2.props);
-  for (i2 in t2)
-    "key" == i2 ? r2 = t2[i2] : "ref" == i2 ? o2 = t2[i2] : a2[i2] = t2[i2];
-  if (arguments.length > 3)
-    for (n2 = [n2], i2 = 3; i2 < arguments.length; i2++)
-      n2.push(c2[i2]);
-  return null != n2 && (a2.children = n2), O$1(e2.type, a2, r2 || e2.key, o2 || e2.ref, null);
-}
-s$1 = { __e: function(e2, t2) {
-  for (var n2, r2, o2; t2 = t2.__; )
-    if ((n2 = t2.__c) && !n2.__)
-      try {
-        if ((r2 = n2.constructor) && null != r2.getDerivedStateFromError && (n2.setState(r2.getDerivedStateFromError(e2)), o2 = n2.__d), null != n2.componentDidCatch && (n2.componentDidCatch(e2), o2 = n2.__d), o2)
-          return n2.__E = n2;
-      } catch (t3) {
-        e2 = t3;
-      }
+  l$1.__ && l$1.__(e2, t2), o2 = (r2 = "function" == typeof n2) ? null : n2 && n2.__k || t2.__k, i2 = [], R$1(t2, e2 = (!r2 && n2 || t2).__k = b$1(S$1, null, [e2]), o2 || v$1, v$1, void 0 !== t2.ownerSVGElement, !r2 && n2 ? [n2] : o2 ? null : t2.firstChild ? d$1.slice.call(t2.childNodes) : null, i2, !r2 && n2 ? n2 : o2 ? o2.__e : t2.firstChild, r2), q$1(i2, e2);
+}
+function B$1(e2, t2) {
+  F$1(e2, t2, B$1);
+}
+function V$1(e2, t2, n2) {
+  var r2, o2, i2, c2 = arguments, a2 = y$1({}, e2.props);
+  for (i2 in t2) "key" == i2 ? r2 = t2[i2] : "ref" == i2 ? o2 = t2[i2] : a2[i2] = t2[i2];
+  if (arguments.length > 3) for (n2 = [n2], i2 = 3; i2 < arguments.length; i2++) n2.push(c2[i2]);
+  return null != n2 && (a2.children = n2), g$1(e2.type, a2, r2 || e2.key, o2 || e2.ref, null);
+}
+l$1 = { __e: function(e2, t2) {
+  for (var n2, r2, o2; t2 = t2.__; ) if ((n2 = t2.__c) && !n2.__) try {
+    if ((r2 = n2.constructor) && null != r2.getDerivedStateFromError && (n2.setState(r2.getDerivedStateFromError(e2)), o2 = n2.__d), null != n2.componentDidCatch && (n2.componentDidCatch(e2), o2 = n2.__d), o2) return n2.__E = n2;
+  } catch (t3) {
+    e2 = t3;
+  }
   throw e2;
-}, __v: 0 }, w$1.prototype.setState = function(e2, t2) {
+}, __v: 0 }, O$1.prototype.setState = function(e2, t2) {
   var n2;
-  n2 = null != this.__s && this.__s !== this.state ? this.__s : this.__s = b$1({}, this.state), "function" == typeof e2 && (e2 = e2(b$1({}, n2), this.props)), e2 && b$1(n2, e2), null != e2 && this.__v && (t2 && this.__h.push(t2), P$1(this));
-}, w$1.prototype.forceUpdate = function(e2) {
-  this.__v && (this.__e = true, e2 && this.__h.push(e2), P$1(this));
-}, w$1.prototype.render = S$1, f$1 = [], p$1 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, I$1.__r = 0, v$1 = 0;
-var W, z$1, J$1, $$1 = 0, Q = [], Z = s$1.__b, Y$1 = s$1.__r, G = s$1.diffed, X = s$1.__c, ee = s$1.unmount;
-function te(e2, t2) {
-  s$1.__h && s$1.__h(z$1, e2, $$1 || t2), $$1 = 0;
-  var n2 = z$1.__H || (z$1.__H = { __: [], __h: [] });
+  n2 = null != this.__s && this.__s !== this.state ? this.__s : this.__s = y$1({}, this.state), "function" == typeof e2 && (e2 = e2(y$1({}, n2), this.props)), e2 && y$1(n2, e2), null != e2 && this.__v && (t2 && this.__h.push(t2), j$1(this));
+}, O$1.prototype.forceUpdate = function(e2) {
+  this.__v && (this.__e = true, e2 && this.__h.push(e2), j$1(this));
+}, O$1.prototype.render = S$1, s$1 = [], f$1 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, P$1.__r = 0, m$1 = 0;
+var K, W, z$1, J$1 = 0, $$1 = [], Z = l$1.__b, Q = l$1.__r, G = l$1.diffed, Y$1 = l$1.__c, X = l$1.unmount;
+function ee(e2, t2) {
+  l$1.__h && l$1.__h(W, e2, J$1 || t2), J$1 = 0;
+  var n2 = W.__H || (W.__H = { __: [], __h: [] });
   return e2 >= n2.__.length && n2.__.push({}), n2.__[e2];
 }
-function ne(e2) {
-  return $$1 = 1, re(pe, e2);
+function te(e2) {
+  return J$1 = 1, ne(fe, e2);
 }
-function re(e2, t2, n2) {
-  var r2 = te(W++, 2);
-  return r2.t = e2, r2.__c || (r2.__ = [n2 ? n2(t2) : pe(void 0, t2), function(e3) {
+function ne(e2, t2, n2) {
+  var r2 = ee(K++, 2);
+  return r2.t = e2, r2.__c || (r2.__ = [n2 ? n2(t2) : fe(void 0, t2), function(e3) {
     var t3 = r2.t(r2.__[0], e3);
     r2.__[0] !== t3 && (r2.__ = [t3, r2.__[1]], r2.__c.setState({}));
-  }], r2.__c = z$1), r2.__;
+  }], r2.__c = W), r2.__;
+}
+function re(e2, t2) {
+  var n2 = ee(K++, 3);
+  !l$1.__s && se(n2.__H, t2) && (n2.__ = e2, n2.__H = t2, W.__H.__h.push(n2));
 }
 function oe(e2, t2) {
-  var n2 = te(W++, 3);
-  !s$1.__s && fe(n2.__H, t2) && (n2.__ = e2, n2.__H = t2, z$1.__H.__h.push(n2));
+  var n2 = ee(K++, 4);
+  !l$1.__s && se(n2.__H, t2) && (n2.__ = e2, n2.__H = t2, W.__h.push(n2));
 }
 function ie(e2, t2) {
-  var n2 = te(W++, 4);
-  !s$1.__s && fe(n2.__H, t2) && (n2.__ = e2, n2.__H = t2, z$1.__h.push(n2));
-}
-function ce(e2, t2) {
-  var n2 = te(W++, 7);
-  return fe(n2.__H, t2) && (n2.__ = e2(), n2.__H = t2, n2.__h = e2), n2.__;
-}
-function ae() {
-  Q.forEach(function(e2) {
-    if (e2.__P)
-      try {
-        e2.__H.__h.forEach(le), e2.__H.__h.forEach(se), e2.__H.__h = [];
-      } catch (t2) {
-        e2.__H.__h = [], s$1.__e(t2, e2.__v);
-      }
-  }), Q = [];
-}
-s$1.__b = function(e2) {
-  z$1 = null, Z && Z(e2);
-}, s$1.__r = function(e2) {
-  Y$1 && Y$1(e2), W = 0;
-  var t2 = (z$1 = e2.__c).__H;
-  t2 && (t2.__h.forEach(le), t2.__h.forEach(se), t2.__h = []);
-}, s$1.diffed = function(e2) {
+  var n2 = ee(K++, 7);
+  return se(n2.__H, t2) && (n2.__ = e2(), n2.__H = t2, n2.__h = e2), n2.__;
+}
+function ce() {
+  $$1.forEach(function(e2) {
+    if (e2.__P) try {
+      e2.__H.__h.forEach(ue), e2.__H.__h.forEach(le), e2.__H.__h = [];
+    } catch (t2) {
+      e2.__H.__h = [], l$1.__e(t2, e2.__v);
+    }
+  }), $$1 = [];
+}
+l$1.__b = function(e2) {
+  W = null, Z && Z(e2);
+}, l$1.__r = function(e2) {
+  Q && Q(e2), K = 0;
+  var t2 = (W = e2.__c).__H;
+  t2 && (t2.__h.forEach(ue), t2.__h.forEach(le), t2.__h = []);
+}, l$1.diffed = function(e2) {
   G && G(e2);
   var t2 = e2.__c;
-  t2 && t2.__H && t2.__H.__h.length && (1 !== Q.push(t2) && J$1 === s$1.requestAnimationFrame || ((J$1 = s$1.requestAnimationFrame) || function(e3) {
+  t2 && t2.__H && t2.__H.__h.length && (1 !== $$1.push(t2) && z$1 === l$1.requestAnimationFrame || ((z$1 = l$1.requestAnimationFrame) || function(e3) {
     var t3, n2 = function() {
-      clearTimeout(r2), ue && cancelAnimationFrame(t3), setTimeout(e3);
+      clearTimeout(r2), ae && cancelAnimationFrame(t3), setTimeout(e3);
     }, r2 = setTimeout(n2, 100);
-    ue && (t3 = requestAnimationFrame(n2));
-  })(ae)), z$1 = void 0;
-}, s$1.__c = function(e2, t2) {
+    ae && (t3 = requestAnimationFrame(n2));
+  })(ce)), W = void 0;
+}, l$1.__c = function(e2, t2) {
   t2.some(function(e3) {
     try {
-      e3.__h.forEach(le), e3.__h = e3.__h.filter(function(e4) {
-        return !e4.__ || se(e4);
+      e3.__h.forEach(ue), e3.__h = e3.__h.filter(function(e4) {
+        return !e4.__ || le(e4);
       });
     } catch (n2) {
       t2.some(function(e4) {
         e4.__h && (e4.__h = []);
-      }), t2 = [], s$1.__e(n2, e3.__v);
+      }), t2 = [], l$1.__e(n2, e3.__v);
     }
-  }), X && X(e2, t2);
-}, s$1.unmount = function(e2) {
-  ee && ee(e2);
+  }), Y$1 && Y$1(e2, t2);
+}, l$1.unmount = function(e2) {
+  X && X(e2);
   var t2 = e2.__c;
-  if (t2 && t2.__H)
-    try {
-      t2.__H.__.forEach(le);
-    } catch (e3) {
-      s$1.__e(e3, t2.__v);
-    }
+  if (t2 && t2.__H) try {
+    t2.__H.__.forEach(ue);
+  } catch (e3) {
+    l$1.__e(e3, t2.__v);
+  }
 };
-var ue = "function" == typeof requestAnimationFrame;
-function le(e2) {
-  var t2 = z$1;
-  "function" == typeof e2.__c && e2.__c(), z$1 = t2;
+var ae = "function" == typeof requestAnimationFrame;
+function ue(e2) {
+  var t2 = W;
+  "function" == typeof e2.__c && e2.__c(), W = t2;
 }
-function se(e2) {
-  var t2 = z$1;
-  e2.__c = e2.__(), z$1 = t2;
+function le(e2) {
+  var t2 = W;
+  e2.__c = e2.__(), W = t2;
 }
-function fe(e2, t2) {
+function se(e2, t2) {
   return !e2 || e2.length !== t2.length || t2.some(function(t3, n2) {
     return t3 !== e2[n2];
   });
 }
-function pe(e2, t2) {
+function fe(e2, t2) {
   return "function" == typeof t2 ? t2(e2) : t2;
 }
-function me(e2, t2) {
-  for (var n2 in t2)
-    e2[n2] = t2[n2];
+function pe(e2, t2) {
+  for (var n2 in t2) e2[n2] = t2[n2];
   return e2;
 }
-function ve(e2, t2) {
-  for (var n2 in e2)
-    if ("__source" !== n2 && !(n2 in t2))
-      return true;
-  for (var r2 in t2)
-    if ("__source" !== r2 && e2[r2] !== t2[r2])
-      return true;
+function me(e2, t2) {
+  for (var n2 in e2) if ("__source" !== n2 && !(n2 in t2)) return true;
+  for (var r2 in t2) if ("__source" !== r2 && e2[r2] !== t2[r2]) return true;
   return false;
 }
-function de(e2) {
+function ve(e2) {
   this.props = e2;
 }
-(de.prototype = new w$1()).isPureReactComponent = true, de.prototype.shouldComponentUpdate = function(e2, t2) {
-  return ve(this.props, e2) || ve(this.state, t2);
+(ve.prototype = new O$1()).isPureReactComponent = true, ve.prototype.shouldComponentUpdate = function(e2, t2) {
+  return me(this.props, e2) || me(this.state, t2);
 };
-var ye = s$1.__b;
-s$1.__b = function(e2) {
-  e2.type && e2.type.__f && e2.ref && (e2.props.ref = e2.ref, e2.ref = null), ye && ye(e2);
+var de = l$1.__b;
+l$1.__b = function(e2) {
+  e2.type && e2.type.__f && e2.ref && (e2.props.ref = e2.ref, e2.ref = null), de && de(e2);
 };
-var he = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.forward_ref") || 3911;
-var be = function(e2, t2) {
-  return null == e2 ? null : A$1(A$1(e2).map(t2));
-}, ge = { map: be, forEach: be, count: function(e2) {
-  return e2 ? A$1(e2).length : 0;
+var he = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.forward_ref") || 3911, ye = function(e2, t2) {
+  return null == e2 ? null : k$1(k$1(e2).map(t2));
+}, _e = { map: ye, forEach: ye, count: function(e2) {
+  return e2 ? k$1(e2).length : 0;
 }, only: function(e2) {
-  var t2 = A$1(e2);
-  if (1 !== t2.length)
-    throw "Children.only";
+  var t2 = k$1(e2);
+  if (1 !== t2.length) throw "Children.only";
   return t2[0];
-}, toArray: A$1 }, _e = s$1.__e;
-function Oe() {
+}, toArray: k$1 }, be = l$1.__e;
+function ge() {
   this.__u = 0, this.t = null, this.__b = null;
 }
 function Se(e2) {
   var t2 = e2.__.__c;
   return t2 && t2.__e && t2.__e(e2);
 }
-function we() {
+function Oe() {
   this.u = null, this.o = null;
 }
-s$1.__e = function(e2, t2, n2) {
+l$1.__e = function(e2, t2, n2) {
   if (e2.then) {
-    for (var r2, o2 = t2; o2 = o2.__; )
-      if ((r2 = o2.__c) && r2.__c)
-        return null == t2.__e && (t2.__e = n2.__e, t2.__k = n2.__k), r2.__c(e2, t2);
+    for (var r2, o2 = t2; o2 = o2.__; ) if ((r2 = o2.__c) && r2.__c) return null == t2.__e && (t2.__e = n2.__e, t2.__k = n2.__k), r2.__c(e2, t2);
   }
-  _e(e2, t2, n2);
-}, (Oe.prototype = new w$1()).__c = function(e2, t2) {
+  be(e2, t2, n2);
+}, (ge.prototype = new O$1()).__c = function(e2, t2) {
   var n2 = t2.__c, r2 = this;
   null == r2.t && (r2.t = []), r2.t.push(n2);
   var o2 = Se(r2.__v), i2 = false, c2 = function() {
@@ -13858,165 +13965,160 @@ s$1.__e = function(e2, t2, n2) {
         }(e3, e3.__c.__P, e3.__c.__O);
       }
       var t3;
-      for (r2.setState({ __e: r2.__b = null }); t3 = r2.t.pop(); )
-        t3.forceUpdate();
+      for (r2.setState({ __e: r2.__b = null }); t3 = r2.t.pop(); ) t3.forceUpdate();
     }
   }, u2 = true === t2.__h;
   r2.__u++ || u2 || r2.setState({ __e: r2.__b = r2.__v.__k[0] }), e2.then(c2, c2);
-}, Oe.prototype.componentWillUnmount = function() {
+}, ge.prototype.componentWillUnmount = function() {
   this.t = [];
-}, Oe.prototype.render = function(e2, t2) {
+}, ge.prototype.render = function(e2, t2) {
   if (this.__b) {
     if (this.__v.__k) {
       var n2 = document.createElement("div"), r2 = this.__v.__k[0].__c;
       this.__v.__k[0] = function e3(t3, n3, r3) {
         return t3 && (t3.__c && t3.__c.__H && (t3.__c.__H.__.forEach(function(e4) {
           "function" == typeof e4.__c && e4.__c();
-        }), t3.__c.__H = null), null != (t3 = me({}, t3)).__c && (t3.__c.__P === r3 && (t3.__c.__P = n3), t3.__c = null), t3.__k = t3.__k && t3.__k.map(function(t4) {
+        }), t3.__c.__H = null), null != (t3 = pe({}, t3)).__c && (t3.__c.__P === r3 && (t3.__c.__P = n3), t3.__c = null), t3.__k = t3.__k && t3.__k.map(function(t4) {
           return e3(t4, n3, r3);
         })), t3;
       }(this.__b, n2, r2.__O = r2.__P);
     }
     this.__b = null;
   }
-  var o2 = t2.__e && _$1(S$1, null, e2.fallback);
-  return o2 && (o2.__h = null), [_$1(S$1, null, t2.__e ? null : e2.children), o2];
+  var o2 = t2.__e && b$1(S$1, null, e2.fallback);
+  return o2 && (o2.__h = null), [b$1(S$1, null, t2.__e ? null : e2.children), o2];
 };
-var je = function(e2, t2, n2) {
-  if (++n2[1] === n2[0] && e2.o.delete(t2), e2.props.revealOrder && ("t" !== e2.props.revealOrder[0] || !e2.o.size))
-    for (n2 = e2.u; n2; ) {
-      for (; n2.length > 3; )
-        n2.pop()();
-      if (n2[1] < n2[0])
-        break;
-      e2.u = n2 = n2[2];
-    }
+var we = function(e2, t2, n2) {
+  if (++n2[1] === n2[0] && e2.o.delete(t2), e2.props.revealOrder && ("t" !== e2.props.revealOrder[0] || !e2.o.size)) for (n2 = e2.u; n2; ) {
+    for (; n2.length > 3; ) n2.pop()();
+    if (n2[1] < n2[0]) break;
+    e2.u = n2 = n2[2];
+  }
 };
 function Ee(e2) {
   return this.getChildContext = function() {
     return e2.context;
   }, e2.children;
 }
-function Pe(e2) {
+function je(e2) {
   var t2 = this, n2 = e2.i;
   t2.componentWillUnmount = function() {
-    B$1(null, t2.l), t2.l = null, t2.i = null;
+    F$1(null, t2.l), t2.l = null, t2.i = null;
   }, t2.i && t2.i !== n2 && t2.componentWillUnmount(), e2.__v ? (t2.l || (t2.i = n2, t2.l = { nodeType: 1, parentNode: n2, childNodes: [], appendChild: function(e3) {
     this.childNodes.push(e3), t2.i.appendChild(e3);
   }, insertBefore: function(e3, n3) {
     this.childNodes.push(e3), t2.i.appendChild(e3);
   }, removeChild: function(e3) {
     this.childNodes.splice(this.childNodes.indexOf(e3) >>> 1, 1), t2.i.removeChild(e3);
-  } }), B$1(_$1(Ee, { context: t2.context }, e2.__v), t2.l)) : t2.l && t2.componentWillUnmount();
+  } }), F$1(b$1(Ee, { context: t2.context }, e2.__v), t2.l)) : t2.l && t2.componentWillUnmount();
 }
-function Ie(e2, t2) {
-  return _$1(Pe, { __v: e2, i: t2 });
+function Pe(e2, t2) {
+  return b$1(je, { __v: e2, i: t2 });
 }
-(we.prototype = new w$1()).__e = function(e2) {
+(Oe.prototype = new O$1()).__e = function(e2) {
   var t2 = this, n2 = Se(t2.__v), r2 = t2.o.get(e2);
   return r2[0]++, function(o2) {
     var i2 = function() {
-      t2.props.revealOrder ? (r2.push(o2), je(t2, e2, r2)) : o2();
+      t2.props.revealOrder ? (r2.push(o2), we(t2, e2, r2)) : o2();
     };
     n2 ? n2(i2) : i2();
   };
-}, we.prototype.render = function(e2) {
+}, Oe.prototype.render = function(e2) {
   this.u = null, this.o = /* @__PURE__ */ new Map();
-  var t2 = A$1(e2.children);
+  var t2 = k$1(e2.children);
   e2.revealOrder && "b" === e2.revealOrder[0] && t2.reverse();
-  for (var n2 = t2.length; n2--; )
-    this.o.set(t2[n2], this.u = [1, 0, this.u]);
+  for (var n2 = t2.length; n2--; ) this.o.set(t2[n2], this.u = [1, 0, this.u]);
   return e2.children;
-}, we.prototype.componentDidUpdate = we.prototype.componentDidMount = function() {
+}, Oe.prototype.componentDidUpdate = Oe.prototype.componentDidMount = function() {
   var e2 = this;
   this.o.forEach(function(t2, n2) {
-    je(e2, n2, t2);
+    we(e2, n2, t2);
   });
 };
-var De = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103, ke = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/, Ae = function(e2) {
+var Ie = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103, De = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/, ke = function(e2) {
   return ("undefined" != typeof Symbol && "symbol" == n$1(Symbol()) ? /fil|che|rad/i : /fil|che|ra/i).test(e2);
 };
 function Ce(e2, t2, n2) {
-  return null == t2.__k && (t2.textContent = ""), B$1(e2, t2), "function" == typeof n2 && n2(), e2 ? e2.__c : null;
+  return null == t2.__k && (t2.textContent = ""), F$1(e2, t2), "function" == typeof n2 && n2(), e2 ? e2.__c : null;
 }
-w$1.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function(e2) {
-  Object.defineProperty(w$1.prototype, e2, { configurable: true, get: function() {
+O$1.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function(e2) {
+  Object.defineProperty(O$1.prototype, e2, { configurable: true, get: function() {
     return this["UNSAFE_" + e2];
   }, set: function(t2) {
     Object.defineProperty(this, e2, { configurable: true, writable: true, value: t2 });
   } });
 });
-var Ne = s$1.event;
+var Ae = l$1.event;
 function xe() {
 }
-function Te() {
+function Ne() {
   return this.cancelBubble;
 }
-function Re() {
+function Te() {
   return this.defaultPrevented;
 }
-s$1.event = function(e2) {
-  return Ne && (e2 = Ne(e2)), e2.persist = xe, e2.isPropagationStopped = Te, e2.isDefaultPrevented = Re, e2.nativeEvent = e2;
+l$1.event = function(e2) {
+  return Ae && (e2 = Ae(e2)), e2.persist = xe, e2.isPropagationStopped = Ne, e2.isDefaultPrevented = Te, e2.nativeEvent = e2;
 };
-var qe, Le = { configurable: true, get: function() {
+var Re, qe = { configurable: true, get: function() {
   return this.class;
-} }, Me = s$1.vnode;
-s$1.vnode = function(e2) {
+} }, Le = l$1.vnode;
+l$1.vnode = function(e2) {
   var t2 = e2.type, n2 = e2.props, r2 = n2;
   if ("string" == typeof t2) {
     for (var o2 in r2 = {}, n2) {
       var i2 = n2[o2];
-      "value" === o2 && "defaultValue" in n2 && null == i2 || ("defaultValue" === o2 && "value" in n2 && null == n2.value ? o2 = "value" : "download" === o2 && true === i2 ? i2 = "" : /ondoubleclick/i.test(o2) ? o2 = "ondblclick" : /^onchange(textarea|input)/i.test(o2 + t2) && !Ae(n2.type) ? o2 = "oninput" : /^on(Ani|Tra|Tou|BeforeInp)/.test(o2) ? o2 = o2.toLowerCase() : ke.test(o2) ? o2 = o2.replace(/[A-Z0-9]/, "-$&").toLowerCase() : null === i2 && (i2 = void 0), r2[o2] = i2);
+      "value" === o2 && "defaultValue" in n2 && null == i2 || ("defaultValue" === o2 && "value" in n2 && null == n2.value ? o2 = "value" : "download" === o2 && true === i2 ? i2 = "" : /ondoubleclick/i.test(o2) ? o2 = "ondblclick" : /^onchange(textarea|input)/i.test(o2 + t2) && !ke(n2.type) ? o2 = "oninput" : /^on(Ani|Tra|Tou|BeforeInp)/.test(o2) ? o2 = o2.toLowerCase() : De.test(o2) ? o2 = o2.replace(/[A-Z0-9]/, "-$&").toLowerCase() : null === i2 && (i2 = void 0), r2[o2] = i2);
     }
-    "select" == t2 && r2.multiple && Array.isArray(r2.value) && (r2.value = A$1(n2.children).forEach(function(e3) {
+    "select" == t2 && r2.multiple && Array.isArray(r2.value) && (r2.value = k$1(n2.children).forEach(function(e3) {
       e3.props.selected = -1 != r2.value.indexOf(e3.props.value);
-    })), "select" == t2 && null != r2.defaultValue && (r2.value = A$1(n2.children).forEach(function(e3) {
+    })), "select" == t2 && null != r2.defaultValue && (r2.value = k$1(n2.children).forEach(function(e3) {
       e3.props.selected = r2.multiple ? -1 != r2.defaultValue.indexOf(e3.props.value) : r2.defaultValue == e3.props.value;
     })), e2.props = r2;
   }
-  t2 && n2.class != n2.className && (Le.enumerable = "className" in n2, null != n2.className && (r2.class = n2.className), Object.defineProperty(r2, "className", Le)), e2.$$typeof = De, Me && Me(e2);
+  t2 && n2.class != n2.className && (qe.enumerable = "className" in n2, null != n2.className && (r2.class = n2.className), Object.defineProperty(r2, "className", qe)), e2.$$typeof = Ie, Le && Le(e2);
 };
-var He = s$1.__r;
-s$1.__r = function(e2) {
-  He && He(e2), qe = e2.__c;
+var Me = l$1.__r;
+l$1.__r = function(e2) {
+  Me && Me(e2), Re = e2.__c;
 };
-var Ue = { ReactCurrentDispatcher: { current: { readContext: function(e2) {
-  return qe.__n[e2.__c].props.value;
+var He = { ReactCurrentDispatcher: { current: { readContext: function(e2) {
+  return Re.__n[e2.__c].props.value;
 } } } };
-"object" == ("undefined" == typeof performance ? "undefined" : n$1(performance)) && "function" == typeof performance.now && performance.now.bind(performance);
-function Fe(e2) {
-  return !!e2 && e2.$$typeof === De;
+function Ue(e2) {
+  return !!e2 && e2.$$typeof === Ie;
 }
-var Be = { useState: ne, useReducer: re, useEffect: oe, useLayoutEffect: ie, useRef: function(e2) {
-  return $$1 = 5, ce(function() {
+"object" == ("undefined" == typeof performance ? "undefined" : n$1(performance)) && "function" == typeof performance.now && performance.now.bind(performance);
+var Fe = { useState: te, useReducer: ne, useEffect: re, useLayoutEffect: oe, useRef: function(e2) {
+  return J$1 = 5, ie(function() {
     return { current: e2 };
   }, []);
 }, useImperativeHandle: function(e2, t2, n2) {
-  $$1 = 6, ie(function() {
+  J$1 = 6, oe(function() {
     "function" == typeof e2 ? e2(t2()) : e2 && (e2.current = t2());
   }, null == n2 ? n2 : n2.concat(e2));
-}, useMemo: ce, useCallback: function(e2, t2) {
-  return $$1 = 8, ce(function() {
+}, useMemo: ie, useCallback: function(e2, t2) {
+  return J$1 = 8, ie(function() {
     return e2;
   }, t2);
 }, useContext: function(e2) {
-  var t2 = z$1.context[e2.__c], n2 = te(W++, 9);
-  return n2.__c = e2, t2 ? (null == n2.__ && (n2.__ = true, t2.sub(z$1)), t2.props.value) : e2.__;
+  var t2 = W.context[e2.__c], n2 = ee(K++, 9);
+  return n2.__c = e2, t2 ? (null == n2.__ && (n2.__ = true, t2.sub(W)), t2.props.value) : e2.__;
 }, useDebugValue: function(e2, t2) {
-  s$1.useDebugValue && s$1.useDebugValue(t2 ? t2(e2) : e2);
-}, version: "16.8.0", Children: ge, render: Ce, hydrate: function(e2, t2, n2) {
-  return V$1(e2, t2), "function" == typeof n2 && n2(), e2 ? e2.__c : null;
+  l$1.useDebugValue && l$1.useDebugValue(t2 ? t2(e2) : e2);
+}, version: "16.8.0", Children: _e, render: Ce, hydrate: function(e2, t2, n2) {
+  return B$1(e2, t2), "function" == typeof n2 && n2(), e2 ? e2.__c : null;
 }, unmountComponentAtNode: function(e2) {
-  return !!e2.__k && (B$1(null, e2), true);
-}, createPortal: Ie, createElement: _$1, createContext: function(e2, t2) {
-  var n2 = { __c: t2 = "__cC" + v$1++, __: e2, Consumer: function(e3, t3) {
+  return !!e2.__k && (F$1(null, e2), true);
+}, createPortal: Pe, createElement: b$1, createContext: function(e2, t2) {
+  var n2 = { __c: t2 = "__cC" + m$1++, __: e2, Consumer: function(e3, t3) {
     return e3.children(t3);
   }, Provider: function(e3) {
     var n3, r2;
     return this.getChildContext || (n3 = [], (r2 = {})[t2] = this, this.getChildContext = function() {
       return r2;
     }, this.shouldComponentUpdate = function(e4) {
-      this.props.value !== e4.value && n3.some(P$1);
+      this.props.value !== e4.value && n3.some(j$1);
     }, this.sub = function(e4) {
       n3.push(e4);
       var t3 = e4.componentWillUnmount;
@@ -14027,223 +14129,160 @@ var Be = { useState: ne, useReducer: re, useEffect: oe, useLayoutEffect: ie, use
   } };
   return n2.Provider.__ = n2.Consumer.contextType = n2;
 }, createFactory: function(e2) {
-  return _$1.bind(null, e2);
+  return b$1.bind(null, e2);
 }, cloneElement: function(e2) {
-  return Fe(e2) ? K.apply(null, arguments) : e2;
+  return Ue(e2) ? V$1.apply(null, arguments) : e2;
 }, createRef: function() {
   return { current: null };
-}, Fragment: S$1, isValidElement: Fe, findDOMNode: function(e2) {
+}, Fragment: S$1, isValidElement: Ue, findDOMNode: function(e2) {
   return e2 && (e2.base || 1 === e2.nodeType && e2) || null;
-}, Component: w$1, PureComponent: de, memo: function(e2, t2) {
+}, Component: O$1, PureComponent: ve, memo: function(e2, t2) {
   function n2(e3) {
     var n3 = this.props.ref, r3 = n3 == e3.ref;
-    return !r3 && n3 && (n3.call ? n3(null) : n3.current = null), t2 ? !t2(this.props, e3) || !r3 : ve(this.props, e3);
+    return !r3 && n3 && (n3.call ? n3(null) : n3.current = null), t2 ? !t2(this.props, e3) || !r3 : me(this.props, e3);
   }
   function r2(t3) {
-    return this.shouldComponentUpdate = n2, _$1(e2, t3);
+    return this.shouldComponentUpdate = n2, b$1(e2, t3);
   }
   return r2.displayName = "Memo(" + (e2.displayName || e2.name) + ")", r2.prototype.isReactComponent = true, r2.__f = true, r2;
 }, forwardRef: function(e2) {
   function t2(t3, r2) {
-    var o2 = me({}, t3);
+    var o2 = pe({}, t3);
     return delete o2.ref, e2(o2, (r2 = t3.ref || r2) && ("object" != n$1(r2) || "current" in r2) ? r2 : null);
   }
   return t2.$$typeof = he, t2.render = t2, t2.prototype.isReactComponent = t2.__f = true, t2.displayName = "ForwardRef(" + (e2.displayName || e2.name) + ")", t2;
 }, unstable_batchedUpdates: function(e2, t2) {
   return e2(t2);
-}, StrictMode: S$1, Suspense: Oe, SuspenseList: we, lazy: function(e2) {
+}, StrictMode: S$1, Suspense: ge, SuspenseList: Oe, lazy: function(e2) {
   var t2, n2, r2;
   function o2(o3) {
     if (t2 || (t2 = e2()).then(function(e3) {
       n2 = e3.default || e3;
     }, function(e3) {
       r2 = e3;
-    }), r2)
-      throw r2;
-    if (!n2)
-      throw t2;
-    return _$1(n2, o3);
+    }), r2) throw r2;
+    if (!n2) throw t2;
+    return b$1(n2, o3);
   }
   return o2.displayName = "Lazy", o2.__f = true, o2;
-}, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: Ue };
-function Ve() {
-  return Be.createElement("svg", { width: "15", height: "15", className: "DocSearch-Control-Key-Icon" }, Be.createElement("path", { d: "M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953", strokeWidth: "1.2", stroke: "currentColor", fill: "none", strokeLinecap: "square" }));
+}, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: He }, Be = ["facetName", "facetQuery"];
+function Ve(e2, t2) {
+  var n2 = Object.keys(e2);
+  if (Object.getOwnPropertySymbols) {
+    var r2 = Object.getOwnPropertySymbols(e2);
+    t2 && (r2 = r2.filter(function(t3) {
+      return Object.getOwnPropertyDescriptor(e2, t3).enumerable;
+    })), n2.push.apply(n2, r2);
+  }
+  return n2;
 }
-function Ke() {
-  return Be.createElement("svg", { width: "20", height: "20", className: "DocSearch-Search-Icon", viewBox: "0 0 20 20", "aria-hidden": "true" }, Be.createElement("path", { d: "M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }));
+function Ke(e2) {
+  for (var t2 = 1; t2 < arguments.length; t2++) {
+    var n2 = null != arguments[t2] ? arguments[t2] : {};
+    t2 % 2 ? Ve(Object(n2), true).forEach(function(t3) {
+      We(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Ve(Object(n2)).forEach(function(t3) {
+      Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
+    });
+  }
+  return e2;
+}
+function We(e2, t2, n2) {
+  return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-var We = ["translations"];
 function ze() {
   return ze = Object.assign || function(e2) {
     for (var t2 = 1; t2 < arguments.length; t2++) {
       var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
+      for (var r2 in n2) Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
     }
     return e2;
   }, ze.apply(this, arguments);
 }
 function Je(e2, t2) {
-  return function(e3) {
-    if (Array.isArray(e3))
-      return e3;
-  }(e2) || function(e3, t3) {
-    var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
-    if (null == n2)
-      return;
-    var r2, o2, i2 = [], c2 = true, a2 = false;
-    try {
-      for (n2 = n2.call(e3); !(c2 = (r2 = n2.next()).done) && (i2.push(r2.value), !t3 || i2.length !== t3); c2 = true)
-        ;
-    } catch (e4) {
-      a2 = true, o2 = e4;
-    } finally {
-      try {
-        c2 || null == n2.return || n2.return();
-      } finally {
-        if (a2)
-          throw o2;
-      }
-    }
-    return i2;
-  }(e2, t2) || function(e3, t3) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return $e(e3, t3);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return $e(e3, t3);
-  }(e2, t2) || function() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }();
-}
-function $e(e2, t2) {
-  (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
-  return r2;
-}
-function Qe(e2, t2) {
-  if (null == e2)
-    return {};
+  if (null == e2) return {};
   var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
+    if (null == e3) return {};
     var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
+    for (r3 = 0; r3 < i3.length; r3++) n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
     return o3;
   }(e2, t2);
   if (Object.getOwnPropertySymbols) {
     var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
+    for (r2 = 0; r2 < i2.length; r2++) n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
   }
   return o2;
 }
-var Ze = Be.forwardRef(function(e2, t2) {
-  var n2 = e2.translations, r2 = void 0 === n2 ? {} : n2, o2 = Qe(e2, We), i2 = r2.buttonText, c2 = void 0 === i2 ? "Search" : i2, a2 = r2.buttonAriaLabel, u2 = void 0 === a2 ? "Search" : a2, l2 = Je(ne(null), 2), s2 = l2[0], f2 = l2[1];
-  return oe(function() {
-    "undefined" != typeof navigator && (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? f2("⌘") : f2("Ctrl"));
-  }, []), Be.createElement("button", ze({ type: "button", className: "DocSearch DocSearch-Button", "aria-label": u2 }, o2, { ref: t2 }), Be.createElement("span", { className: "DocSearch-Button-Container" }, Be.createElement(Ke, null), Be.createElement("span", { className: "DocSearch-Button-Placeholder" }, c2)), Be.createElement("span", { className: "DocSearch-Button-Keys" }, null !== s2 && Be.createElement(Be.Fragment, null, Be.createElement(Ye, { reactsToKey: "Ctrl" === s2 ? "Ctrl" : "Meta" }, "Ctrl" === s2 ? Be.createElement(Ve, null) : s2), Be.createElement(Ye, { reactsToKey: "k" }, "K"))));
-});
-function Ye(e2) {
-  var t2 = e2.reactsToKey, n2 = e2.children, r2 = Je(ne(false), 2), o2 = r2[0], i2 = r2[1];
-  return oe(function() {
-    if (t2)
-      return window.addEventListener("keydown", e3), window.addEventListener("keyup", n3), function() {
-        window.removeEventListener("keydown", e3), window.removeEventListener("keyup", n3);
-      };
-    function e3(e4) {
-      e4.key === t2 && i2(true);
-    }
-    function n3(e4) {
-      e4.key !== t2 && "Meta" !== e4.key || i2(false);
-    }
-  }, [t2]), Be.createElement("kbd", { className: o2 ? "DocSearch-Button-Key DocSearch-Button-Key--pressed" : "DocSearch-Button-Key" }, n2);
-}
-function Ge(e2, t2) {
-  var n2 = void 0;
-  return function() {
-    for (var r2 = arguments.length, o2 = new Array(r2), i2 = 0; i2 < r2; i2++)
-      o2[i2] = arguments[i2];
-    n2 && clearTimeout(n2), n2 = setTimeout(function() {
-      return e2.apply(void 0, o2);
-    }, t2);
-  };
-}
-function Xe(e2, t2) {
+function $e(e2, t2) {
   return function(e3) {
-    if (Array.isArray(e3))
-      return e3;
+    if (Array.isArray(e3)) return e3;
   }(e2) || function(e3, t3) {
     var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
     if (null != n2) {
-      var r2, o2, i2, c2, a2 = [], u2 = true, l2 = false;
+      var r2, o2, i2 = [], c2 = true, a2 = false;
       try {
-        if (i2 = (n2 = n2.call(e3)).next, 0 === t3)
-          ;
-        else
-          for (; !(u2 = (r2 = i2.call(n2)).done) && (a2.push(r2.value), a2.length !== t3); u2 = true)
-            ;
+        for (n2 = n2.call(e3); !(c2 = (r2 = n2.next()).done) && (i2.push(r2.value), !t3 || i2.length !== t3); c2 = true) ;
       } catch (e4) {
-        l2 = true, o2 = e4;
+        a2 = true, o2 = e4;
       } finally {
         try {
-          if (!u2 && null != n2.return && (c2 = n2.return(), Object(c2) !== c2))
-            return;
+          c2 || null == n2.return || n2.return();
         } finally {
-          if (l2)
-            throw o2;
+          if (a2) throw o2;
         }
       }
-      return a2;
+      return i2;
     }
-  }(e2, t2) || function(e3, t3) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return et(e3, t3);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return et(e3, t3);
-  }(e2, t2) || function() {
+  }(e2, t2) || Ze(e2, t2) || function() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }();
 }
-function et(e2, t2) {
+function Ze(e2, t2) {
+  if (e2) {
+    if ("string" == typeof e2) return Qe(e2, t2);
+    var n2 = Object.prototype.toString.call(e2).slice(8, -1);
+    return "Object" === n2 && e2.constructor && (n2 = e2.constructor.name), "Map" === n2 || "Set" === n2 ? Array.from(e2) : "Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2) ? Qe(e2, t2) : void 0;
+  }
+}
+function Qe(e2, t2) {
   (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) r2[n2] = e2[n2];
   return r2;
 }
+function Ge() {
+  return Fe.createElement("svg", { width: "15", height: "15", className: "DocSearch-Control-Key-Icon" }, Fe.createElement("path", { d: "M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953", strokeWidth: "1.2", stroke: "currentColor", fill: "none", strokeLinecap: "square" }));
+}
+function Ye() {
+  return Fe.createElement("svg", { width: "20", height: "20", className: "DocSearch-Search-Icon", viewBox: "0 0 20 20", "aria-hidden": "true" }, Fe.createElement("path", { d: "M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }));
+}
+var Xe = ["translations"], et = Fe.forwardRef(function(e2, t2) {
+  var n2 = e2.translations, r2 = void 0 === n2 ? {} : n2, o2 = Je(e2, Xe), i2 = r2.buttonText, c2 = void 0 === i2 ? "Search" : i2, a2 = r2.buttonAriaLabel, u2 = void 0 === a2 ? "Search" : a2, l2 = $e(te(null), 2), s2 = l2[0], f2 = l2[1];
+  return re(function() {
+    "undefined" != typeof navigator && (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? f2("⌘") : f2("Ctrl"));
+  }, []), Fe.createElement("button", ze({ type: "button", className: "DocSearch DocSearch-Button", "aria-label": u2 }, o2, { ref: t2 }), Fe.createElement("span", { className: "DocSearch-Button-Container" }, Fe.createElement(Ye, null), Fe.createElement("span", { className: "DocSearch-Button-Placeholder" }, c2)), Fe.createElement("span", { className: "DocSearch-Button-Keys" }, null !== s2 && Fe.createElement(Fe.Fragment, null, Fe.createElement(tt, { reactsToKey: "Ctrl" === s2 ? "Ctrl" : "Meta" }, "Ctrl" === s2 ? Fe.createElement(Ge, null) : s2), Fe.createElement(tt, { reactsToKey: "k" }, "K"))));
+});
 function tt(e2) {
-  return tt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
-  } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, tt(e2);
+  var t2 = e2.reactsToKey, n2 = e2.children, r2 = $e(te(false), 2), o2 = r2[0], i2 = r2[1];
+  return re(function() {
+    if (t2) return window.addEventListener("keydown", e3), window.addEventListener("keyup", n3), function() {
+      window.removeEventListener("keydown", e3), window.removeEventListener("keyup", n3);
+    };
+    function e3(e4) {
+      e4.key === t2 && i2(true);
+    }
+    function n3(e4) {
+      e4.key !== t2 && "Meta" !== e4.key || i2(false);
+    }
+  }, [t2]), Fe.createElement("kbd", { className: o2 ? "DocSearch-Button-Key DocSearch-Button-Key--pressed" : "DocSearch-Button-Key" }, n2);
 }
-function nt(e2) {
-  var t2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : /* @__PURE__ */ new Set();
-  if (!e2 || "object" !== tt(e2))
-    return e2;
-  if (t2.has(e2))
-    return "[Circular]";
-  var n2 = t2.add(e2);
-  return Array.isArray(e2) ? e2.map(function(e3) {
-    return nt(e3, n2);
-  }) : Object.fromEntries(Object.entries(e2).map(function(e3) {
-    var t3 = Xe(e3, 2);
-    return [t3[0], nt(t3[1], n2)];
-  }));
+function nt(e2, t2) {
+  var n2 = void 0;
+  return function() {
+    for (var r2 = arguments.length, o2 = new Array(r2), i2 = 0; i2 < r2; i2++) o2[i2] = arguments[i2];
+    n2 && clearTimeout(n2), n2 = setTimeout(function() {
+      return e2.apply(void 0, o2);
+    }, t2);
+  };
 }
 function rt(e2) {
   return e2.reduce(function(e3, t2) {
@@ -14256,141 +14295,76 @@ function it(e2) {
     return e3 + t2.items.length;
   }, 0);
 }
-function ct(e2, t2) {
-  if (!e2)
-    throw new Error("[Autocomplete] ".concat("function" == typeof t2 ? t2() : t2));
-}
-function at(e2) {
+function ct(e2) {
   return e2 !== Object(e2);
 }
-function ut(e2, t2) {
-  if (e2 === t2)
-    return true;
-  if (at(e2) || at(t2) || "function" == typeof e2 || "function" == typeof t2)
-    return e2 === t2;
-  if (Object.keys(e2).length !== Object.keys(t2).length)
-    return false;
+function at(e2, t2) {
+  if (e2 === t2) return true;
+  if (ct(e2) || ct(t2) || "function" == typeof e2 || "function" == typeof t2) return e2 === t2;
+  if (Object.keys(e2).length !== Object.keys(t2).length) return false;
   for (var n2 = 0, r2 = Object.keys(e2); n2 < r2.length; n2++) {
     var o2 = r2[n2];
-    if (!(o2 in t2))
-      return false;
-    if (!ut(e2[o2], t2[o2]))
-      return false;
+    if (!(o2 in t2)) return false;
+    if (!at(e2[o2], t2[o2])) return false;
   }
   return true;
 }
-var lt = function() {
-};
-var st = [{ segment: "autocomplete-core", version: "1.9.3" }], ft = { current: {} };
-function pt(e2) {
+var ut = function() {
+}, lt = [{ segment: "autocomplete-core", version: "1.9.3" }];
+function st(e2) {
   var t2 = e2.item, n2 = e2.items;
   return { index: t2.__autocomplete_indexName, items: [t2], positions: [1 + n2.findIndex(function(e3) {
     return e3.objectID === t2.objectID;
   })], queryID: t2.__autocomplete_queryID, algoliaSource: ["autocomplete"] };
 }
-function mt(e2, t2) {
-  return function(e3) {
-    if (Array.isArray(e3))
-      return e3;
-  }(e2) || function(e3, t3) {
-    var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
-    if (null != n2) {
-      var r2, o2, i2, c2, a2 = [], u2 = true, l2 = false;
-      try {
-        if (i2 = (n2 = n2.call(e3)).next, 0 === t3)
-          ;
-        else
-          for (; !(u2 = (r2 = i2.call(n2)).done) && (a2.push(r2.value), a2.length !== t3); u2 = true)
-            ;
-      } catch (e4) {
-        l2 = true, o2 = e4;
-      } finally {
-        try {
-          if (!u2 && null != n2.return && (c2 = n2.return(), Object(c2) !== c2))
-            return;
-        } finally {
-          if (l2)
-            throw o2;
-        }
-      }
-      return a2;
-    }
-  }(e2, t2) || function(e3, t3) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return vt(e3, t3);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return vt(e3, t3);
-  }(e2, t2) || function() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }();
-}
-function vt(e2, t2) {
+function ft(e2, t2) {
   (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) r2[n2] = e2[n2];
   return r2;
 }
-var dt = ["items"], yt = ["items"];
-function ht(e2) {
-  return ht = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+var pt = ["items"], mt = ["items"];
+function vt(e2) {
+  return vt = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, ht(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, vt(e2);
 }
-function bt(e2) {
+function dt(e2) {
   return function(e3) {
-    if (Array.isArray(e3))
-      return gt(e3);
+    if (Array.isArray(e3)) return ht(e3);
   }(e2) || function(e3) {
-    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"])
-      return Array.from(e3);
+    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"]) return Array.from(e3);
   }(e2) || function(e3, t2) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return gt(e3, t2);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return gt(e3, t2);
+    if (e3) {
+      if ("string" == typeof e3) return ht(e3, t2);
+      var n2 = Object.prototype.toString.call(e3).slice(8, -1);
+      return "Object" === n2 && e3.constructor && (n2 = e3.constructor.name), "Map" === n2 || "Set" === n2 ? Array.from(e3) : "Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2) ? ht(e3, t2) : void 0;
+    }
   }(e2) || function() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }();
 }
-function gt(e2, t2) {
+function ht(e2, t2) {
   (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) r2[n2] = e2[n2];
   return r2;
 }
-function _t(e2, t2) {
-  if (null == e2)
-    return {};
+function yt(e2, t2) {
+  if (null == e2) return {};
   var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
+    if (null == e3) return {};
     var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
+    for (r3 = 0; r3 < i3.length; r3++) n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
     return o3;
   }(e2, t2);
   if (Object.getOwnPropertySymbols) {
     var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
+    for (r2 = 0; r2 < i2.length; r2++) n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
   }
   return o2;
 }
-function Ot(e2, t2) {
+function _t(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -14400,105 +14374,45 @@ function Ot(e2, t2) {
   }
   return n2;
 }
-function St(e2) {
+function bt(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? Ot(Object(n2), true).forEach(function(t3) {
-      wt(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Ot(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? _t(Object(n2), true).forEach(function(t3) {
+      gt(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : _t(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function wt(e2, t2, n2) {
+function gt(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== ht(e4) || null === e4)
-        return e4;
+      if ("object" !== vt(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== ht(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== vt(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === ht(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === vt(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function jt(e2) {
-  for (var t2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 20, n2 = [], r2 = 0; r2 < e2.objectIDs.length; r2 += t2)
-    n2.push(St(St({}, e2), {}, { objectIDs: e2.objectIDs.slice(r2, r2 + t2) }));
+function St(e2) {
+  for (var t2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 20, n2 = [], r2 = 0; r2 < e2.objectIDs.length; r2 += t2) n2.push(bt(bt({}, e2), {}, { objectIDs: e2.objectIDs.slice(r2, r2 + t2) }));
   return n2;
 }
-function Et(e2) {
+function Ot(e2) {
   return e2.map(function(e3) {
-    var t2 = e3.items, n2 = _t(e3, dt);
-    return St(St({}, n2), {}, { objectIDs: (null == t2 ? void 0 : t2.map(function(e4) {
+    var t2 = e3.items, n2 = yt(e3, pt);
+    return bt(bt({}, n2), {}, { objectIDs: (null == t2 ? void 0 : t2.map(function(e4) {
       return e4.objectID;
     })) || n2.objectIDs });
   });
 }
-function Pt(e2) {
-  var t2, n2, r2, o2 = (t2 = mt((e2.version || "").split(".").map(Number), 2), n2 = t2[0], r2 = t2[1], n2 >= 3 || 2 === n2 && r2 >= 4 || 1 === n2 && r2 >= 10);
-  function i2(t3, n3, r3) {
-    if (o2 && void 0 !== r3) {
-      var i3 = r3[0].__autocomplete_algoliaCredentials, c2 = { "X-Algolia-Application-Id": i3.appId, "X-Algolia-API-Key": i3.apiKey };
-      e2.apply(void 0, [t3].concat(bt(n3), [{ headers: c2 }]));
-    } else
-      e2.apply(void 0, [t3].concat(bt(n3)));
-  }
-  return { init: function(t3, n3) {
-    e2("init", { appId: t3, apiKey: n3 });
-  }, setUserToken: function(t3) {
-    e2("setUserToken", t3);
-  }, clickedObjectIDsAfterSearch: function() {
-    for (var e3 = arguments.length, t3 = new Array(e3), n3 = 0; n3 < e3; n3++)
-      t3[n3] = arguments[n3];
-    t3.length > 0 && i2("clickedObjectIDsAfterSearch", Et(t3), t3[0].items);
-  }, clickedObjectIDs: function() {
-    for (var e3 = arguments.length, t3 = new Array(e3), n3 = 0; n3 < e3; n3++)
-      t3[n3] = arguments[n3];
-    t3.length > 0 && i2("clickedObjectIDs", Et(t3), t3[0].items);
-  }, clickedFilters: function() {
-    for (var t3 = arguments.length, n3 = new Array(t3), r3 = 0; r3 < t3; r3++)
-      n3[r3] = arguments[r3];
-    n3.length > 0 && e2.apply(void 0, ["clickedFilters"].concat(n3));
-  }, convertedObjectIDsAfterSearch: function() {
-    for (var e3 = arguments.length, t3 = new Array(e3), n3 = 0; n3 < e3; n3++)
-      t3[n3] = arguments[n3];
-    t3.length > 0 && i2("convertedObjectIDsAfterSearch", Et(t3), t3[0].items);
-  }, convertedObjectIDs: function() {
-    for (var e3 = arguments.length, t3 = new Array(e3), n3 = 0; n3 < e3; n3++)
-      t3[n3] = arguments[n3];
-    t3.length > 0 && i2("convertedObjectIDs", Et(t3), t3[0].items);
-  }, convertedFilters: function() {
-    for (var t3 = arguments.length, n3 = new Array(t3), r3 = 0; r3 < t3; r3++)
-      n3[r3] = arguments[r3];
-    n3.length > 0 && e2.apply(void 0, ["convertedFilters"].concat(n3));
-  }, viewedObjectIDs: function() {
-    for (var e3 = arguments.length, t3 = new Array(e3), n3 = 0; n3 < e3; n3++)
-      t3[n3] = arguments[n3];
-    t3.length > 0 && t3.reduce(function(e4, t4) {
-      var n4 = t4.items, r3 = _t(t4, yt);
-      return [].concat(bt(e4), bt(jt(St(St({}, r3), {}, { objectIDs: (null == n4 ? void 0 : n4.map(function(e5) {
-        return e5.objectID;
-      })) || r3.objectIDs })).map(function(e5) {
-        return { items: n4, payload: e5 };
-      })));
-    }, []).forEach(function(e4) {
-      var t4 = e4.items;
-      return i2("viewedObjectIDs", [e4.payload], t4);
-    });
-  }, viewedFilters: function() {
-    for (var t3 = arguments.length, n3 = new Array(t3), r3 = 0; r3 < t3; r3++)
-      n3[r3] = arguments[r3];
-    n3.length > 0 && e2.apply(void 0, ["viewedFilters"].concat(n3));
-  } };
-}
-function It(e2) {
+function wt(e2) {
   var t2 = e2.items.reduce(function(e3, t3) {
     var n2;
     return e3[t3.__autocomplete_indexName] = (null !== (n2 = e3[t3.__autocomplete_indexName]) && void 0 !== n2 ? n2 : []).concat(t3), e3;
@@ -14507,45 +14421,37 @@ function It(e2) {
     return { index: e3, items: t2[e3], algoliaSource: ["autocomplete"] };
   });
 }
-function Dt(e2) {
+function Et(e2) {
   return e2.objectID && e2.__autocomplete_indexName && e2.__autocomplete_queryID;
 }
-function kt(e2) {
-  return kt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function jt(e2) {
+  return jt = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, kt(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, jt(e2);
 }
-function At(e2) {
+function Pt(e2) {
   return function(e3) {
-    if (Array.isArray(e3))
-      return Ct(e3);
+    if (Array.isArray(e3)) return It(e3);
   }(e2) || function(e3) {
-    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"])
-      return Array.from(e3);
+    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"]) return Array.from(e3);
   }(e2) || function(e3, t2) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return Ct(e3, t2);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return Ct(e3, t2);
+    if (e3) {
+      if ("string" == typeof e3) return It(e3, t2);
+      var n2 = Object.prototype.toString.call(e3).slice(8, -1);
+      return "Object" === n2 && e3.constructor && (n2 = e3.constructor.name), "Map" === n2 || "Set" === n2 ? Array.from(e3) : "Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2) ? It(e3, t2) : void 0;
+    }
   }(e2) || function() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }();
 }
-function Ct(e2, t2) {
+function It(e2, t2) {
   (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) r2[n2] = e2[n2];
   return r2;
 }
-function Nt(e2, t2) {
+function Dt(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -14555,119 +14461,181 @@ function Nt(e2, t2) {
   }
   return n2;
 }
-function xt(e2) {
+function kt(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? Nt(Object(n2), true).forEach(function(t3) {
-      Tt(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Nt(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? Dt(Object(n2), true).forEach(function(t3) {
+      Ct(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Dt(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function Tt(e2, t2, n2) {
+function Ct(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== kt(e4) || null === e4)
-        return e4;
+      if ("object" !== jt(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== kt(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== jt(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === kt(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === jt(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-var Rt = "https://cdn.jsdelivr.net/npm/search-insights@".concat("2.6.0", "/dist/search-insights.min.js"), qt = Ge(function(e2) {
+var At = "https://cdn.jsdelivr.net/npm/search-insights@".concat("2.6.0", "/dist/search-insights.min.js"), xt = nt(function(e2) {
   var t2 = e2.onItemsChange, n2 = e2.items, r2 = e2.insights, o2 = e2.state;
-  t2({ insights: r2, insightsEvents: It({ items: n2 }).map(function(e3) {
-    return xt({ eventName: "Items Viewed" }, e3);
+  t2({ insights: r2, insightsEvents: wt({ items: n2 }).map(function(e3) {
+    return kt({ eventName: "Items Viewed" }, e3);
   }), state: o2 });
 }, 400);
-function Lt(e2) {
+function Nt(e2) {
   var t2 = function(e3) {
-    return xt({ onItemsChange: function(e4) {
+    return kt({ onItemsChange: function(e4) {
       var t3 = e4.insights, n3 = e4.insightsEvents;
-      t3.viewedObjectIDs.apply(t3, At(n3.map(function(e5) {
-        return xt(xt({}, e5), {}, { algoliaSource: [].concat(At(e5.algoliaSource || []), ["autocomplete-internal"]) });
+      t3.viewedObjectIDs.apply(t3, Pt(n3.map(function(e5) {
+        return kt(kt({}, e5), {}, { algoliaSource: [].concat(Pt(e5.algoliaSource || []), ["autocomplete-internal"]) });
       })));
     }, onSelect: function(e4) {
       var t3 = e4.insights, n3 = e4.insightsEvents;
-      t3.clickedObjectIDsAfterSearch.apply(t3, At(n3.map(function(e5) {
-        return xt(xt({}, e5), {}, { algoliaSource: [].concat(At(e5.algoliaSource || []), ["autocomplete-internal"]) });
+      t3.clickedObjectIDsAfterSearch.apply(t3, Pt(n3.map(function(e5) {
+        return kt(kt({}, e5), {}, { algoliaSource: [].concat(Pt(e5.algoliaSource || []), ["autocomplete-internal"]) });
       })));
-    }, onActive: lt }, e3);
+    }, onActive: ut }, e3);
   }(e2), n2 = t2.insightsClient, r2 = t2.onItemsChange, o2 = t2.onSelect, i2 = t2.onActive, c2 = n2;
-  n2 || function(e3) {
-    if ("undefined" != typeof window)
-      e3({ window });
-  }(function(e3) {
-    var t3 = e3.window, n3 = t3.AlgoliaAnalyticsObject || "aa";
+  n2 || "undefined" != typeof window && function(e3) {
+    var t3 = { window }.window, n3 = t3.AlgoliaAnalyticsObject || "aa";
     "string" == typeof n3 && (c2 = t3[n3]), c2 || (t3.AlgoliaAnalyticsObject = n3, t3[n3] || (t3[n3] = function() {
       t3[n3].queue || (t3[n3].queue = []);
-      for (var e4 = arguments.length, r3 = new Array(e4), o3 = 0; o3 < e4; o3++)
-        r3[o3] = arguments[o3];
+      for (var e4 = arguments.length, r3 = new Array(e4), o3 = 0; o3 < e4; o3++) r3[o3] = arguments[o3];
       t3[n3].queue.push(r3);
     }), t3[n3].version = "2.6.0", c2 = t3[n3], function(e4) {
       var t4 = "[Autocomplete]: Could not load search-insights.js. Please load it manually following https://alg.li/insights-autocomplete";
       try {
         var n4 = e4.document.createElement("script");
-        n4.async = true, n4.src = Rt, n4.onerror = function() {
+        n4.async = true, n4.src = At, n4.onerror = function() {
           console.error(t4);
         }, document.body.appendChild(n4);
       } catch (e5) {
         console.error(t4);
       }
     }(t3));
-  });
-  var a2 = Pt(c2), u2 = { current: [] }, l2 = Ge(function(e3) {
+  }();
+  var a2 = function(e3) {
+    var t3, n3, r3, o3 = (t3 = function(e4, t4) {
+      return function(e5) {
+        if (Array.isArray(e5)) return e5;
+      }(e4) || function(e5, t5) {
+        var n4 = null == e5 ? null : "undefined" != typeof Symbol && e5[Symbol.iterator] || e5["@@iterator"];
+        if (null != n4) {
+          var r4, o4, i4, c3, a3 = [], u3 = true, l3 = false;
+          try {
+            for (i4 = (n4 = n4.call(e5)).next; !(u3 = (r4 = i4.call(n4)).done) && (a3.push(r4.value), 2 !== a3.length); u3 = true) ;
+          } catch (e6) {
+            l3 = true, o4 = e6;
+          } finally {
+            try {
+              if (!u3 && null != n4.return && (c3 = n4.return(), Object(c3) !== c3)) return;
+            } finally {
+              if (l3) throw o4;
+            }
+          }
+          return a3;
+        }
+      }(e4) || function(e5, t5) {
+        if (e5) {
+          if ("string" == typeof e5) return ft(e5, 2);
+          var n4 = Object.prototype.toString.call(e5).slice(8, -1);
+          return "Object" === n4 && e5.constructor && (n4 = e5.constructor.name), "Map" === n4 || "Set" === n4 ? Array.from(e5) : "Arguments" === n4 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n4) ? ft(e5, 2) : void 0;
+        }
+      }(e4) || function() {
+        throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      }();
+    }((e3.version || "").split(".").map(Number)), n3 = t3[0], r3 = t3[1], n3 >= 3 || 2 === n3 && r3 >= 4 || 1 === n3 && r3 >= 10);
+    function i3(t4, n4, r4) {
+      if (o3 && void 0 !== r4) {
+        var i4 = r4[0].__autocomplete_algoliaCredentials, c3 = { "X-Algolia-Application-Id": i4.appId, "X-Algolia-API-Key": i4.apiKey };
+        e3.apply(void 0, [t4].concat(dt(n4), [{ headers: c3 }]));
+      } else e3.apply(void 0, [t4].concat(dt(n4)));
+    }
+    return { init: function(t4, n4) {
+      e3("init", { appId: t4, apiKey: n4 });
+    }, setUserToken: function(t4) {
+      e3("setUserToken", t4);
+    }, clickedObjectIDsAfterSearch: function() {
+      for (var e4 = arguments.length, t4 = new Array(e4), n4 = 0; n4 < e4; n4++) t4[n4] = arguments[n4];
+      t4.length > 0 && i3("clickedObjectIDsAfterSearch", Ot(t4), t4[0].items);
+    }, clickedObjectIDs: function() {
+      for (var e4 = arguments.length, t4 = new Array(e4), n4 = 0; n4 < e4; n4++) t4[n4] = arguments[n4];
+      t4.length > 0 && i3("clickedObjectIDs", Ot(t4), t4[0].items);
+    }, clickedFilters: function() {
+      for (var t4 = arguments.length, n4 = new Array(t4), r4 = 0; r4 < t4; r4++) n4[r4] = arguments[r4];
+      n4.length > 0 && e3.apply(void 0, ["clickedFilters"].concat(n4));
+    }, convertedObjectIDsAfterSearch: function() {
+      for (var e4 = arguments.length, t4 = new Array(e4), n4 = 0; n4 < e4; n4++) t4[n4] = arguments[n4];
+      t4.length > 0 && i3("convertedObjectIDsAfterSearch", Ot(t4), t4[0].items);
+    }, convertedObjectIDs: function() {
+      for (var e4 = arguments.length, t4 = new Array(e4), n4 = 0; n4 < e4; n4++) t4[n4] = arguments[n4];
+      t4.length > 0 && i3("convertedObjectIDs", Ot(t4), t4[0].items);
+    }, convertedFilters: function() {
+      for (var t4 = arguments.length, n4 = new Array(t4), r4 = 0; r4 < t4; r4++) n4[r4] = arguments[r4];
+      n4.length > 0 && e3.apply(void 0, ["convertedFilters"].concat(n4));
+    }, viewedObjectIDs: function() {
+      for (var e4 = arguments.length, t4 = new Array(e4), n4 = 0; n4 < e4; n4++) t4[n4] = arguments[n4];
+      t4.length > 0 && t4.reduce(function(e5, t5) {
+        var n5 = t5.items, r4 = yt(t5, mt);
+        return [].concat(dt(e5), dt(St(bt(bt({}, r4), {}, { objectIDs: (null == n5 ? void 0 : n5.map(function(e6) {
+          return e6.objectID;
+        })) || r4.objectIDs })).map(function(e6) {
+          return { items: n5, payload: e6 };
+        })));
+      }, []).forEach(function(e5) {
+        var t5 = e5.items;
+        return i3("viewedObjectIDs", [e5.payload], t5);
+      });
+    }, viewedFilters: function() {
+      for (var t4 = arguments.length, n4 = new Array(t4), r4 = 0; r4 < t4; r4++) n4[r4] = arguments[r4];
+      n4.length > 0 && e3.apply(void 0, ["viewedFilters"].concat(n4));
+    } };
+  }(c2), u2 = { current: [] }, l2 = nt(function(e3) {
     var t3 = e3.state;
     if (t3.isOpen) {
       var n3 = t3.collections.reduce(function(e4, t4) {
-        return [].concat(At(e4), At(t4.items));
-      }, []).filter(Dt);
-      ut(u2.current.map(function(e4) {
+        return [].concat(Pt(e4), Pt(t4.items));
+      }, []).filter(Et);
+      at(u2.current.map(function(e4) {
         return e4.objectID;
       }), n3.map(function(e4) {
         return e4.objectID;
-      })) || (u2.current = n3, n3.length > 0 && qt({ onItemsChange: r2, items: n3, insights: a2, state: t3 }));
+      })) || (u2.current = n3, n3.length > 0 && xt({ onItemsChange: r2, items: n3, insights: a2, state: t3 }));
     }
   }, 0);
   return { name: "aa.algoliaInsightsPlugin", subscribe: function(e3) {
     var t3 = e3.setContext, n3 = e3.onSelect, r3 = e3.onActive;
     c2("addAlgoliaAgent", "insights-plugin"), t3({ algoliaInsightsPlugin: { __algoliaSearchParameters: { clickAnalytics: true }, insights: a2 } }), n3(function(e4) {
       var t4 = e4.item, n4 = e4.state, r4 = e4.event;
-      Dt(t4) && o2({ state: n4, event: r4, insights: a2, item: t4, insightsEvents: [xt({ eventName: "Item Selected" }, pt({ item: t4, items: u2.current }))] });
+      Et(t4) && o2({ state: n4, event: r4, insights: a2, item: t4, insightsEvents: [kt({ eventName: "Item Selected" }, st({ item: t4, items: u2.current }))] });
     }), r3(function(e4) {
       var t4 = e4.item, n4 = e4.state, r4 = e4.event;
-      Dt(t4) && i2({ state: n4, event: r4, insights: a2, item: t4, insightsEvents: [xt({ eventName: "Item Active" }, pt({ item: t4, items: u2.current }))] });
+      Et(t4) && i2({ state: n4, event: r4, insights: a2, item: t4, insightsEvents: [kt({ eventName: "Item Active" }, st({ item: t4, items: u2.current }))] });
     });
   }, onStateChange: function(e3) {
     var t3 = e3.state;
     l2({ state: t3 });
   }, __autocomplete_pluginOptions: e2 };
 }
-function Mt(e2) {
-  (function(e3, t2) {
-    if (!e3) {
-      var n2 = t2.trim();
-      ft.current[n2] || (ft.current[n2] = true, console.warn("[Autocomplete] ".concat(n2)));
-    }
-  })(!e2.debug, "The `debug` option is meant for development debugging and should not be used in production.");
-}
-function Ht(e2, t2) {
+function Tt(e2, t2) {
   var n2 = t2;
   return { then: function(t3, r2) {
-    return Ht(e2.then(Ft(t3, n2, e2), Ft(r2, n2, e2)), n2);
+    return Tt(e2.then(qt(t3, n2, e2), qt(r2, n2, e2)), n2);
   }, catch: function(t3) {
-    return Ht(e2.catch(Ft(t3, n2, e2)), n2);
+    return Tt(e2.catch(qt(t3, n2, e2)), n2);
   }, finally: function(t3) {
-    return t3 && n2.onCancelList.push(t3), Ht(e2.finally(Ft(t3 && function() {
+    return t3 && n2.onCancelList.push(t3), Tt(e2.finally(qt(t3 && function() {
       return n2.onCancelList = [], t3();
     }, n2, e2)), n2);
   }, cancel: function() {
@@ -14680,23 +14648,21 @@ function Ht(e2, t2) {
     return true === n2.isCanceled;
   } };
 }
-function Ut(e2) {
-  return Ht(e2, { isCanceled: false, onCancelList: [] });
+function Rt(e2) {
+  return Tt(e2, { isCanceled: false, onCancelList: [] });
 }
-function Ft(e2, t2, n2) {
+function qt(e2, t2, n2) {
   return e2 ? function(n3) {
     return t2.isCanceled ? n3 : e2(n3);
   } : n2;
 }
-function Bt(e2, t2, n2, r2) {
-  if (!n2)
-    return null;
-  if (e2 < 0 && (null === t2 || null !== r2 && 0 === t2))
-    return n2 + e2;
+function Lt(e2, t2, n2, r2) {
+  if (!n2) return null;
+  if (e2 < 0 && (null === t2 || null !== r2 && 0 === t2)) return n2 + e2;
   var o2 = (null === t2 ? -1 : t2) + e2;
   return o2 <= -1 || o2 >= n2 ? null === r2 ? null : 0 : o2;
 }
-function Vt(e2, t2) {
+function Mt(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -14706,42 +14672,40 @@ function Vt(e2, t2) {
   }
   return n2;
 }
-function Kt(e2) {
+function Ht(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? Vt(Object(n2), true).forEach(function(t3) {
-      Wt(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Vt(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? Mt(Object(n2), true).forEach(function(t3) {
+      Ut(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Mt(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function Wt(e2, t2, n2) {
+function Ut(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== zt(e4) || null === e4)
-        return e4;
+      if ("object" !== Ft(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== zt(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== Ft(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === zt(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === Ft(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function zt(e2) {
-  return zt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function Ft(e2) {
+  return Ft = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, zt(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, Ft(e2);
 }
-function Jt(e2) {
+function Bt(e2) {
   var t2 = function(e3) {
     var t3 = e3.collections.map(function(e4) {
       return e4.items.length;
@@ -14753,8 +14717,7 @@ function Jt(e2) {
     }, 0);
     return e3.collections[t3];
   }(e2);
-  if (!t2)
-    return null;
+  if (!t2) return null;
   var n2 = t2.items[function(e3) {
     for (var t3 = e3.state, n3 = e3.collection, r3 = false, o2 = 0, i2 = 0; false === r3; ) {
       var c2 = t3.collections[o2];
@@ -14768,15 +14731,15 @@ function Jt(e2) {
   }({ state: e2, collection: t2 })], r2 = t2.source;
   return { item: n2, itemInputValue: r2.getItemInputValue({ item: n2, state: e2 }), itemUrl: r2.getItemUrl({ item: n2, state: e2 }), source: r2 };
 }
-var $t = /((gt|sm)-|galaxy nexus)|samsung[- ]|samsungbrowser/i;
-function Qt(e2) {
-  return Qt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+var Vt = /((gt|sm)-|galaxy nexus)|samsung[- ]|samsungbrowser/i;
+function Kt(e2) {
+  return Kt = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, Qt(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, Kt(e2);
 }
-function Zt(e2, t2) {
+function Wt(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -14786,62 +14749,29 @@ function Zt(e2, t2) {
   }
   return n2;
 }
-function Yt(e2, t2, n2) {
+function zt(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== Qt(e4) || null === e4)
-        return e4;
+      if ("object" !== Kt(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== Qt(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== Kt(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === Qt(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === Kt(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function Gt(e2, t2, n2) {
-  var r2, o2 = t2.initialState;
-  return { getState: function() {
-    return o2;
-  }, dispatch: function(r3, i2) {
-    var c2 = function(e3) {
-      for (var t3 = 1; t3 < arguments.length; t3++) {
-        var n3 = null != arguments[t3] ? arguments[t3] : {};
-        t3 % 2 ? Zt(Object(n3), true).forEach(function(t4) {
-          Yt(e3, t4, n3[t4]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e3, Object.getOwnPropertyDescriptors(n3)) : Zt(Object(n3)).forEach(function(t4) {
-          Object.defineProperty(e3, t4, Object.getOwnPropertyDescriptor(n3, t4));
-        });
-      }
-      return e3;
-    }({}, o2);
-    o2 = e2(o2, { type: r3, props: t2, payload: i2 }), n2({ state: o2, prevState: c2 });
-  }, pendingRequests: (r2 = [], { add: function(e3) {
-    return r2.push(e3), e3.finally(function() {
-      r2 = r2.filter(function(t3) {
-        return t3 !== e3;
-      });
-    });
-  }, cancelAll: function() {
-    r2.forEach(function(e3) {
-      return e3.cancel();
-    });
-  }, isEmpty: function() {
-    return 0 === r2.length;
-  } }) };
-}
-function Xt(e2) {
-  return Xt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function Jt(e2) {
+  return Jt = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, Xt(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, Jt(e2);
 }
-function en(e2, t2) {
+function $t(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -14851,70 +14781,45 @@ function en(e2, t2) {
   }
   return n2;
 }
-function tn(e2) {
+function Zt(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? en(Object(n2), true).forEach(function(t3) {
-      nn(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : en(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? $t(Object(n2), true).forEach(function(t3) {
+      Qt(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : $t(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function nn(e2, t2, n2) {
+function Qt(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== Xt(e4) || null === e4)
-        return e4;
+      if ("object" !== Jt(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== Xt(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== Jt(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === Xt(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === Jt(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function rn(e2) {
-  return rn = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function Gt(e2) {
+  return Gt = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, rn(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, Gt(e2);
 }
-function on(e2) {
-  return function(e3) {
-    if (Array.isArray(e3))
-      return cn(e3);
-  }(e2) || function(e3) {
-    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"])
-      return Array.from(e3);
-  }(e2) || function(e3, t2) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return cn(e3, t2);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return cn(e3, t2);
-  }(e2) || function() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }();
-}
-function cn(e2, t2) {
+function Yt(e2, t2) {
   (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) r2[n2] = e2[n2];
   return r2;
 }
-function an(e2, t2) {
+function Xt(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -14924,128 +14829,40 @@ function an(e2, t2) {
   }
   return n2;
 }
-function un(e2) {
+function en(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? an(Object(n2), true).forEach(function(t3) {
-      ln(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : an(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? Xt(Object(n2), true).forEach(function(t3) {
+      tn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Xt(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function ln(e2, t2, n2) {
+function tn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== rn(e4) || null === e4)
-        return e4;
+      if ("object" !== Gt(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== rn(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== Gt(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === rn(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === Gt(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function sn(e2, t2) {
-  var n2, r2 = "undefined" != typeof window ? window : {}, o2 = e2.plugins || [];
-  return un(un({ debug: false, openOnFocus: false, placeholder: "", autoFocus: false, defaultActiveItemId: null, stallThreshold: 300, insights: false, environment: r2, shouldPanelOpen: function(e3) {
-    return it(e3.state) > 0;
-  }, reshape: function(e3) {
-    return e3.sources;
-  } }, e2), {}, { id: null !== (n2 = e2.id) && void 0 !== n2 ? n2 : "autocomplete-".concat(ot++), plugins: o2, initialState: un({ activeItemId: null, query: "", completion: null, collections: [], isOpen: false, status: "idle", context: {} }, e2.initialState), onStateChange: function(t3) {
-    var n3;
-    null === (n3 = e2.onStateChange) || void 0 === n3 || n3.call(e2, t3), o2.forEach(function(e3) {
-      var n4;
-      return null === (n4 = e3.onStateChange) || void 0 === n4 ? void 0 : n4.call(e3, t3);
-    });
-  }, onSubmit: function(t3) {
-    var n3;
-    null === (n3 = e2.onSubmit) || void 0 === n3 || n3.call(e2, t3), o2.forEach(function(e3) {
-      var n4;
-      return null === (n4 = e3.onSubmit) || void 0 === n4 ? void 0 : n4.call(e3, t3);
-    });
-  }, onReset: function(t3) {
-    var n3;
-    null === (n3 = e2.onReset) || void 0 === n3 || n3.call(e2, t3), o2.forEach(function(e3) {
-      var n4;
-      return null === (n4 = e3.onReset) || void 0 === n4 ? void 0 : n4.call(e3, t3);
-    });
-  }, getSources: function(n3) {
-    return Promise.all([].concat(on(o2.map(function(e3) {
-      return e3.getSources;
-    })), [e2.getSources]).filter(Boolean).map(function(e3) {
-      return function(e4, t3) {
-        var n4 = [];
-        return Promise.resolve(e4(t3)).then(function(e5) {
-          return ct(Array.isArray(e5), function() {
-            return "The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(zt(e5)), ":\n\n").concat(JSON.stringify(nt(e5), null, 2));
-          }), Promise.all(e5.filter(function(e6) {
-            return Boolean(e6);
-          }).map(function(e6) {
-            if (ct("string" == typeof e6.sourceId, "A source must provide a `sourceId` string."), n4.includes(e6.sourceId))
-              throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e6.sourceId), " is not unique."));
-            n4.push(e6.sourceId);
-            var t4 = { getItemInputValue: function(e7) {
-              return e7.state.query;
-            }, getItemUrl: function() {
-            }, onSelect: function(e7) {
-              (0, e7.setIsOpen)(false);
-            }, onActive: lt, onResolve: lt };
-            Object.keys(t4).forEach(function(e7) {
-              t4[e7].__default = true;
-            });
-            var r3 = Kt(Kt({}, t4), e6);
-            return Promise.resolve(r3);
-          }));
-        });
-      }(e3, n3);
-    })).then(function(e3) {
-      return rt(e3);
-    }).then(function(e3) {
-      return e3.map(function(e4) {
-        return un(un({}, e4), {}, { onSelect: function(n4) {
-          e4.onSelect(n4), t2.forEach(function(e5) {
-            var t3;
-            return null === (t3 = e5.onSelect) || void 0 === t3 ? void 0 : t3.call(e5, n4);
-          });
-        }, onActive: function(n4) {
-          e4.onActive(n4), t2.forEach(function(e5) {
-            var t3;
-            return null === (t3 = e5.onActive) || void 0 === t3 ? void 0 : t3.call(e5, n4);
-          });
-        }, onResolve: function(n4) {
-          e4.onResolve(n4), t2.forEach(function(e5) {
-            var t3;
-            return null === (t3 = e5.onResolve) || void 0 === t3 ? void 0 : t3.call(e5, n4);
-          });
-        } });
-      });
-    });
-  }, navigator: un({ navigate: function(e3) {
-    var t3 = e3.itemUrl;
-    r2.location.assign(t3);
-  }, navigateNewTab: function(e3) {
-    var t3 = e3.itemUrl, n3 = r2.open(t3, "_blank", "noopener");
-    null == n3 || n3.focus();
-  }, navigateNewWindow: function(e3) {
-    var t3 = e3.itemUrl;
-    r2.open(t3, "_blank", "noopener");
-  } }, e2.navigator) });
-}
-function fn(e2) {
-  return fn = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function nn(e2) {
+  return nn = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, fn(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, nn(e2);
 }
-function pn(e2, t2) {
+function rn(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15055,42 +14872,40 @@ function pn(e2, t2) {
   }
   return n2;
 }
-function mn(e2) {
+function on(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? pn(Object(n2), true).forEach(function(t3) {
-      vn(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : pn(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? rn(Object(n2), true).forEach(function(t3) {
+      cn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : rn(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function vn(e2, t2, n2) {
+function cn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== fn(e4) || null === e4)
-        return e4;
+      if ("object" !== nn(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== fn(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== nn(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === fn(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === nn(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function dn(e2) {
-  return dn = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function an(e2) {
+  return an = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, dn(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, an(e2);
 }
-function yn(e2, t2) {
+function un(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15100,96 +14915,71 @@ function yn(e2, t2) {
   }
   return n2;
 }
-function hn(e2) {
+function ln(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? yn(Object(n2), true).forEach(function(t3) {
-      bn(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : yn(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? un(Object(n2), true).forEach(function(t3) {
+      sn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : un(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function bn(e2, t2, n2) {
+function sn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== dn(e4) || null === e4)
-        return e4;
+      if ("object" !== an(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== dn(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== an(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === dn(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === an(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function gn(e2) {
+function fn(e2) {
   return function(e3) {
-    if (Array.isArray(e3))
-      return _n(e3);
+    if (Array.isArray(e3)) return pn(e3);
   }(e2) || function(e3) {
-    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"])
-      return Array.from(e3);
+    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"]) return Array.from(e3);
   }(e2) || function(e3, t2) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return _n(e3, t2);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return _n(e3, t2);
+    if (e3) {
+      if ("string" == typeof e3) return pn(e3, t2);
+      var n2 = Object.prototype.toString.call(e3).slice(8, -1);
+      return "Object" === n2 && e3.constructor && (n2 = e3.constructor.name), "Map" === n2 || "Set" === n2 ? Array.from(e3) : "Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2) ? pn(e3, t2) : void 0;
+    }
   }(e2) || function() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }();
 }
-function _n(e2, t2) {
+function pn(e2, t2) {
   (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) r2[n2] = e2[n2];
   return r2;
 }
-function On(e2) {
+function mn(e2) {
   return Boolean(e2.execute);
 }
-function Sn(e2, t2, n2) {
-  if (o2 = e2, Boolean(null == o2 ? void 0 : o2.execute)) {
-    var r2 = "algolia" === e2.requesterId ? Object.assign.apply(Object, [{}].concat(gn(Object.keys(n2.context).map(function(e3) {
-      var t3;
-      return null === (t3 = n2.context[e3]) || void 0 === t3 ? void 0 : t3.__algoliaSearchParameters;
-    })))) : {};
-    return hn(hn({}, e2), {}, { requests: e2.queries.map(function(n3) {
-      return { query: "algolia" === e2.requesterId ? hn(hn({}, n3), {}, { params: hn(hn({}, r2), n3.params) }) : n3, sourceId: t2, transformResponse: e2.transformResponse };
-    }) });
-  }
-  var o2;
-  return { items: e2, sourceId: t2 };
-}
-function wn(e2) {
+function vn(e2) {
   var t2 = e2.reduce(function(e3, t3) {
-    if (!On(t3))
-      return e3.push(t3), e3;
+    if (!mn(t3)) return e3.push(t3), e3;
     var n2 = t3.searchClient, r2 = t3.execute, o2 = t3.requesterId, i2 = t3.requests, c2 = e3.find(function(e4) {
-      return On(t3) && On(e4) && e4.searchClient === n2 && Boolean(o2) && e4.requesterId === o2;
+      return mn(t3) && mn(e4) && e4.searchClient === n2 && Boolean(o2) && e4.requesterId === o2;
     });
     if (c2) {
       var a2;
-      (a2 = c2.items).push.apply(a2, gn(i2));
+      (a2 = c2.items).push.apply(a2, fn(i2));
     } else {
       var u2 = { execute: r2, requesterId: o2, items: i2, searchClient: n2 };
       e3.push(u2);
     }
     return e3;
   }, []).map(function(e3) {
-    if (!On(e3))
-      return Promise.resolve(e3);
+    if (!mn(e3)) return Promise.resolve(e3);
     var t3 = e3, n2 = t3.execute, r2 = t3.items;
     return n2({ searchClient: t3.searchClient, requests: r2 });
   });
@@ -15197,34 +14987,15 @@ function wn(e2) {
     return rt(e3);
   });
 }
-function jn(e2, t2, n2) {
-  return t2.map(function(t3) {
-    var r2, o2 = e2.filter(function(e3) {
-      return e3.sourceId === t3.sourceId;
-    }), i2 = o2.map(function(e3) {
-      return e3.items;
-    }), c2 = o2[0].transformResponse, a2 = c2 ? c2({ results: r2 = i2, hits: r2.map(function(e3) {
-      return e3.hits;
-    }).filter(Boolean), facetHits: r2.map(function(e3) {
-      var t4;
-      return null === (t4 = e3.facetHits) || void 0 === t4 ? void 0 : t4.map(function(e4) {
-        return { label: e4.value, count: e4.count, _highlightResult: { label: { value: e4.highlighted } } };
-      });
-    }).filter(Boolean) }) : i2;
-    return t3.onResolve({ source: t3, results: i2, items: a2, state: n2.getState() }), ct(Array.isArray(a2), function() {
-      return 'The `getItems` function from source "'.concat(t3.sourceId, '" must return an array of items but returned type ').concat(JSON.stringify(dn(a2)), ":\n\n").concat(JSON.stringify(nt(a2), null, 2), ".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems");
-    }), ct(a2.every(Boolean), 'The `getItems` function from source "'.concat(t3.sourceId, '" must return an array of items but returned ').concat(JSON.stringify(void 0), ".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems")), { source: t3, items: a2 };
-  });
-}
-function En(e2) {
-  return En = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function dn(e2) {
+  return dn = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, En(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, dn(e2);
 }
-var Pn = ["event", "nextState", "props", "query", "refresh", "store"];
-function In(e2, t2) {
+var hn = ["event", "nextState", "props", "query", "refresh", "store"];
+function yn(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15234,92 +15005,113 @@ function In(e2, t2) {
   }
   return n2;
 }
-function Dn(e2) {
+function _n(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? In(Object(n2), true).forEach(function(t3) {
-      kn(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : In(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? yn(Object(n2), true).forEach(function(t3) {
+      bn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : yn(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function kn(e2, t2, n2) {
+function bn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== En(e4) || null === e4)
-        return e4;
+      if ("object" !== dn(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== En(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== dn(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === En(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === dn(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function An(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-var Cn, Nn, xn, Tn = null, Rn = (Cn = -1, Nn = -1, xn = void 0, function(e2) {
-  var t2 = ++Cn;
+var gn, Sn, On, wn = null, En = (gn = -1, Sn = -1, On = void 0, function(e2) {
+  var t2 = ++gn;
   return Promise.resolve(e2).then(function(e3) {
-    return xn && t2 < Nn ? xn : (Nn = t2, xn = e3, e3);
+    return On && t2 < Sn ? On : (Sn = t2, On = e3, e3);
   });
 });
-function qn(e2) {
-  var t2 = e2.event, n2 = e2.nextState, r2 = void 0 === n2 ? {} : n2, o2 = e2.props, i2 = e2.query, c2 = e2.refresh, a2 = e2.store, u2 = An(e2, Pn);
-  Tn && o2.environment.clearTimeout(Tn);
+function jn(e2) {
+  var t2 = e2.event, n2 = e2.nextState, r2 = void 0 === n2 ? {} : n2, o2 = e2.props, i2 = e2.query, c2 = e2.refresh, a2 = e2.store, u2 = function(e3, t3) {
+    if (null == e3) return {};
+    var n3, r3, o3 = function(e4, t4) {
+      if (null == e4) return {};
+      var n4, r4, o4 = {}, i4 = Object.keys(e4);
+      for (r4 = 0; r4 < i4.length; r4++) n4 = i4[r4], t4.indexOf(n4) >= 0 || (o4[n4] = e4[n4]);
+      return o4;
+    }(e3, t3);
+    if (Object.getOwnPropertySymbols) {
+      var i3 = Object.getOwnPropertySymbols(e3);
+      for (r3 = 0; r3 < i3.length; r3++) n3 = i3[r3], t3.indexOf(n3) >= 0 || Object.prototype.propertyIsEnumerable.call(e3, n3) && (o3[n3] = e3[n3]);
+    }
+    return o3;
+  }(e2, hn);
+  wn && o2.environment.clearTimeout(wn);
   var l2 = u2.setCollections, s2 = u2.setIsOpen, f2 = u2.setQuery, p2 = u2.setActiveItemId, m2 = u2.setStatus;
   if (f2(i2), p2(o2.defaultActiveItemId), !i2 && false === o2.openOnFocus) {
     var v2, d2 = a2.getState().collections.map(function(e3) {
-      return Dn(Dn({}, e3), {}, { items: [] });
+      return _n(_n({}, e3), {}, { items: [] });
     });
     m2("idle"), l2(d2), s2(null !== (v2 = r2.isOpen) && void 0 !== v2 ? v2 : o2.shouldPanelOpen({ state: a2.getState() }));
-    var y2 = Ut(Rn(d2).then(function() {
+    var h3 = Rt(En(d2).then(function() {
       return Promise.resolve();
     }));
-    return a2.pendingRequests.add(y2);
+    return a2.pendingRequests.add(h3);
   }
-  m2("loading"), Tn = o2.environment.setTimeout(function() {
+  m2("loading"), wn = o2.environment.setTimeout(function() {
     m2("stalled");
   }, o2.stallThreshold);
-  var h22 = Ut(Rn(o2.getSources(Dn({ query: i2, refresh: c2, state: a2.getState() }, u2)).then(function(e3) {
+  var y2 = Rt(En(o2.getSources(_n({ query: i2, refresh: c2, state: a2.getState() }, u2)).then(function(e3) {
     return Promise.all(e3.map(function(e4) {
-      return Promise.resolve(e4.getItems(Dn({ query: i2, refresh: c2, state: a2.getState() }, u2))).then(function(t3) {
-        return Sn(t3, e4.sourceId, a2.getState());
+      return Promise.resolve(e4.getItems(_n({ query: i2, refresh: c2, state: a2.getState() }, u2))).then(function(t3) {
+        return function(e5, t4, n3) {
+          if (o3 = e5, Boolean(null == o3 ? void 0 : o3.execute)) {
+            var r3 = "algolia" === e5.requesterId ? Object.assign.apply(Object, [{}].concat(fn(Object.keys(n3.context).map(function(e6) {
+              var t5;
+              return null === (t5 = n3.context[e6]) || void 0 === t5 ? void 0 : t5.__algoliaSearchParameters;
+            })))) : {};
+            return ln(ln({}, e5), {}, { requests: e5.queries.map(function(n4) {
+              return { query: "algolia" === e5.requesterId ? ln(ln({}, n4), {}, { params: ln(ln({}, r3), n4.params) }) : n4, sourceId: t4, transformResponse: e5.transformResponse };
+            }) });
+          }
+          var o3;
+          return { items: e5, sourceId: t4 };
+        }(t3, e4.sourceId, a2.getState());
       });
-    })).then(wn).then(function(t3) {
-      return jn(t3, e3, a2);
+    })).then(vn).then(function(t3) {
+      return function(e4, t4, n3) {
+        return t4.map(function(t5) {
+          var r3, o3 = e4.filter(function(e5) {
+            return e5.sourceId === t5.sourceId;
+          }), i3 = o3.map(function(e5) {
+            return e5.items;
+          }), c3 = o3[0].transformResponse, a3 = c3 ? c3({ results: r3 = i3, hits: r3.map(function(e5) {
+            return e5.hits;
+          }).filter(Boolean), facetHits: r3.map(function(e5) {
+            var t6;
+            return null === (t6 = e5.facetHits) || void 0 === t6 ? void 0 : t6.map(function(e6) {
+              return { label: e6.value, count: e6.count, _highlightResult: { label: { value: e6.highlighted } } };
+            });
+          }).filter(Boolean) }) : i3;
+          return t5.onResolve({ source: t5, results: i3, items: a3, state: n3.getState() }), a3.every(Boolean), 'The `getItems` function from source "'.concat(t5.sourceId, '" must return an array of items but returned ').concat(JSON.stringify(void 0), ".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"), { source: t5, items: a3 };
+        });
+      }(t3, e3, a2);
     }).then(function(e4) {
       return function(e5) {
-        var t3 = e5.collections, n3 = e5.props, r3 = e5.state, o3 = t3.reduce(function(e6, t4) {
-          return mn(mn({}, e6), {}, vn({}, t4.source.sourceId, mn(mn({}, t4.source), {}, { getItems: function() {
+        var t3 = e5.props, n3 = e5.state, r3 = e5.collections.reduce(function(e6, t4) {
+          return on(on({}, e6), {}, cn({}, t4.source.sourceId, on(on({}, t4.source), {}, { getItems: function() {
             return rt(t4.items);
           } })));
-        }, {}), i3 = n3.plugins.reduce(function(e6, t4) {
+        }, {}), o3 = t3.plugins.reduce(function(e6, t4) {
           return t4.reshape ? t4.reshape(e6) : e6;
-        }, { sourcesBySourceId: o3, state: r3 }).sourcesBySourceId;
-        return rt(n3.reshape({ sourcesBySourceId: i3, sources: Object.values(i3), state: r3 })).filter(Boolean).map(function(e6) {
+        }, { sourcesBySourceId: r3, state: n3 }).sourcesBySourceId;
+        return rt(t3.reshape({ sourcesBySourceId: o3, sources: Object.values(o3), state: n3 })).filter(Boolean).map(function(e6) {
           return { source: e6, items: e6.getItems() };
         });
       }({ collections: e4, props: o2, state: a2.getState() });
@@ -15329,25 +15121,25 @@ function qn(e2) {
     m2("idle"), l2(e3);
     var f3 = o2.shouldPanelOpen({ state: a2.getState() });
     s2(null !== (n3 = r2.isOpen) && void 0 !== n3 ? n3 : o2.openOnFocus && !i2 && f3 || f3);
-    var p3 = Jt(a2.getState());
+    var p3 = Bt(a2.getState());
     if (null !== a2.getState().activeItemId && p3) {
-      var v3 = p3.item, d3 = p3.itemInputValue, y3 = p3.itemUrl, h3 = p3.source;
-      h3.onActive(Dn({ event: t2, item: v3, itemInputValue: d3, itemUrl: y3, refresh: c2, source: h3, state: a2.getState() }, u2));
+      var v3 = p3.item, d3 = p3.itemInputValue, h4 = p3.itemUrl, y3 = p3.source;
+      y3.onActive(_n({ event: t2, item: v3, itemInputValue: d3, itemUrl: h4, refresh: c2, source: y3, state: a2.getState() }, u2));
     }
   }).finally(function() {
-    m2("idle"), Tn && o2.environment.clearTimeout(Tn);
+    m2("idle"), wn && o2.environment.clearTimeout(wn);
   });
-  return a2.pendingRequests.add(h22);
+  return a2.pendingRequests.add(y2);
 }
-function Ln(e2) {
-  return Ln = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function Pn(e2) {
+  return Pn = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, Ln(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, Pn(e2);
 }
-var Mn = ["event", "props", "refresh", "store"];
-function Hn(e2, t2) {
+var In = ["event", "props", "refresh", "store"];
+function Dn(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15357,61 +15149,41 @@ function Hn(e2, t2) {
   }
   return n2;
 }
-function Un(e2) {
+function kn(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? Hn(Object(n2), true).forEach(function(t3) {
-      Fn(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Hn(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? Dn(Object(n2), true).forEach(function(t3) {
+      Cn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Dn(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function Fn(e2, t2, n2) {
+function Cn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== Ln(e4) || null === e4)
-        return e4;
+      if ("object" !== Pn(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== Ln(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== Pn(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === Ln(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === Pn(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function Bn(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-function Vn(e2) {
-  return Vn = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function An(e2) {
+  return An = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, Vn(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, An(e2);
 }
-var Kn = ["props", "refresh", "store"], Wn = ["inputElement", "formElement", "panelElement"], zn = ["inputElement"], Jn = ["inputElement", "maxLength"], $n = ["sourceIndex"], Qn = ["sourceIndex"], Zn = ["item", "source", "sourceIndex"];
-function Yn(e2, t2) {
+var xn = ["props", "refresh", "store"], Nn = ["inputElement", "formElement", "panelElement"], Tn = ["inputElement"], Rn = ["inputElement", "maxLength"], qn = ["sourceIndex"], Ln = ["sourceIndex"], Mn = ["item", "source", "sourceIndex"];
+function Hn(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15421,175 +15193,54 @@ function Yn(e2, t2) {
   }
   return n2;
 }
-function Gn(e2) {
+function Un(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? Yn(Object(n2), true).forEach(function(t3) {
-      Xn(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Yn(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? Hn(Object(n2), true).forEach(function(t3) {
+      Fn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Hn(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function Xn(e2, t2, n2) {
+function Fn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== Vn(e4) || null === e4)
-        return e4;
+      if ("object" !== An(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== Vn(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== An(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === Vn(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === An(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function er(e2, t2) {
-  if (null == e2)
-    return {};
+function Bn(e2, t2) {
+  if (null == e2) return {};
   var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
+    if (null == e3) return {};
     var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
+    for (r3 = 0; r3 < i3.length; r3++) n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
     return o3;
   }(e2, t2);
   if (Object.getOwnPropertySymbols) {
     var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
+    for (r2 = 0; r2 < i2.length; r2++) n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
   }
   return o2;
 }
-function tr(e2) {
-  var t2 = e2.props, n2 = e2.refresh, r2 = e2.store, o2 = er(e2, Kn), i2 = function(e3, t3) {
-    return void 0 !== t3 ? "".concat(e3, "-").concat(t3) : e3;
-  };
-  return { getEnvironmentProps: function(e3) {
-    var n3 = e3.inputElement, o3 = e3.formElement, i3 = e3.panelElement;
-    function c2(e4) {
-      !r2.getState().isOpen && r2.pendingRequests.isEmpty() || e4.target === n3 || false === [o3, i3].some(function(t3) {
-        return n4 = t3, r3 = e4.target, n4 === r3 || n4.contains(r3);
-        var n4, r3;
-      }) && (r2.dispatch("blur", null), t2.debug || r2.pendingRequests.cancelAll());
-    }
-    return Gn({ onTouchStart: c2, onMouseDown: c2, onTouchMove: function(e4) {
-      false !== r2.getState().isOpen && n3 === t2.environment.document.activeElement && e4.target !== n3 && n3.blur();
-    } }, er(e3, Wn));
-  }, getRootProps: function(e3) {
-    return Gn({ role: "combobox", "aria-expanded": r2.getState().isOpen, "aria-haspopup": "listbox", "aria-owns": r2.getState().isOpen ? "".concat(t2.id, "-list") : void 0, "aria-labelledby": "".concat(t2.id, "-label") }, e3);
-  }, getFormProps: function(e3) {
-    e3.inputElement;
-    return Gn({ action: "", noValidate: true, role: "search", onSubmit: function(i3) {
-      var c2;
-      i3.preventDefault(), t2.onSubmit(Gn({ event: i3, refresh: n2, state: r2.getState() }, o2)), r2.dispatch("submit", null), null === (c2 = e3.inputElement) || void 0 === c2 || c2.blur();
-    }, onReset: function(i3) {
-      var c2;
-      i3.preventDefault(), t2.onReset(Gn({ event: i3, refresh: n2, state: r2.getState() }, o2)), r2.dispatch("reset", null), null === (c2 = e3.inputElement) || void 0 === c2 || c2.focus();
-    } }, er(e3, zn));
-  }, getLabelProps: function(e3) {
-    var n3 = e3 || {}, r3 = n3.sourceIndex, o3 = er(n3, $n);
-    return Gn({ htmlFor: "".concat(i2(t2.id, r3), "-input"), id: "".concat(i2(t2.id, r3), "-label") }, o3);
-  }, getInputProps: function(e3) {
-    var i3;
-    function c2(e4) {
-      (t2.openOnFocus || Boolean(r2.getState().query)) && qn(Gn({ event: e4, props: t2, query: r2.getState().completion || r2.getState().query, refresh: n2, store: r2 }, o2)), r2.dispatch("focus", null);
-    }
-    var a2 = e3 || {}, u2 = (a2.inputElement, a2.maxLength), l2 = void 0 === u2 ? 512 : u2, s2 = er(a2, Jn), f2 = Jt(r2.getState()), p2 = function(e4) {
-      return Boolean(e4 && e4.match($t));
-    }((null === (i3 = t2.environment.navigator) || void 0 === i3 ? void 0 : i3.userAgent) || ""), m2 = null != f2 && f2.itemUrl && !p2 ? "go" : "search";
-    return Gn({ "aria-autocomplete": "both", "aria-activedescendant": r2.getState().isOpen && null !== r2.getState().activeItemId ? "".concat(t2.id, "-item-").concat(r2.getState().activeItemId) : void 0, "aria-controls": r2.getState().isOpen ? "".concat(t2.id, "-list") : void 0, "aria-labelledby": "".concat(t2.id, "-label"), value: r2.getState().completion || r2.getState().query, id: "".concat(t2.id, "-input"), autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", enterKeyHint: m2, spellCheck: "false", autoFocus: t2.autoFocus, placeholder: t2.placeholder, maxLength: l2, type: "search", onChange: function(e4) {
-      qn(Gn({ event: e4, props: t2, query: e4.currentTarget.value.slice(0, l2), refresh: n2, store: r2 }, o2));
-    }, onKeyDown: function(e4) {
-      !function(e5) {
-        var t3 = e5.event, n3 = e5.props, r3 = e5.refresh, o3 = e5.store, i4 = Bn(e5, Mn);
-        if ("ArrowUp" === t3.key || "ArrowDown" === t3.key) {
-          var c3 = function() {
-            var e6 = n3.environment.document.getElementById("".concat(n3.id, "-item-").concat(o3.getState().activeItemId));
-            e6 && (e6.scrollIntoViewIfNeeded ? e6.scrollIntoViewIfNeeded(false) : e6.scrollIntoView(false));
-          }, a3 = function() {
-            var e6 = Jt(o3.getState());
-            if (null !== o3.getState().activeItemId && e6) {
-              var n4 = e6.item, c4 = e6.itemInputValue, a4 = e6.itemUrl, u4 = e6.source;
-              u4.onActive(Un({ event: t3, item: n4, itemInputValue: c4, itemUrl: a4, refresh: r3, source: u4, state: o3.getState() }, i4));
-            }
-          };
-          t3.preventDefault(), false === o3.getState().isOpen && (n3.openOnFocus || Boolean(o3.getState().query)) ? qn(Un({ event: t3, props: n3, query: o3.getState().query, refresh: r3, store: o3 }, i4)).then(function() {
-            o3.dispatch(t3.key, { nextActiveItemId: n3.defaultActiveItemId }), a3(), setTimeout(c3, 0);
-          }) : (o3.dispatch(t3.key, {}), a3(), c3());
-        } else if ("Escape" === t3.key)
-          t3.preventDefault(), o3.dispatch(t3.key, null), o3.pendingRequests.cancelAll();
-        else if ("Tab" === t3.key)
-          o3.dispatch("blur", null), o3.pendingRequests.cancelAll();
-        else if ("Enter" === t3.key) {
-          if (null === o3.getState().activeItemId || o3.getState().collections.every(function(e6) {
-            return 0 === e6.items.length;
-          }))
-            return void (n3.debug || o3.pendingRequests.cancelAll());
-          t3.preventDefault();
-          var u3 = Jt(o3.getState()), l3 = u3.item, s3 = u3.itemInputValue, f3 = u3.itemUrl, p3 = u3.source;
-          if (t3.metaKey || t3.ctrlKey)
-            void 0 !== f3 && (p3.onSelect(Un({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p3, state: o3.getState() }, i4)), n3.navigator.navigateNewTab({ itemUrl: f3, item: l3, state: o3.getState() }));
-          else if (t3.shiftKey)
-            void 0 !== f3 && (p3.onSelect(Un({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p3, state: o3.getState() }, i4)), n3.navigator.navigateNewWindow({ itemUrl: f3, item: l3, state: o3.getState() }));
-          else if (t3.altKey)
-            ;
-          else {
-            if (void 0 !== f3)
-              return p3.onSelect(Un({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p3, state: o3.getState() }, i4)), void n3.navigator.navigate({ itemUrl: f3, item: l3, state: o3.getState() });
-            qn(Un({ event: t3, nextState: { isOpen: false }, props: n3, query: s3, refresh: r3, store: o3 }, i4)).then(function() {
-              p3.onSelect(Un({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p3, state: o3.getState() }, i4));
-            });
-          }
-        }
-      }(Gn({ event: e4, props: t2, refresh: n2, store: r2 }, o2));
-    }, onFocus: c2, onBlur: lt, onClick: function(n3) {
-      e3.inputElement !== t2.environment.document.activeElement || r2.getState().isOpen || c2(n3);
-    } }, s2);
-  }, getPanelProps: function(e3) {
-    return Gn({ onMouseDown: function(e4) {
-      e4.preventDefault();
-    }, onMouseLeave: function() {
-      r2.dispatch("mouseleave", null);
-    } }, e3);
-  }, getListProps: function(e3) {
-    var n3 = e3 || {}, r3 = n3.sourceIndex, o3 = er(n3, Qn);
-    return Gn({ role: "listbox", "aria-labelledby": "".concat(i2(t2.id, r3), "-label"), id: "".concat(i2(t2.id, r3), "-list") }, o3);
-  }, getItemProps: function(e3) {
-    var c2 = e3.item, a2 = e3.source, u2 = e3.sourceIndex, l2 = er(e3, Zn);
-    return Gn({ id: "".concat(i2(t2.id, u2), "-item-").concat(c2.__autocomplete_id), role: "option", "aria-selected": r2.getState().activeItemId === c2.__autocomplete_id, onMouseMove: function(e4) {
-      if (c2.__autocomplete_id !== r2.getState().activeItemId) {
-        r2.dispatch("mousemove", c2.__autocomplete_id);
-        var t3 = Jt(r2.getState());
-        if (null !== r2.getState().activeItemId && t3) {
-          var i3 = t3.item, a3 = t3.itemInputValue, u3 = t3.itemUrl, l3 = t3.source;
-          l3.onActive(Gn({ event: e4, item: i3, itemInputValue: a3, itemUrl: u3, refresh: n2, source: l3, state: r2.getState() }, o2));
-        }
-      }
-    }, onMouseDown: function(e4) {
-      e4.preventDefault();
-    }, onClick: function(e4) {
-      var i3 = a2.getItemInputValue({ item: c2, state: r2.getState() }), u3 = a2.getItemUrl({ item: c2, state: r2.getState() });
-      (u3 ? Promise.resolve() : qn(Gn({ event: e4, nextState: { isOpen: false }, props: t2, query: i3, refresh: n2, store: r2 }, o2))).then(function() {
-        a2.onSelect(Gn({ event: e4, item: c2, itemInputValue: i3, itemUrl: u3, refresh: n2, source: a2, state: r2.getState() }, o2));
-      });
-    } }, l2);
-  } };
-}
-function nr(e2) {
-  return nr = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function Vn(e2) {
+  return Vn = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, nr(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, Vn(e2);
 }
-function rr(e2, t2) {
+function Kn(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15599,52 +15250,50 @@ function rr(e2, t2) {
   }
   return n2;
 }
-function or(e2) {
+function Wn(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? rr(Object(n2), true).forEach(function(t3) {
-      ir(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : rr(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? Kn(Object(n2), true).forEach(function(t3) {
+      zn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Kn(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function ir(e2, t2, n2) {
+function zn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== nr(e4) || null === e4)
-        return e4;
+      if ("object" !== Vn(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== nr(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== Vn(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === nr(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === Vn(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function cr(e2) {
-  var t2, n2, r2, o2, i2 = e2.plugins, c2 = e2.options, a2 = null === (t2 = ((null === (n2 = c2.__autocomplete_metadata) || void 0 === n2 ? void 0 : n2.userAgents) || [])[0]) || void 0 === t2 ? void 0 : t2.segment, u2 = a2 ? ir({}, a2, Object.keys((null === (r2 = c2.__autocomplete_metadata) || void 0 === r2 ? void 0 : r2.options) || {})) : {};
+function Jn(e2) {
+  var t2, n2, r2, o2, i2 = e2.plugins, c2 = e2.options, a2 = null === (t2 = ((null === (n2 = c2.__autocomplete_metadata) || void 0 === n2 ? void 0 : n2.userAgents) || [])[0]) || void 0 === t2 ? void 0 : t2.segment, u2 = a2 ? zn({}, a2, Object.keys((null === (r2 = c2.__autocomplete_metadata) || void 0 === r2 ? void 0 : r2.options) || {})) : {};
   return { plugins: i2.map(function(e3) {
     return { name: e3.name, options: Object.keys(e3.__autocomplete_pluginOptions || []) };
-  }), options: or({ "autocomplete-core": Object.keys(c2) }, u2), ua: st.concat((null === (o2 = c2.__autocomplete_metadata) || void 0 === o2 ? void 0 : o2.userAgents) || []) };
+  }), options: Wn({ "autocomplete-core": Object.keys(c2) }, u2), ua: lt.concat((null === (o2 = c2.__autocomplete_metadata) || void 0 === o2 ? void 0 : o2.userAgents) || []) };
 }
-function ar(e2) {
+function $n(e2) {
   var t2, n2 = e2.state;
-  return false === n2.isOpen || null === n2.activeItemId ? null : (null === (t2 = Jt(n2)) || void 0 === t2 ? void 0 : t2.itemInputValue) || null;
+  return false === n2.isOpen || null === n2.activeItemId ? null : (null === (t2 = Bt(n2)) || void 0 === t2 ? void 0 : t2.itemInputValue) || null;
 }
-function ur(e2) {
-  return ur = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function Zn(e2) {
+  return Zn = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, ur(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, Zn(e2);
 }
-function lr(e2, t2) {
+function Qn(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15654,79 +15303,77 @@ function lr(e2, t2) {
   }
   return n2;
 }
-function sr(e2) {
+function Gn(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? lr(Object(n2), true).forEach(function(t3) {
-      fr(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : lr(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? Qn(Object(n2), true).forEach(function(t3) {
+      Yn(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Qn(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function fr(e2, t2, n2) {
+function Yn(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== ur(e4) || null === e4)
-        return e4;
+      if ("object" !== Zn(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== ur(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== Zn(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === ur(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === Zn(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-var pr = function(e2, t2) {
+var Xn = function(e2, t2) {
   switch (t2.type) {
     case "setActiveItemId":
     case "mousemove":
-      return sr(sr({}, e2), {}, { activeItemId: t2.payload });
+      return Gn(Gn({}, e2), {}, { activeItemId: t2.payload });
     case "setQuery":
-      return sr(sr({}, e2), {}, { query: t2.payload, completion: null });
+      return Gn(Gn({}, e2), {}, { query: t2.payload, completion: null });
     case "setCollections":
-      return sr(sr({}, e2), {}, { collections: t2.payload });
+      return Gn(Gn({}, e2), {}, { collections: t2.payload });
     case "setIsOpen":
-      return sr(sr({}, e2), {}, { isOpen: t2.payload });
+      return Gn(Gn({}, e2), {}, { isOpen: t2.payload });
     case "setStatus":
-      return sr(sr({}, e2), {}, { status: t2.payload });
+      return Gn(Gn({}, e2), {}, { status: t2.payload });
     case "setContext":
-      return sr(sr({}, e2), {}, { context: sr(sr({}, e2.context), t2.payload) });
+      return Gn(Gn({}, e2), {}, { context: Gn(Gn({}, e2.context), t2.payload) });
     case "ArrowDown":
-      var n2 = sr(sr({}, e2), {}, { activeItemId: t2.payload.hasOwnProperty("nextActiveItemId") ? t2.payload.nextActiveItemId : Bt(1, e2.activeItemId, it(e2), t2.props.defaultActiveItemId) });
-      return sr(sr({}, n2), {}, { completion: ar({ state: n2 }) });
+      var n2 = Gn(Gn({}, e2), {}, { activeItemId: t2.payload.hasOwnProperty("nextActiveItemId") ? t2.payload.nextActiveItemId : Lt(1, e2.activeItemId, it(e2), t2.props.defaultActiveItemId) });
+      return Gn(Gn({}, n2), {}, { completion: $n({ state: n2 }) });
     case "ArrowUp":
-      var r2 = sr(sr({}, e2), {}, { activeItemId: Bt(-1, e2.activeItemId, it(e2), t2.props.defaultActiveItemId) });
-      return sr(sr({}, r2), {}, { completion: ar({ state: r2 }) });
+      var r2 = Gn(Gn({}, e2), {}, { activeItemId: Lt(-1, e2.activeItemId, it(e2), t2.props.defaultActiveItemId) });
+      return Gn(Gn({}, r2), {}, { completion: $n({ state: r2 }) });
     case "Escape":
-      return e2.isOpen ? sr(sr({}, e2), {}, { activeItemId: null, isOpen: false, completion: null }) : sr(sr({}, e2), {}, { activeItemId: null, query: "", status: "idle", collections: [] });
+      return e2.isOpen ? Gn(Gn({}, e2), {}, { activeItemId: null, isOpen: false, completion: null }) : Gn(Gn({}, e2), {}, { activeItemId: null, query: "", status: "idle", collections: [] });
     case "submit":
-      return sr(sr({}, e2), {}, { activeItemId: null, isOpen: false, status: "idle" });
+      return Gn(Gn({}, e2), {}, { activeItemId: null, isOpen: false, status: "idle" });
     case "reset":
-      return sr(sr({}, e2), {}, { activeItemId: true === t2.props.openOnFocus ? t2.props.defaultActiveItemId : null, status: "idle", query: "" });
+      return Gn(Gn({}, e2), {}, { activeItemId: true === t2.props.openOnFocus ? t2.props.defaultActiveItemId : null, status: "idle", query: "" });
     case "focus":
-      return sr(sr({}, e2), {}, { activeItemId: t2.props.defaultActiveItemId, isOpen: (t2.props.openOnFocus || Boolean(e2.query)) && t2.props.shouldPanelOpen({ state: e2 }) });
+      return Gn(Gn({}, e2), {}, { activeItemId: t2.props.defaultActiveItemId, isOpen: (t2.props.openOnFocus || Boolean(e2.query)) && t2.props.shouldPanelOpen({ state: e2 }) });
     case "blur":
-      return t2.props.debug ? e2 : sr(sr({}, e2), {}, { isOpen: false, activeItemId: null });
+      return t2.props.debug ? e2 : Gn(Gn({}, e2), {}, { isOpen: false, activeItemId: null });
     case "mouseleave":
-      return sr(sr({}, e2), {}, { activeItemId: t2.props.defaultActiveItemId });
+      return Gn(Gn({}, e2), {}, { activeItemId: t2.props.defaultActiveItemId });
     default:
-      return ct(false, "The reducer action ".concat(JSON.stringify(t2.type), " is not supported.")), e2;
+      return "The reducer action ".concat(JSON.stringify(t2.type), " is not supported."), e2;
   }
 };
-function mr(e2) {
-  return mr = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e3) {
-    return typeof e3;
+function er(e2) {
+  return er = "function" == typeof Symbol && "symbol" == n$1(Symbol.iterator) ? function(e3) {
+    return n$1(e3);
   } : function(e3) {
-    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3;
-  }, mr(e2);
+    return e3 && "function" == typeof Symbol && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : n$1(e3);
+  }, er(e2);
 }
-function vr(e2, t2) {
+function tr(e2, t2) {
   var n2 = Object.keys(e2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(e2);
@@ -15736,39 +15383,162 @@ function vr(e2, t2) {
   }
   return n2;
 }
-function dr(e2) {
+function nr(e2) {
   for (var t2 = 1; t2 < arguments.length; t2++) {
     var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? vr(Object(n2), true).forEach(function(t3) {
-      yr(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : vr(Object(n2)).forEach(function(t3) {
+    t2 % 2 ? tr(Object(n2), true).forEach(function(t3) {
+      rr(e2, t3, n2[t3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : tr(Object(n2)).forEach(function(t3) {
       Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
     });
   }
   return e2;
 }
-function yr(e2, t2, n2) {
+function rr(e2, t2, n2) {
   return (t2 = function(e3) {
     var t3 = function(e4, t4) {
-      if ("object" !== mr(e4) || null === e4)
-        return e4;
+      if ("object" !== er(e4) || null === e4) return e4;
       var n3 = e4[Symbol.toPrimitive];
       if (void 0 !== n3) {
-        var r2 = n3.call(e4, t4 || "default");
-        if ("object" !== mr(r2))
-          return r2;
+        var r2 = n3.call(e4, "string");
+        if ("object" !== er(r2)) return r2;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return ("string" === t4 ? String : Number)(e4);
-    }(e3, "string");
-    return "symbol" === mr(t3) ? t3 : String(t3);
+      return String(e4);
+    }(e3);
+    return "symbol" === er(t3) ? t3 : String(t3);
   }(t2)) in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
 }
-function hr(e2) {
-  Mt(e2);
-  var t2 = [], n2 = sn(e2, t2), r2 = Gt(pr, n2, function(e3) {
+function or(e2) {
+  var t2 = [], n2 = function(e3, t3) {
+    var n3, r3 = "undefined" != typeof window ? window : {}, o3 = e3.plugins || [];
+    return en(en({ debug: false, openOnFocus: false, placeholder: "", autoFocus: false, defaultActiveItemId: null, stallThreshold: 300, insights: false, environment: r3, shouldPanelOpen: function(e4) {
+      return it(e4.state) > 0;
+    }, reshape: function(e4) {
+      return e4.sources;
+    } }, e3), {}, { id: null !== (n3 = e3.id) && void 0 !== n3 ? n3 : "autocomplete-".concat(ot++), plugins: o3, initialState: en({ activeItemId: null, query: "", completion: null, collections: [], isOpen: false, status: "idle", context: {} }, e3.initialState), onStateChange: function(t4) {
+      var n4;
+      null === (n4 = e3.onStateChange) || void 0 === n4 || n4.call(e3, t4), o3.forEach(function(e4) {
+        var n5;
+        return null === (n5 = e4.onStateChange) || void 0 === n5 ? void 0 : n5.call(e4, t4);
+      });
+    }, onSubmit: function(t4) {
+      var n4;
+      null === (n4 = e3.onSubmit) || void 0 === n4 || n4.call(e3, t4), o3.forEach(function(e4) {
+        var n5;
+        return null === (n5 = e4.onSubmit) || void 0 === n5 ? void 0 : n5.call(e4, t4);
+      });
+    }, onReset: function(t4) {
+      var n4;
+      null === (n4 = e3.onReset) || void 0 === n4 || n4.call(e3, t4), o3.forEach(function(e4) {
+        var n5;
+        return null === (n5 = e4.onReset) || void 0 === n5 ? void 0 : n5.call(e4, t4);
+      });
+    }, getSources: function(n4) {
+      return Promise.all([].concat(function(e4) {
+        return function(e5) {
+          if (Array.isArray(e5)) return Yt(e5);
+        }(e4) || function(e5) {
+          if ("undefined" != typeof Symbol && null != e5[Symbol.iterator] || null != e5["@@iterator"]) return Array.from(e5);
+        }(e4) || function(e5, t4) {
+          if (e5) {
+            if ("string" == typeof e5) return Yt(e5, t4);
+            var n5 = Object.prototype.toString.call(e5).slice(8, -1);
+            return "Object" === n5 && e5.constructor && (n5 = e5.constructor.name), "Map" === n5 || "Set" === n5 ? Array.from(e5) : "Arguments" === n5 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n5) ? Yt(e5, t4) : void 0;
+          }
+        }(e4) || function() {
+          throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+        }();
+      }(o3.map(function(e4) {
+        return e4.getSources;
+      })), [e3.getSources]).filter(Boolean).map(function(e4) {
+        return function(e5, t4) {
+          var n5 = [];
+          return Promise.resolve(e5(t4)).then(function(e6) {
+            return Promise.all(e6.filter(function(e7) {
+              return Boolean(e7);
+            }).map(function(e7) {
+              if (e7.sourceId, n5.includes(e7.sourceId)) throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e7.sourceId), " is not unique."));
+              n5.push(e7.sourceId);
+              var t5 = { getItemInputValue: function(e8) {
+                return e8.state.query;
+              }, getItemUrl: function() {
+              }, onSelect: function(e8) {
+                (0, e8.setIsOpen)(false);
+              }, onActive: ut, onResolve: ut };
+              Object.keys(t5).forEach(function(e8) {
+                t5[e8].__default = true;
+              });
+              var r4 = Ht(Ht({}, t5), e7);
+              return Promise.resolve(r4);
+            }));
+          });
+        }(e4, n4);
+      })).then(function(e4) {
+        return rt(e4);
+      }).then(function(e4) {
+        return e4.map(function(e5) {
+          return en(en({}, e5), {}, { onSelect: function(n5) {
+            e5.onSelect(n5), t3.forEach(function(e6) {
+              var t4;
+              return null === (t4 = e6.onSelect) || void 0 === t4 ? void 0 : t4.call(e6, n5);
+            });
+          }, onActive: function(n5) {
+            e5.onActive(n5), t3.forEach(function(e6) {
+              var t4;
+              return null === (t4 = e6.onActive) || void 0 === t4 ? void 0 : t4.call(e6, n5);
+            });
+          }, onResolve: function(n5) {
+            e5.onResolve(n5), t3.forEach(function(e6) {
+              var t4;
+              return null === (t4 = e6.onResolve) || void 0 === t4 ? void 0 : t4.call(e6, n5);
+            });
+          } });
+        });
+      });
+    }, navigator: en({ navigate: function(e4) {
+      var t4 = e4.itemUrl;
+      r3.location.assign(t4);
+    }, navigateNewTab: function(e4) {
+      var t4 = e4.itemUrl, n4 = r3.open(t4, "_blank", "noopener");
+      null == n4 || n4.focus();
+    }, navigateNewWindow: function(e4) {
+      var t4 = e4.itemUrl;
+      r3.open(t4, "_blank", "noopener");
+    } }, e3.navigator) });
+  }(e2, t2), r2 = function(e3, t3, n3) {
+    var r3, o3 = t3.initialState;
+    return { getState: function() {
+      return o3;
+    }, dispatch: function(r4, i3) {
+      var c3 = function(e4) {
+        for (var t4 = 1; t4 < arguments.length; t4++) {
+          var n4 = null != arguments[t4] ? arguments[t4] : {};
+          t4 % 2 ? Wt(Object(n4), true).forEach(function(t5) {
+            zt(e4, t5, n4[t5]);
+          }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e4, Object.getOwnPropertyDescriptors(n4)) : Wt(Object(n4)).forEach(function(t5) {
+            Object.defineProperty(e4, t5, Object.getOwnPropertyDescriptor(n4, t5));
+          });
+        }
+        return e4;
+      }({}, o3);
+      o3 = e3(o3, { type: r4, props: t3, payload: i3 }), n3({ state: o3, prevState: c3 });
+    }, pendingRequests: (r3 = [], { add: function(e4) {
+      return r3.push(e4), e4.finally(function() {
+        r3 = r3.filter(function(t4) {
+          return t4 !== e4;
+        });
+      });
+    }, cancelAll: function() {
+      r3.forEach(function(e4) {
+        return e4.cancel();
+      });
+    }, isEmpty: function() {
+      return 0 === r3.length;
+    } }) };
+  }(Xn, n2, function(e3) {
     var t3 = e3.prevState, r3 = e3.state;
-    n2.onStateChange(dr({ prevState: t3, state: r3, refresh: c2, navigator: n2.navigator }, o2));
+    n2.onStateChange(nr({ prevState: t3, state: r3, refresh: c2, navigator: n2.navigator }, o2));
   }), o2 = function(e3) {
     var t3 = e3.store;
     return { setActiveItemId: function(e4) {
@@ -15777,8 +15547,8 @@ function hr(e2) {
       t3.dispatch("setQuery", e4);
     }, setCollections: function(e4) {
       var n3 = 0, r3 = e4.map(function(e5) {
-        return tn(tn({}, e5), {}, { items: rt(e5.items).map(function(e6) {
-          return tn(tn({}, e6), {}, { __autocomplete_id: n3++ });
+        return Zt(Zt({}, e5), {}, { items: rt(e5.items).map(function(e6) {
+          return Zt(Zt({}, e6), {}, { __autocomplete_id: n3++ });
         }) });
       });
       t3.dispatch("setCollections", r3);
@@ -15789,19 +15559,138 @@ function hr(e2) {
     }, setContext: function(e4) {
       t3.dispatch("setContext", e4);
     } };
-  }({ store: r2 }), i2 = tr(dr({ props: n2, refresh: c2, store: r2, navigator: n2.navigator }, o2));
+  }({ store: r2 }), i2 = function(e3) {
+    var t3 = e3.props, n3 = e3.refresh, r3 = e3.store, o3 = Bn(e3, xn), i3 = function(e4, t4) {
+      return void 0 !== t4 ? "".concat(e4, "-").concat(t4) : e4;
+    };
+    return { getEnvironmentProps: function(e4) {
+      var n4 = e4.inputElement, o4 = e4.formElement, i4 = e4.panelElement;
+      function c3(e5) {
+        !r3.getState().isOpen && r3.pendingRequests.isEmpty() || e5.target === n4 || false === [o4, i4].some(function(t4) {
+          return (n5 = t4) === (r4 = e5.target) || n5.contains(r4);
+          var n5, r4;
+        }) && (r3.dispatch("blur", null), t3.debug || r3.pendingRequests.cancelAll());
+      }
+      return Un({ onTouchStart: c3, onMouseDown: c3, onTouchMove: function(e5) {
+        false !== r3.getState().isOpen && n4 === t3.environment.document.activeElement && e5.target !== n4 && n4.blur();
+      } }, Bn(e4, Nn));
+    }, getRootProps: function(e4) {
+      return Un({ role: "combobox", "aria-expanded": r3.getState().isOpen, "aria-haspopup": "listbox", "aria-owns": r3.getState().isOpen ? "".concat(t3.id, "-list") : void 0, "aria-labelledby": "".concat(t3.id, "-label") }, e4);
+    }, getFormProps: function(e4) {
+      return e4.inputElement, Un({ action: "", noValidate: true, role: "search", onSubmit: function(i4) {
+        var c3;
+        i4.preventDefault(), t3.onSubmit(Un({ event: i4, refresh: n3, state: r3.getState() }, o3)), r3.dispatch("submit", null), null === (c3 = e4.inputElement) || void 0 === c3 || c3.blur();
+      }, onReset: function(i4) {
+        var c3;
+        i4.preventDefault(), t3.onReset(Un({ event: i4, refresh: n3, state: r3.getState() }, o3)), r3.dispatch("reset", null), null === (c3 = e4.inputElement) || void 0 === c3 || c3.focus();
+      } }, Bn(e4, Tn));
+    }, getLabelProps: function(e4) {
+      var n4 = e4 || {}, r4 = n4.sourceIndex, o4 = Bn(n4, qn);
+      return Un({ htmlFor: "".concat(i3(t3.id, r4), "-input"), id: "".concat(i3(t3.id, r4), "-label") }, o4);
+    }, getInputProps: function(e4) {
+      var i4;
+      function c3(e5) {
+        (t3.openOnFocus || Boolean(r3.getState().query)) && jn(Un({ event: e5, props: t3, query: r3.getState().completion || r3.getState().query, refresh: n3, store: r3 }, o3)), r3.dispatch("focus", null);
+      }
+      var a3 = e4 || {}, u2 = (a3.inputElement, a3.maxLength), l2 = void 0 === u2 ? 512 : u2, s2 = Bn(a3, Rn), f2 = Bt(r3.getState()), p2 = function(e5) {
+        return Boolean(e5 && e5.match(Vt));
+      }((null === (i4 = t3.environment.navigator) || void 0 === i4 ? void 0 : i4.userAgent) || ""), m2 = null != f2 && f2.itemUrl && !p2 ? "go" : "search";
+      return Un({ "aria-autocomplete": "both", "aria-activedescendant": r3.getState().isOpen && null !== r3.getState().activeItemId ? "".concat(t3.id, "-item-").concat(r3.getState().activeItemId) : void 0, "aria-controls": r3.getState().isOpen ? "".concat(t3.id, "-list") : void 0, "aria-labelledby": "".concat(t3.id, "-label"), value: r3.getState().completion || r3.getState().query, id: "".concat(t3.id, "-input"), autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", enterKeyHint: m2, spellCheck: "false", autoFocus: t3.autoFocus, placeholder: t3.placeholder, maxLength: l2, type: "search", onChange: function(e5) {
+        jn(Un({ event: e5, props: t3, query: e5.currentTarget.value.slice(0, l2), refresh: n3, store: r3 }, o3));
+      }, onKeyDown: function(e5) {
+        !function(e6) {
+          var t4 = e6.event, n4 = e6.props, r4 = e6.refresh, o4 = e6.store, i5 = function(e7, t5) {
+            if (null == e7) return {};
+            var n5, r5, o5 = function(e8, t6) {
+              if (null == e8) return {};
+              var n6, r6, o6 = {}, i7 = Object.keys(e8);
+              for (r6 = 0; r6 < i7.length; r6++) n6 = i7[r6], t6.indexOf(n6) >= 0 || (o6[n6] = e8[n6]);
+              return o6;
+            }(e7, t5);
+            if (Object.getOwnPropertySymbols) {
+              var i6 = Object.getOwnPropertySymbols(e7);
+              for (r5 = 0; r5 < i6.length; r5++) n5 = i6[r5], t5.indexOf(n5) >= 0 || Object.prototype.propertyIsEnumerable.call(e7, n5) && (o5[n5] = e7[n5]);
+            }
+            return o5;
+          }(e6, In);
+          if ("ArrowUp" === t4.key || "ArrowDown" === t4.key) {
+            var c4 = function() {
+              var e7 = n4.environment.document.getElementById("".concat(n4.id, "-item-").concat(o4.getState().activeItemId));
+              e7 && (e7.scrollIntoViewIfNeeded ? e7.scrollIntoViewIfNeeded(false) : e7.scrollIntoView(false));
+            }, a4 = function() {
+              var e7 = Bt(o4.getState());
+              if (null !== o4.getState().activeItemId && e7) {
+                var n5 = e7.item, c5 = e7.itemInputValue, a5 = e7.itemUrl, u4 = e7.source;
+                u4.onActive(kn({ event: t4, item: n5, itemInputValue: c5, itemUrl: a5, refresh: r4, source: u4, state: o4.getState() }, i5));
+              }
+            };
+            t4.preventDefault(), false === o4.getState().isOpen && (n4.openOnFocus || Boolean(o4.getState().query)) ? jn(kn({ event: t4, props: n4, query: o4.getState().query, refresh: r4, store: o4 }, i5)).then(function() {
+              o4.dispatch(t4.key, { nextActiveItemId: n4.defaultActiveItemId }), a4(), setTimeout(c4, 0);
+            }) : (o4.dispatch(t4.key, {}), a4(), c4());
+          } else if ("Escape" === t4.key) t4.preventDefault(), o4.dispatch(t4.key, null), o4.pendingRequests.cancelAll();
+          else if ("Tab" === t4.key) o4.dispatch("blur", null), o4.pendingRequests.cancelAll();
+          else if ("Enter" === t4.key) {
+            if (null === o4.getState().activeItemId || o4.getState().collections.every(function(e7) {
+              return 0 === e7.items.length;
+            })) return void (n4.debug || o4.pendingRequests.cancelAll());
+            t4.preventDefault();
+            var u3 = Bt(o4.getState()), l3 = u3.item, s3 = u3.itemInputValue, f3 = u3.itemUrl, p3 = u3.source;
+            if (t4.metaKey || t4.ctrlKey) void 0 !== f3 && (p3.onSelect(kn({ event: t4, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r4, source: p3, state: o4.getState() }, i5)), n4.navigator.navigateNewTab({ itemUrl: f3, item: l3, state: o4.getState() }));
+            else if (t4.shiftKey) void 0 !== f3 && (p3.onSelect(kn({ event: t4, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r4, source: p3, state: o4.getState() }, i5)), n4.navigator.navigateNewWindow({ itemUrl: f3, item: l3, state: o4.getState() }));
+            else if (t4.altKey) ;
+            else {
+              if (void 0 !== f3) return p3.onSelect(kn({ event: t4, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r4, source: p3, state: o4.getState() }, i5)), void n4.navigator.navigate({ itemUrl: f3, item: l3, state: o4.getState() });
+              jn(kn({ event: t4, nextState: { isOpen: false }, props: n4, query: s3, refresh: r4, store: o4 }, i5)).then(function() {
+                p3.onSelect(kn({ event: t4, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r4, source: p3, state: o4.getState() }, i5));
+              });
+            }
+          }
+        }(Un({ event: e5, props: t3, refresh: n3, store: r3 }, o3));
+      }, onFocus: c3, onBlur: ut, onClick: function(n4) {
+        e4.inputElement !== t3.environment.document.activeElement || r3.getState().isOpen || c3(n4);
+      } }, s2);
+    }, getPanelProps: function(e4) {
+      return Un({ onMouseDown: function(e5) {
+        e5.preventDefault();
+      }, onMouseLeave: function() {
+        r3.dispatch("mouseleave", null);
+      } }, e4);
+    }, getListProps: function(e4) {
+      var n4 = e4 || {}, r4 = n4.sourceIndex, o4 = Bn(n4, Ln);
+      return Un({ role: "listbox", "aria-labelledby": "".concat(i3(t3.id, r4), "-label"), id: "".concat(i3(t3.id, r4), "-list") }, o4);
+    }, getItemProps: function(e4) {
+      var c3 = e4.item, a3 = e4.source, u2 = e4.sourceIndex, l2 = Bn(e4, Mn);
+      return Un({ id: "".concat(i3(t3.id, u2), "-item-").concat(c3.__autocomplete_id), role: "option", "aria-selected": r3.getState().activeItemId === c3.__autocomplete_id, onMouseMove: function(e5) {
+        if (c3.__autocomplete_id !== r3.getState().activeItemId) {
+          r3.dispatch("mousemove", c3.__autocomplete_id);
+          var t4 = Bt(r3.getState());
+          if (null !== r3.getState().activeItemId && t4) {
+            var i4 = t4.item, a4 = t4.itemInputValue, u3 = t4.itemUrl, l3 = t4.source;
+            l3.onActive(Un({ event: e5, item: i4, itemInputValue: a4, itemUrl: u3, refresh: n3, source: l3, state: r3.getState() }, o3));
+          }
+        }
+      }, onMouseDown: function(e5) {
+        e5.preventDefault();
+      }, onClick: function(e5) {
+        var i4 = a3.getItemInputValue({ item: c3, state: r3.getState() }), u3 = a3.getItemUrl({ item: c3, state: r3.getState() });
+        (u3 ? Promise.resolve() : jn(Un({ event: e5, nextState: { isOpen: false }, props: t3, query: i4, refresh: n3, store: r3 }, o3))).then(function() {
+          a3.onSelect(Un({ event: e5, item: c3, itemInputValue: i4, itemUrl: u3, refresh: n3, source: a3, state: r3.getState() }, o3));
+        });
+      } }, l2);
+    } };
+  }(nr({ props: n2, refresh: c2, store: r2, navigator: n2.navigator }, o2));
   function c2() {
-    return qn(dr({ event: new Event("input"), nextState: { isOpen: r2.getState().isOpen }, props: n2, navigator: n2.navigator, query: r2.getState().query, refresh: c2, store: r2 }, o2));
+    return jn(nr({ event: new Event("input"), nextState: { isOpen: r2.getState().isOpen }, props: n2, navigator: n2.navigator, query: r2.getState().query, refresh: c2, store: r2 }, o2));
   }
   if (e2.insights && !n2.plugins.some(function(e3) {
     return "aa.algoliaInsightsPlugin" === e3.name;
   })) {
     var a2 = "boolean" == typeof e2.insights ? {} : e2.insights;
-    n2.plugins.push(Lt(a2));
+    n2.plugins.push(Nt(a2));
   }
   return n2.plugins.forEach(function(e3) {
     var r3;
-    return null === (r3 = e3.subscribe) || void 0 === r3 ? void 0 : r3.call(e3, dr(dr({}, o2), {}, { navigator: n2.navigator, refresh: c2, onSelect: function(e4) {
+    return null === (r3 = e3.subscribe) || void 0 === r3 ? void 0 : r3.call(e3, nr(nr({}, o2), {}, { navigator: n2.navigator, refresh: c2, onSelect: function(e4) {
       t2.push({ onSelect: e4 });
     }, onActive: function(e4) {
       t2.push({ onActive: e4 });
@@ -15816,464 +15705,213 @@ function hr(e2) {
         i3.content = JSON.stringify(r3), c3.appendChild(i3);
       }, 0);
     }
-  }({ metadata: cr({ plugins: n2.plugins, options: e2 }), environment: n2.environment }), dr(dr({ refresh: c2, navigator: n2.navigator }, i2), o2);
+  }({ metadata: Jn({ plugins: n2.plugins, options: e2 }), environment: n2.environment }), nr(nr({ refresh: c2, navigator: n2.navigator }, i2), o2);
 }
-function br(e2) {
+function ir(e2) {
   var t2 = e2.translations, n2 = (void 0 === t2 ? {} : t2).searchByText, r2 = void 0 === n2 ? "Search by" : n2;
-  return Be.createElement("a", { href: "https://www.algolia.com/ref/docsearch/?utm_source=".concat(window.location.hostname, "&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch"), target: "_blank", rel: "noopener noreferrer" }, Be.createElement("span", { className: "DocSearch-Label" }, r2), Be.createElement("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2196.2 500" }, Be.createElement("defs", null, Be.createElement("style", null, ".cls-1,.cls-2{fill:#003dff;}.cls-2{fill-rule:evenodd;}")), Be.createElement("path", { className: "cls-2", d: "M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z" }), Be.createElement("rect", { className: "cls-1", x: "1845.88", y: "104.73", width: "62.58", height: "277.9", rx: "5.9", ry: "5.9" }), Be.createElement("path", { className: "cls-2", d: "M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z" }), Be.createElement("path", { className: "cls-2", d: "M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z" }), Be.createElement("path", { className: "cls-2", d: "M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z" }), Be.createElement("path", { className: "cls-2", d: "M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z" }), Be.createElement("path", { className: "cls-2", d: "M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z" }), Be.createElement("path", { className: "cls-2", d: "M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z" }), Be.createElement("path", { className: "cls-1", d: "M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z" })));
+  return Fe.createElement("a", { href: "https://www.algolia.com/ref/docsearch/?utm_source=".concat(window.location.hostname, "&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch"), target: "_blank", rel: "noopener noreferrer" }, Fe.createElement("span", { className: "DocSearch-Label" }, r2), Fe.createElement("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2196.2 500" }, Fe.createElement("defs", null, Fe.createElement("style", null, ".cls-1,.cls-2{fill:#003dff;}.cls-2{fill-rule:evenodd;}")), Fe.createElement("path", { className: "cls-2", d: "M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z" }), Fe.createElement("rect", { className: "cls-1", x: "1845.88", y: "104.73", width: "62.58", height: "277.9", rx: "5.9", ry: "5.9" }), Fe.createElement("path", { className: "cls-2", d: "M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z" }), Fe.createElement("path", { className: "cls-2", d: "M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z" }), Fe.createElement("path", { className: "cls-2", d: "M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z" }), Fe.createElement("path", { className: "cls-2", d: "M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z" }), Fe.createElement("path", { className: "cls-2", d: "M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z" }), Fe.createElement("path", { className: "cls-2", d: "M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z" }), Fe.createElement("path", { className: "cls-1", d: "M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z" })));
 }
-function gr(e2) {
-  return Be.createElement("svg", { width: "15", height: "15", "aria-label": e2.ariaLabel, role: "img" }, Be.createElement("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.2" }, e2.children));
+function cr(e2) {
+  return Fe.createElement("svg", { width: "15", height: "15", "aria-label": e2.ariaLabel, role: "img" }, Fe.createElement("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.2" }, e2.children));
 }
-function _r(e2) {
-  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = n2.selectText, o2 = void 0 === r2 ? "to select" : r2, i2 = n2.selectKeyAriaLabel, c2 = void 0 === i2 ? "Enter key" : i2, a2 = n2.navigateText, u2 = void 0 === a2 ? "to navigate" : a2, l2 = n2.navigateUpKeyAriaLabel, s2 = void 0 === l2 ? "Arrow up" : l2, f2 = n2.navigateDownKeyAriaLabel, p2 = void 0 === f2 ? "Arrow down" : f2, m2 = n2.closeText, v2 = void 0 === m2 ? "to close" : m2, d2 = n2.closeKeyAriaLabel, y2 = void 0 === d2 ? "Escape key" : d2, h22 = n2.searchByText, b2 = void 0 === h22 ? "Search by" : h22;
-  return Be.createElement(Be.Fragment, null, Be.createElement("div", { className: "DocSearch-Logo" }, Be.createElement(br, { translations: { searchByText: b2 } })), Be.createElement("ul", { className: "DocSearch-Commands" }, Be.createElement("li", null, Be.createElement("kbd", { className: "DocSearch-Commands-Key" }, Be.createElement(gr, { ariaLabel: c2 }, Be.createElement("path", { d: "M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" }))), Be.createElement("span", { className: "DocSearch-Label" }, o2)), Be.createElement("li", null, Be.createElement("kbd", { className: "DocSearch-Commands-Key" }, Be.createElement(gr, { ariaLabel: p2 }, Be.createElement("path", { d: "M7.5 3.5v8M10.5 8.5l-3 3-3-3" }))), Be.createElement("kbd", { className: "DocSearch-Commands-Key" }, Be.createElement(gr, { ariaLabel: s2 }, Be.createElement("path", { d: "M7.5 11.5v-8M10.5 6.5l-3-3-3 3" }))), Be.createElement("span", { className: "DocSearch-Label" }, u2)), Be.createElement("li", null, Be.createElement("kbd", { className: "DocSearch-Commands-Key" }, Be.createElement(gr, { ariaLabel: y2 }, Be.createElement("path", { d: "M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" }))), Be.createElement("span", { className: "DocSearch-Label" }, v2))));
+function ar(e2) {
+  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = n2.selectText, o2 = void 0 === r2 ? "to select" : r2, i2 = n2.selectKeyAriaLabel, c2 = void 0 === i2 ? "Enter key" : i2, a2 = n2.navigateText, u2 = void 0 === a2 ? "to navigate" : a2, l2 = n2.navigateUpKeyAriaLabel, s2 = void 0 === l2 ? "Arrow up" : l2, f2 = n2.navigateDownKeyAriaLabel, p2 = void 0 === f2 ? "Arrow down" : f2, m2 = n2.closeText, v2 = void 0 === m2 ? "to close" : m2, d2 = n2.closeKeyAriaLabel, h3 = void 0 === d2 ? "Escape key" : d2, y2 = n2.searchByText, _2 = void 0 === y2 ? "Search by" : y2;
+  return Fe.createElement(Fe.Fragment, null, Fe.createElement("div", { className: "DocSearch-Logo" }, Fe.createElement(ir, { translations: { searchByText: _2 } })), Fe.createElement("ul", { className: "DocSearch-Commands" }, Fe.createElement("li", null, Fe.createElement("kbd", { className: "DocSearch-Commands-Key" }, Fe.createElement(cr, { ariaLabel: c2 }, Fe.createElement("path", { d: "M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" }))), Fe.createElement("span", { className: "DocSearch-Label" }, o2)), Fe.createElement("li", null, Fe.createElement("kbd", { className: "DocSearch-Commands-Key" }, Fe.createElement(cr, { ariaLabel: p2 }, Fe.createElement("path", { d: "M7.5 3.5v8M10.5 8.5l-3 3-3-3" }))), Fe.createElement("kbd", { className: "DocSearch-Commands-Key" }, Fe.createElement(cr, { ariaLabel: s2 }, Fe.createElement("path", { d: "M7.5 11.5v-8M10.5 6.5l-3-3-3 3" }))), Fe.createElement("span", { className: "DocSearch-Label" }, u2)), Fe.createElement("li", null, Fe.createElement("kbd", { className: "DocSearch-Commands-Key" }, Fe.createElement(cr, { ariaLabel: h3 }, Fe.createElement("path", { d: "M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" }))), Fe.createElement("span", { className: "DocSearch-Label" }, v2))));
 }
-function Or(e2) {
+function ur(e2) {
   var t2 = e2.hit, n2 = e2.children;
-  return Be.createElement("a", { href: t2.url }, n2);
+  return Fe.createElement("a", { href: t2.url }, n2);
 }
-function Sr() {
-  return Be.createElement("svg", { viewBox: "0 0 38 38", stroke: "currentColor", strokeOpacity: ".5" }, Be.createElement("g", { fill: "none", fillRule: "evenodd" }, Be.createElement("g", { transform: "translate(1 1)", strokeWidth: "2" }, Be.createElement("circle", { strokeOpacity: ".3", cx: "18", cy: "18", r: "18" }), Be.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18" }, Be.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "1s", repeatCount: "indefinite" })))));
+function lr() {
+  return Fe.createElement("svg", { viewBox: "0 0 38 38", stroke: "currentColor", strokeOpacity: ".5" }, Fe.createElement("g", { fill: "none", fillRule: "evenodd" }, Fe.createElement("g", { transform: "translate(1 1)", strokeWidth: "2" }, Fe.createElement("circle", { strokeOpacity: ".3", cx: "18", cy: "18", r: "18" }), Fe.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18" }, Fe.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "1s", repeatCount: "indefinite" })))));
 }
-function wr() {
-  return Be.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Be.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, Be.createElement("path", { d: "M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0" }), Be.createElement("path", { d: "M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13" })));
+function sr() {
+  return Fe.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Fe.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, Fe.createElement("path", { d: "M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0" }), Fe.createElement("path", { d: "M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13" })));
 }
-function jr() {
-  return Be.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Be.createElement("path", { d: "M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }));
+function fr() {
+  return Fe.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Fe.createElement("path", { d: "M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }));
 }
-function Er() {
-  return Be.createElement("svg", { className: "DocSearch-Hit-Select-Icon", width: "20", height: "20", viewBox: "0 0 20 20" }, Be.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, Be.createElement("path", { d: "M18 3v4c0 2-2 4-4 4H2" }), Be.createElement("path", { d: "M8 17l-6-6 6-6" })));
+function pr() {
+  return Fe.createElement("svg", { className: "DocSearch-Hit-Select-Icon", width: "20", height: "20", viewBox: "0 0 20 20" }, Fe.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, Fe.createElement("path", { d: "M18 3v4c0 2-2 4-4 4H2" }), Fe.createElement("path", { d: "M8 17l-6-6 6-6" })));
 }
-var Pr = function() {
-  return Be.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Be.createElement("path", { d: "M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" }));
+var mr = function() {
+  return Fe.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Fe.createElement("path", { d: "M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" }));
 };
-function Ir(e2) {
+function vr(e2) {
   switch (e2.type) {
     case "lvl1":
-      return Be.createElement(Pr, null);
+      return Fe.createElement(mr, null);
     case "content":
-      return Be.createElement(kr, null);
+      return Fe.createElement(hr, null);
     default:
-      return Be.createElement(Dr, null);
+      return Fe.createElement(dr, null);
   }
 }
-function Dr() {
-  return Be.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Be.createElement("path", { d: "M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }));
+function dr() {
+  return Fe.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Fe.createElement("path", { d: "M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }));
 }
-function kr() {
-  return Be.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Be.createElement("path", { d: "M17 5H3h14zm0 5H3h14zm0 5H3h14z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" }));
+function hr() {
+  return Fe.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Fe.createElement("path", { d: "M17 5H3h14zm0 5H3h14zm0 5H3h14z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" }));
 }
-function Ar() {
-  return Be.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Be.createElement("path", { d: "M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" }));
+function yr() {
+  return Fe.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Fe.createElement("path", { d: "M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" }));
 }
-function Cr() {
-  return Be.createElement("svg", { width: "40", height: "40", viewBox: "0 0 20 20", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }, Be.createElement("path", { d: "M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0" }));
+function _r() {
+  return Fe.createElement("svg", { width: "40", height: "40", viewBox: "0 0 20 20", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }, Fe.createElement("path", { d: "M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0" }));
 }
-function Nr() {
-  return Be.createElement("svg", { width: "40", height: "40", viewBox: "0 0 20 20", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }, Be.createElement("path", { d: "M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2" }));
+function br() {
+  return Fe.createElement("svg", { width: "40", height: "40", viewBox: "0 0 20 20", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }, Fe.createElement("path", { d: "M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2" }));
 }
-function xr(e2) {
+function gr(e2) {
   var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = n2.titleText, o2 = void 0 === r2 ? "Unable to fetch results" : r2, i2 = n2.helpText, c2 = void 0 === i2 ? "You might want to check your network connection." : i2;
-  return Be.createElement("div", { className: "DocSearch-ErrorScreen" }, Be.createElement("div", { className: "DocSearch-Screen-Icon" }, Be.createElement(Cr, null)), Be.createElement("p", { className: "DocSearch-Title" }, o2), Be.createElement("p", { className: "DocSearch-Help" }, c2));
+  return Fe.createElement("div", { className: "DocSearch-ErrorScreen" }, Fe.createElement("div", { className: "DocSearch-Screen-Icon" }, Fe.createElement(_r, null)), Fe.createElement("p", { className: "DocSearch-Title" }, o2), Fe.createElement("p", { className: "DocSearch-Help" }, c2));
 }
-var Tr = ["translations"];
-function Rr(e2) {
-  return function(e3) {
-    if (Array.isArray(e3))
-      return qr(e3);
-  }(e2) || function(e3) {
-    if ("undefined" != typeof Symbol && null != e3[Symbol.iterator] || null != e3["@@iterator"])
-      return Array.from(e3);
-  }(e2) || function(e3, t2) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return qr(e3, t2);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return qr(e3, t2);
-  }(e2) || function() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }();
-}
-function qr(e2, t2) {
-  (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
-  return r2;
-}
-function Lr(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-function Mr(e2) {
-  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = Lr(e2, Tr), o2 = n2.noResultsText, i2 = void 0 === o2 ? "No results for" : o2, c2 = n2.suggestedQueryText, a2 = void 0 === c2 ? "Try searching for" : c2, u2 = n2.reportMissingResultsText, l2 = void 0 === u2 ? "Believe this query should return results?" : u2, s2 = n2.reportMissingResultsLinkText, f2 = void 0 === s2 ? "Let us know." : s2, p2 = r2.state.context.searchSuggestions;
-  return Be.createElement("div", { className: "DocSearch-NoResults" }, Be.createElement("div", { className: "DocSearch-Screen-Icon" }, Be.createElement(Nr, null)), Be.createElement("p", { className: "DocSearch-Title" }, i2, ' "', Be.createElement("strong", null, r2.state.query), '"'), p2 && p2.length > 0 && Be.createElement("div", { className: "DocSearch-NoResults-Prefill-List" }, Be.createElement("p", { className: "DocSearch-Help" }, a2, ":"), Be.createElement("ul", null, p2.slice(0, 3).reduce(function(e3, t3) {
-    return [].concat(Rr(e3), [Be.createElement("li", { key: t3 }, Be.createElement("button", { className: "DocSearch-Prefill", key: t3, type: "button", onClick: function() {
+var Sr = ["translations"];
+function Or(e2) {
+  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = Je(e2, Sr), o2 = n2.noResultsText, i2 = void 0 === o2 ? "No results for" : o2, c2 = n2.suggestedQueryText, a2 = void 0 === c2 ? "Try searching for" : c2, u2 = n2.reportMissingResultsText, l2 = void 0 === u2 ? "Believe this query should return results?" : u2, s2 = n2.reportMissingResultsLinkText, f2 = void 0 === s2 ? "Let us know." : s2, p2 = r2.state.context.searchSuggestions;
+  return Fe.createElement("div", { className: "DocSearch-NoResults" }, Fe.createElement("div", { className: "DocSearch-Screen-Icon" }, Fe.createElement(br, null)), Fe.createElement("p", { className: "DocSearch-Title" }, i2, ' "', Fe.createElement("strong", null, r2.state.query), '"'), p2 && p2.length > 0 && Fe.createElement("div", { className: "DocSearch-NoResults-Prefill-List" }, Fe.createElement("p", { className: "DocSearch-Help" }, a2, ":"), Fe.createElement("ul", null, p2.slice(0, 3).reduce(function(e3, t3) {
+    return [].concat(function(e4) {
+      return function(e5) {
+        if (Array.isArray(e5)) return Qe(e5);
+      }(e4) || function(e5) {
+        if ("undefined" != typeof Symbol && null != e5[Symbol.iterator] || null != e5["@@iterator"]) return Array.from(e5);
+      }(e4) || Ze(e4) || function() {
+        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      }();
+    }(e3), [Fe.createElement("li", { key: t3 }, Fe.createElement("button", { className: "DocSearch-Prefill", key: t3, type: "button", onClick: function() {
       r2.setQuery(t3.toLowerCase() + " "), r2.refresh(), r2.inputRef.current.focus();
     } }, t3))]);
-  }, []))), r2.getMissingResultsUrl && Be.createElement("p", { className: "DocSearch-Help" }, "".concat(l2, " "), Be.createElement("a", { href: r2.getMissingResultsUrl({ query: r2.state.query }), target: "_blank", rel: "noopener noreferrer" }, f2)));
-}
-var Hr = ["hit", "attribute", "tagName"];
-function Ur(e2, t2) {
-  var n2 = Object.keys(e2);
-  if (Object.getOwnPropertySymbols) {
-    var r2 = Object.getOwnPropertySymbols(e2);
-    t2 && (r2 = r2.filter(function(t3) {
-      return Object.getOwnPropertyDescriptor(e2, t3).enumerable;
-    })), n2.push.apply(n2, r2);
-  }
-  return n2;
-}
-function Fr(e2) {
-  for (var t2 = 1; t2 < arguments.length; t2++) {
-    var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? Ur(Object(n2), true).forEach(function(t3) {
-      Br(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Ur(Object(n2)).forEach(function(t3) {
-      Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
-    });
-  }
-  return e2;
-}
-function Br(e2, t2, n2) {
-  return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
-}
-function Vr(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
+  }, []))), r2.getMissingResultsUrl && Fe.createElement("p", { className: "DocSearch-Help" }, "".concat(l2, " "), Fe.createElement("a", { href: r2.getMissingResultsUrl({ query: r2.state.query }), target: "_blank", rel: "noopener noreferrer" }, f2)));
 }
-function Kr(e2, t2) {
+var wr = ["hit", "attribute", "tagName"];
+function Er(e2, t2) {
   return t2.split(".").reduce(function(e3, t3) {
     return null != e3 && e3[t3] ? e3[t3] : null;
   }, e2);
 }
-function Wr(e2) {
+function jr(e2) {
   var t2 = e2.hit, n2 = e2.attribute, r2 = e2.tagName;
-  return _$1(void 0 === r2 ? "span" : r2, Fr(Fr({}, Vr(e2, Hr)), {}, { dangerouslySetInnerHTML: { __html: Kr(t2, "_snippetResult.".concat(n2, ".value")) || Kr(t2, n2) } }));
-}
-function zr(e2, t2) {
-  return function(e3) {
-    if (Array.isArray(e3))
-      return e3;
-  }(e2) || function(e3, t3) {
-    var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
-    if (null == n2)
-      return;
-    var r2, o2, i2 = [], c2 = true, a2 = false;
-    try {
-      for (n2 = n2.call(e3); !(c2 = (r2 = n2.next()).done) && (i2.push(r2.value), !t3 || i2.length !== t3); c2 = true)
-        ;
-    } catch (e4) {
-      a2 = true, o2 = e4;
-    } finally {
-      try {
-        c2 || null == n2.return || n2.return();
-      } finally {
-        if (a2)
-          throw o2;
-      }
-    }
-    return i2;
-  }(e2, t2) || function(e3, t3) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return Jr(e3, t3);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return Jr(e3, t3);
-  }(e2, t2) || function() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }();
+  return b$1(void 0 === r2 ? "span" : r2, Ke(Ke({}, Je(e2, wr)), {}, { dangerouslySetInnerHTML: { __html: Er(t2, "_snippetResult.".concat(n2, ".value")) || Er(t2, n2) } }));
 }
-function Jr(e2, t2) {
-  (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
-  return r2;
-}
-function $r() {
-  return $r = Object.assign || function(e2) {
-    for (var t2 = 1; t2 < arguments.length; t2++) {
-      var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
-    }
-    return e2;
-  }, $r.apply(this, arguments);
-}
-function Qr(e2) {
-  return e2.collection && 0 !== e2.collection.items.length ? Be.createElement("section", { className: "DocSearch-Hits" }, Be.createElement("div", { className: "DocSearch-Hit-source" }, e2.title), Be.createElement("ul", e2.getListProps(), e2.collection.items.map(function(t2, n2) {
-    return Be.createElement(Zr, $r({ key: [e2.title, t2.objectID].join(":"), item: t2, index: n2 }, e2));
+function Pr(e2) {
+  return e2.collection && 0 !== e2.collection.items.length ? Fe.createElement("section", { className: "DocSearch-Hits" }, Fe.createElement("div", { className: "DocSearch-Hit-source" }, e2.title), Fe.createElement("ul", e2.getListProps(), e2.collection.items.map(function(t2, n2) {
+    return Fe.createElement(Ir, ze({ key: [e2.title, t2.objectID].join(":"), item: t2, index: n2 }, e2));
   }))) : null;
 }
-function Zr(e2) {
-  var t2 = e2.item, n2 = e2.index, r2 = e2.renderIcon, o2 = e2.renderAction, i2 = e2.getItemProps, c2 = e2.onItemClick, a2 = e2.collection, u2 = e2.hitComponent, l2 = zr(Be.useState(false), 2), s2 = l2[0], f2 = l2[1], p2 = zr(Be.useState(false), 2), m2 = p2[0], v2 = p2[1], d2 = Be.useRef(null), y2 = u2;
-  return Be.createElement("li", $r({ className: ["DocSearch-Hit", t2.__docsearch_parent && "DocSearch-Hit--Child", s2 && "DocSearch-Hit--deleting", m2 && "DocSearch-Hit--favoriting"].filter(Boolean).join(" "), onTransitionEnd: function() {
+function Ir(e2) {
+  var t2 = e2.item, n2 = e2.index, r2 = e2.renderIcon, o2 = e2.renderAction, i2 = e2.getItemProps, c2 = e2.onItemClick, a2 = e2.collection, u2 = e2.hitComponent, l2 = $e(Fe.useState(false), 2), s2 = l2[0], f2 = l2[1], p2 = $e(Fe.useState(false), 2), m2 = p2[0], v2 = p2[1], d2 = Fe.useRef(null), h3 = u2;
+  return Fe.createElement("li", ze({ className: ["DocSearch-Hit", t2.__docsearch_parent && "DocSearch-Hit--Child", s2 && "DocSearch-Hit--deleting", m2 && "DocSearch-Hit--favoriting"].filter(Boolean).join(" "), onTransitionEnd: function() {
     d2.current && d2.current();
   } }, i2({ item: t2, source: a2.source, onClick: function(e3) {
     c2(t2, e3);
-  } })), Be.createElement(y2, { hit: t2 }, Be.createElement("div", { className: "DocSearch-Hit-Container" }, r2({ item: t2, index: n2 }), t2.hierarchy[t2.type] && "lvl1" === t2.type && Be.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Be.createElement(Wr, { className: "DocSearch-Hit-title", hit: t2, attribute: "hierarchy.lvl1" }), t2.content && Be.createElement(Wr, { className: "DocSearch-Hit-path", hit: t2, attribute: "content" })), t2.hierarchy[t2.type] && ("lvl2" === t2.type || "lvl3" === t2.type || "lvl4" === t2.type || "lvl5" === t2.type || "lvl6" === t2.type) && Be.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Be.createElement(Wr, { className: "DocSearch-Hit-title", hit: t2, attribute: "hierarchy.".concat(t2.type) }), Be.createElement(Wr, { className: "DocSearch-Hit-path", hit: t2, attribute: "hierarchy.lvl1" })), "content" === t2.type && Be.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Be.createElement(Wr, { className: "DocSearch-Hit-title", hit: t2, attribute: "content" }), Be.createElement(Wr, { className: "DocSearch-Hit-path", hit: t2, attribute: "hierarchy.lvl1" })), o2({ item: t2, runDeleteTransition: function(e3) {
+  } })), Fe.createElement(h3, { hit: t2 }, Fe.createElement("div", { className: "DocSearch-Hit-Container" }, r2({ item: t2, index: n2 }), t2.hierarchy[t2.type] && "lvl1" === t2.type && Fe.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Fe.createElement(jr, { className: "DocSearch-Hit-title", hit: t2, attribute: "hierarchy.lvl1" }), t2.content && Fe.createElement(jr, { className: "DocSearch-Hit-path", hit: t2, attribute: "content" })), t2.hierarchy[t2.type] && ("lvl2" === t2.type || "lvl3" === t2.type || "lvl4" === t2.type || "lvl5" === t2.type || "lvl6" === t2.type) && Fe.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Fe.createElement(jr, { className: "DocSearch-Hit-title", hit: t2, attribute: "hierarchy.".concat(t2.type) }), Fe.createElement(jr, { className: "DocSearch-Hit-path", hit: t2, attribute: "hierarchy.lvl1" })), "content" === t2.type && Fe.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Fe.createElement(jr, { className: "DocSearch-Hit-title", hit: t2, attribute: "content" }), Fe.createElement(jr, { className: "DocSearch-Hit-path", hit: t2, attribute: "hierarchy.lvl1" })), o2({ item: t2, runDeleteTransition: function(e3) {
     f2(true), d2.current = e3;
   }, runFavoriteTransition: function(e3) {
     v2(true), d2.current = e3;
   } }))));
 }
-function Yr(e2, t2, n2) {
+function Dr(e2, t2, n2) {
   return e2.reduce(function(e3, r2) {
     var o2 = t2(r2);
     return e3.hasOwnProperty(o2) || (e3[o2] = []), e3[o2].length < (n2 || 5) && e3[o2].push(r2), e3;
   }, {});
 }
-function Gr(e2) {
+function kr(e2) {
   return e2;
 }
-function Xr(e2) {
+function Cr(e2) {
   return 1 === e2.button || e2.altKey || e2.ctrlKey || e2.metaKey || e2.shiftKey;
 }
-function eo() {
+function Ar() {
 }
-var to$1 = /(<mark>|<\/mark>)/g, no = RegExp(to$1.source);
-function ro(e2) {
+var xr = /(<mark>|<\/mark>)/g, Nr = RegExp(xr.source);
+function Tr(e2) {
   var t2, n2, r2 = e2;
-  if (!r2.__docsearch_parent && !e2._highlightResult)
-    return e2.hierarchy.lvl0;
+  if (!r2.__docsearch_parent && !e2._highlightResult) return e2.hierarchy.lvl0;
   var o2 = ((r2.__docsearch_parent ? null === (t2 = r2.__docsearch_parent) || void 0 === t2 || null === (t2 = t2._highlightResult) || void 0 === t2 || null === (t2 = t2.hierarchy) || void 0 === t2 ? void 0 : t2.lvl0 : null === (n2 = e2._highlightResult) || void 0 === n2 || null === (n2 = n2.hierarchy) || void 0 === n2 ? void 0 : n2.lvl0) || {}).value;
-  return o2 && no.test(o2) ? o2.replace(to$1, "") : o2;
-}
-function oo() {
-  return oo = Object.assign || function(e2) {
-    for (var t2 = 1; t2 < arguments.length; t2++) {
-      var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
-    }
-    return e2;
-  }, oo.apply(this, arguments);
+  return o2 && Nr.test(o2) ? o2.replace(xr, "") : o2;
 }
-function io(e2) {
-  return Be.createElement("div", { className: "DocSearch-Dropdown-Container" }, e2.state.collections.map(function(t2) {
-    if (0 === t2.items.length)
-      return null;
-    var n2 = ro(t2.items[0]);
-    return Be.createElement(Qr, oo({}, e2, { key: t2.source.sourceId, title: n2, collection: t2, renderIcon: function(e3) {
+function Rr(e2) {
+  return Fe.createElement("div", { className: "DocSearch-Dropdown-Container" }, e2.state.collections.map(function(t2) {
+    if (0 === t2.items.length) return null;
+    var n2 = Tr(t2.items[0]);
+    return Fe.createElement(Pr, ze({}, e2, { key: t2.source.sourceId, title: n2, collection: t2, renderIcon: function(e3) {
       var n3, r2 = e3.item, o2 = e3.index;
-      return Be.createElement(Be.Fragment, null, r2.__docsearch_parent && Be.createElement("svg", { className: "DocSearch-Hit-Tree", viewBox: "0 0 24 54" }, Be.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, r2.__docsearch_parent !== (null === (n3 = t2.items[o2 + 1]) || void 0 === n3 ? void 0 : n3.__docsearch_parent) ? Be.createElement("path", { d: "M8 6v21M20 27H8.3" }) : Be.createElement("path", { d: "M8 6v42M20 27H8.3" }))), Be.createElement("div", { className: "DocSearch-Hit-icon" }, Be.createElement(Ir, { type: r2.type })));
+      return Fe.createElement(Fe.Fragment, null, r2.__docsearch_parent && Fe.createElement("svg", { className: "DocSearch-Hit-Tree", viewBox: "0 0 24 54" }, Fe.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, r2.__docsearch_parent !== (null === (n3 = t2.items[o2 + 1]) || void 0 === n3 ? void 0 : n3.__docsearch_parent) ? Fe.createElement("path", { d: "M8 6v21M20 27H8.3" }) : Fe.createElement("path", { d: "M8 6v42M20 27H8.3" }))), Fe.createElement("div", { className: "DocSearch-Hit-icon" }, Fe.createElement(vr, { type: r2.type })));
     }, renderAction: function() {
-      return Be.createElement("div", { className: "DocSearch-Hit-action" }, Be.createElement(Er, null));
+      return Fe.createElement("div", { className: "DocSearch-Hit-action" }, Fe.createElement(pr, null));
     } }));
-  }), e2.resultsFooterComponent && Be.createElement("section", { className: "DocSearch-HitsFooter" }, Be.createElement(e2.resultsFooterComponent, { state: e2.state })));
-}
-var co = ["translations"];
-function ao() {
-  return ao = Object.assign || function(e2) {
-    for (var t2 = 1; t2 < arguments.length; t2++) {
-      var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
-    }
-    return e2;
-  }, ao.apply(this, arguments);
-}
-function uo(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
+  }), e2.resultsFooterComponent && Fe.createElement("section", { className: "DocSearch-HitsFooter" }, Fe.createElement(e2.resultsFooterComponent, { state: e2.state })));
 }
-function lo(e2) {
-  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = uo(e2, co), o2 = n2.recentSearchesTitle, i2 = void 0 === o2 ? "Recent" : o2, c2 = n2.noRecentSearchesText, a2 = void 0 === c2 ? "No recent searches" : c2, u2 = n2.saveRecentSearchButtonTitle, l2 = void 0 === u2 ? "Save this search" : u2, s2 = n2.removeRecentSearchButtonTitle, f2 = void 0 === s2 ? "Remove this search from history" : s2, p2 = n2.favoriteSearchesTitle, m2 = void 0 === p2 ? "Favorite" : p2, v2 = n2.removeFavoriteSearchButtonTitle, d2 = void 0 === v2 ? "Remove this search from favorites" : v2;
-  return "idle" === r2.state.status && false === r2.hasCollections ? r2.disableUserPersonalization ? null : Be.createElement("div", { className: "DocSearch-StartScreen" }, Be.createElement("p", { className: "DocSearch-Help" }, a2)) : false === r2.hasCollections ? null : Be.createElement("div", { className: "DocSearch-Dropdown-Container" }, Be.createElement(Qr, ao({}, r2, { title: i2, collection: r2.state.collections[0], renderIcon: function() {
-    return Be.createElement("div", { className: "DocSearch-Hit-icon" }, Be.createElement(wr, null));
+var qr = ["translations"];
+function Lr(e2) {
+  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = Je(e2, qr), o2 = n2.recentSearchesTitle, i2 = void 0 === o2 ? "Recent" : o2, c2 = n2.noRecentSearchesText, a2 = void 0 === c2 ? "No recent searches" : c2, u2 = n2.saveRecentSearchButtonTitle, l2 = void 0 === u2 ? "Save this search" : u2, s2 = n2.removeRecentSearchButtonTitle, f2 = void 0 === s2 ? "Remove this search from history" : s2, p2 = n2.favoriteSearchesTitle, m2 = void 0 === p2 ? "Favorite" : p2, v2 = n2.removeFavoriteSearchButtonTitle, d2 = void 0 === v2 ? "Remove this search from favorites" : v2;
+  return "idle" === r2.state.status && false === r2.hasCollections ? r2.disableUserPersonalization ? null : Fe.createElement("div", { className: "DocSearch-StartScreen" }, Fe.createElement("p", { className: "DocSearch-Help" }, a2)) : false === r2.hasCollections ? null : Fe.createElement("div", { className: "DocSearch-Dropdown-Container" }, Fe.createElement(Pr, ze({}, r2, { title: i2, collection: r2.state.collections[0], renderIcon: function() {
+    return Fe.createElement("div", { className: "DocSearch-Hit-icon" }, Fe.createElement(sr, null));
   }, renderAction: function(e3) {
     var t3 = e3.item, n3 = e3.runFavoriteTransition, o3 = e3.runDeleteTransition;
-    return Be.createElement(Be.Fragment, null, Be.createElement("div", { className: "DocSearch-Hit-action" }, Be.createElement("button", { className: "DocSearch-Hit-action-button", title: l2, type: "submit", onClick: function(e4) {
+    return Fe.createElement(Fe.Fragment, null, Fe.createElement("div", { className: "DocSearch-Hit-action" }, Fe.createElement("button", { className: "DocSearch-Hit-action-button", title: l2, type: "submit", onClick: function(e4) {
       e4.preventDefault(), e4.stopPropagation(), n3(function() {
         r2.favoriteSearches.add(t3), r2.recentSearches.remove(t3), r2.refresh();
       });
-    } }, Be.createElement(Ar, null))), Be.createElement("div", { className: "DocSearch-Hit-action" }, Be.createElement("button", { className: "DocSearch-Hit-action-button", title: f2, type: "submit", onClick: function(e4) {
+    } }, Fe.createElement(yr, null))), Fe.createElement("div", { className: "DocSearch-Hit-action" }, Fe.createElement("button", { className: "DocSearch-Hit-action-button", title: f2, type: "submit", onClick: function(e4) {
       e4.preventDefault(), e4.stopPropagation(), o3(function() {
         r2.recentSearches.remove(t3), r2.refresh();
       });
-    } }, Be.createElement(jr, null))));
-  } })), Be.createElement(Qr, ao({}, r2, { title: m2, collection: r2.state.collections[1], renderIcon: function() {
-    return Be.createElement("div", { className: "DocSearch-Hit-icon" }, Be.createElement(Ar, null));
+    } }, Fe.createElement(fr, null))));
+  } })), Fe.createElement(Pr, ze({}, r2, { title: m2, collection: r2.state.collections[1], renderIcon: function() {
+    return Fe.createElement("div", { className: "DocSearch-Hit-icon" }, Fe.createElement(yr, null));
   }, renderAction: function(e3) {
     var t3 = e3.item, n3 = e3.runDeleteTransition;
-    return Be.createElement("div", { className: "DocSearch-Hit-action" }, Be.createElement("button", { className: "DocSearch-Hit-action-button", title: d2, type: "submit", onClick: function(e4) {
+    return Fe.createElement("div", { className: "DocSearch-Hit-action" }, Fe.createElement("button", { className: "DocSearch-Hit-action-button", title: d2, type: "submit", onClick: function(e4) {
       e4.preventDefault(), e4.stopPropagation(), n3(function() {
         r2.favoriteSearches.remove(t3), r2.refresh();
       });
-    } }, Be.createElement(jr, null)));
+    } }, Fe.createElement(fr, null)));
   } })));
 }
-var so = ["translations"];
-function fo() {
-  return fo = Object.assign || function(e2) {
-    for (var t2 = 1; t2 < arguments.length; t2++) {
-      var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
-    }
-    return e2;
-  }, fo.apply(this, arguments);
-}
-function po(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-var mo = Be.memo(function(e2) {
-  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = po(e2, so);
-  if ("error" === r2.state.status)
-    return Be.createElement(xr, { translations: null == n2 ? void 0 : n2.errorScreen });
+var Mr = ["translations"], Hr = Fe.memo(function(e2) {
+  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = Je(e2, Mr);
+  if ("error" === r2.state.status) return Fe.createElement(gr, { translations: null == n2 ? void 0 : n2.errorScreen });
   var o2 = r2.state.collections.some(function(e3) {
     return e3.items.length > 0;
   });
-  return r2.state.query ? false === o2 ? Be.createElement(Mr, fo({}, r2, { translations: null == n2 ? void 0 : n2.noResultsScreen })) : Be.createElement(io, r2) : Be.createElement(lo, fo({}, r2, { hasCollections: o2, translations: null == n2 ? void 0 : n2.startScreen }));
+  return r2.state.query ? false === o2 ? Fe.createElement(Or, ze({}, r2, { translations: null == n2 ? void 0 : n2.noResultsScreen })) : Fe.createElement(Rr, r2) : Fe.createElement(Lr, ze({}, r2, { hasCollections: o2, translations: null == n2 ? void 0 : n2.startScreen }));
 }, function(e2, t2) {
   return "loading" === t2.state.status || "stalled" === t2.state.status;
-}), vo = ["translations"];
-function yo() {
-  return yo = Object.assign || function(e2) {
-    for (var t2 = 1; t2 < arguments.length; t2++) {
-      var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
-    }
-    return e2;
-  }, yo.apply(this, arguments);
-}
-function ho(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-function bo(e2) {
-  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = ho(e2, vo), o2 = n2.resetButtonTitle, i2 = void 0 === o2 ? "Clear the query" : o2, c2 = n2.resetButtonAriaLabel, a2 = void 0 === c2 ? "Clear the query" : c2, u2 = n2.cancelButtonText, l2 = void 0 === u2 ? "Cancel" : u2, s2 = n2.cancelButtonAriaLabel, f2 = void 0 === s2 ? "Cancel" : s2, p2 = n2.searchInputLabel, m2 = void 0 === p2 ? "Search" : p2, v2 = r2.getFormProps({ inputElement: r2.inputRef.current }).onReset;
-  return Be.useEffect(function() {
+}), Ur = ["translations"];
+function Fr(e2) {
+  var t2 = e2.translations, n2 = void 0 === t2 ? {} : t2, r2 = Je(e2, Ur), o2 = n2.resetButtonTitle, i2 = void 0 === o2 ? "Clear the query" : o2, c2 = n2.resetButtonAriaLabel, a2 = void 0 === c2 ? "Clear the query" : c2, u2 = n2.cancelButtonText, l2 = void 0 === u2 ? "Cancel" : u2, s2 = n2.cancelButtonAriaLabel, f2 = void 0 === s2 ? "Cancel" : s2, p2 = n2.searchInputLabel, m2 = void 0 === p2 ? "Search" : p2, v2 = r2.getFormProps({ inputElement: r2.inputRef.current }).onReset;
+  return Fe.useEffect(function() {
     r2.autoFocus && r2.inputRef.current && r2.inputRef.current.focus();
-  }, [r2.autoFocus, r2.inputRef]), Be.useEffect(function() {
+  }, [r2.autoFocus, r2.inputRef]), Fe.useEffect(function() {
     r2.isFromSelection && r2.inputRef.current && r2.inputRef.current.select();
-  }, [r2.isFromSelection, r2.inputRef]), Be.createElement(Be.Fragment, null, Be.createElement("form", { className: "DocSearch-Form", onSubmit: function(e3) {
+  }, [r2.isFromSelection, r2.inputRef]), Fe.createElement(Fe.Fragment, null, Fe.createElement("form", { className: "DocSearch-Form", onSubmit: function(e3) {
     e3.preventDefault();
-  }, onReset: v2 }, Be.createElement("label", yo({ className: "DocSearch-MagnifierLabel" }, r2.getLabelProps()), Be.createElement(Ke, null), Be.createElement("span", { className: "DocSearch-VisuallyHiddenForAccessibility" }, m2)), Be.createElement("div", { className: "DocSearch-LoadingIndicator" }, Be.createElement(Sr, null)), Be.createElement("input", yo({ className: "DocSearch-Input", ref: r2.inputRef }, r2.getInputProps({ inputElement: r2.inputRef.current, autoFocus: r2.autoFocus, maxLength: 64 }))), Be.createElement("button", { type: "reset", title: i2, className: "DocSearch-Reset", "aria-label": a2, hidden: !r2.state.query }, Be.createElement(jr, null))), Be.createElement("button", { className: "DocSearch-Cancel", type: "reset", "aria-label": f2, onClick: r2.onClose }, l2));
-}
-var go = ["_highlightResult", "_snippetResult"];
-function _o(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-function Oo(e2) {
-  return false === function() {
-    var e3 = "__TEST_KEY__";
-    try {
-      return localStorage.setItem(e3, ""), localStorage.removeItem(e3), true;
-    } catch (e4) {
-      return false;
-    }
-  }() ? { setItem: function() {
-  }, getItem: function() {
-    return [];
-  } } : { setItem: function(t2) {
-    return window.localStorage.setItem(e2, JSON.stringify(t2));
-  }, getItem: function() {
-    var t2 = window.localStorage.getItem(e2);
-    return t2 ? JSON.parse(t2) : [];
-  } };
+  }, onReset: v2 }, Fe.createElement("label", ze({ className: "DocSearch-MagnifierLabel" }, r2.getLabelProps()), Fe.createElement(Ye, null), Fe.createElement("span", { className: "DocSearch-VisuallyHiddenForAccessibility" }, m2)), Fe.createElement("div", { className: "DocSearch-LoadingIndicator" }, Fe.createElement(lr, null)), Fe.createElement("input", ze({ className: "DocSearch-Input", ref: r2.inputRef }, r2.getInputProps({ inputElement: r2.inputRef.current, autoFocus: r2.autoFocus, maxLength: 64 }))), Fe.createElement("button", { type: "reset", title: i2, className: "DocSearch-Reset", "aria-label": a2, hidden: !r2.state.query }, Fe.createElement(fr, null))), Fe.createElement("button", { className: "DocSearch-Cancel", type: "reset", "aria-label": f2, onClick: r2.onClose }, l2));
 }
-function So(e2) {
-  var t2 = e2.key, n2 = e2.limit, r2 = void 0 === n2 ? 5 : n2, o2 = Oo(t2), i2 = o2.getItem().slice(0, r2);
+var Br = ["_highlightResult", "_snippetResult"];
+function Vr(e2) {
+  var t2 = e2.key, n2 = e2.limit, r2 = void 0 === n2 ? 5 : n2, o2 = function(e3) {
+    return false === function() {
+      var e4 = "__TEST_KEY__";
+      try {
+        return localStorage.setItem(e4, ""), localStorage.removeItem(e4), true;
+      } catch (e5) {
+        return false;
+      }
+    }() ? { setItem: function() {
+    }, getItem: function() {
+      return [];
+    } } : { setItem: function(t3) {
+      return window.localStorage.setItem(e3, JSON.stringify(t3));
+    }, getItem: function() {
+      var t3 = window.localStorage.getItem(e3);
+      return t3 ? JSON.parse(t3) : [];
+    } };
+  }(t2), i2 = o2.getItem().slice(0, r2);
   return { add: function(e3) {
-    var t3 = e3, n3 = (t3._highlightResult, t3._snippetResult, _o(t3, go)), c2 = i2.findIndex(function(e4) {
+    var t3 = e3, n3 = (t3._highlightResult, t3._snippetResult, Je(t3, Br)), c2 = i2.findIndex(function(e4) {
       return e4.objectID === n3.objectID;
     });
     c2 > -1 && i2.splice(c2, 1), i2.unshift(n3), i2 = i2.slice(0, r2), o2.setItem(i2);
@@ -16285,46 +15923,45 @@ function So(e2) {
     return i2;
   } };
 }
-var wo = ["facetName", "facetQuery"];
-function jo(e2) {
+function Kr(e2) {
   var t2, n2 = "algoliasearch-client-js-".concat(e2.key), r2 = function() {
     return void 0 === t2 && (t2 = e2.localStorage || window.localStorage), t2;
   }, o2 = function() {
     return JSON.parse(r2().getItem(n2) || "{}");
-  }, i2 = function(e3) {
+  }, c2 = function(e3) {
     r2().setItem(n2, JSON.stringify(e3));
-  }, a2 = function() {
-    var t3 = e2.timeToLive ? 1e3 * e2.timeToLive : null, n3 = o2(), r3 = Object.fromEntries(Object.entries(n3).filter(function(e3) {
-      return void 0 !== c$1(e3, 2)[1].timestamp;
-    }));
-    if (i2(r3), t3) {
-      var a3 = Object.fromEntries(Object.entries(r3).filter(function(e3) {
-        var n4 = c$1(e3, 2)[1], r4 = (/* @__PURE__ */ new Date()).getTime();
-        return !(n4.timestamp + t3 < r4);
-      }));
-      i2(a3);
-    }
   };
-  return { get: function(e3, t3) {
-    var n3 = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : { miss: function() {
+  return { get: function(t3, n3) {
+    var r3 = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : { miss: function() {
       return Promise.resolve();
     } };
     return Promise.resolve().then(function() {
-      a2();
-      var t4 = JSON.stringify(e3);
-      return o2()[t4];
-    }).then(function(e4) {
-      return Promise.all([e4 ? e4.value : t3(), void 0 !== e4]);
-    }).then(function(e4) {
-      var t4 = c$1(e4, 2), r3 = t4[0], o3 = t4[1];
-      return Promise.all([r3, o3 || n3.miss(r3)]);
-    }).then(function(e4) {
-      return c$1(e4, 1)[0];
+      !function() {
+        var t4 = e2.timeToLive ? 1e3 * e2.timeToLive : null, n5 = o2(), r4 = Object.fromEntries(Object.entries(n5).filter(function(e3) {
+          return void 0 !== i$1(e3, 2)[1].timestamp;
+        }));
+        if (c2(r4), t4) {
+          var a2 = Object.fromEntries(Object.entries(r4).filter(function(e3) {
+            var n6 = i$1(e3, 2)[1], r5 = (/* @__PURE__ */ new Date()).getTime();
+            return !(n6.timestamp + t4 < r5);
+          }));
+          c2(a2);
+        }
+      }();
+      var n4 = JSON.stringify(t3);
+      return o2()[n4];
+    }).then(function(e3) {
+      return Promise.all([e3 ? e3.value : n3(), void 0 !== e3]);
+    }).then(function(e3) {
+      var t4 = i$1(e3, 2), n4 = t4[0], o3 = t4[1];
+      return Promise.all([n4, o3 || r3.miss(n4)]);
+    }).then(function(e3) {
+      return i$1(e3, 1)[0];
     });
   }, set: function(e3, t3) {
     return Promise.resolve().then(function() {
-      var i3 = o2();
-      return i3[JSON.stringify(e3)] = { timestamp: (/* @__PURE__ */ new Date()).getTime(), value: t3 }, r2().setItem(n2, JSON.stringify(i3)), t3;
+      var i2 = o2();
+      return i2[JSON.stringify(e3)] = { timestamp: (/* @__PURE__ */ new Date()).getTime(), value: t3 }, r2().setItem(n2, JSON.stringify(i2)), t3;
     });
   }, delete: function(e3) {
     return Promise.resolve().then(function() {
@@ -16337,8 +15974,8 @@ function jo(e2) {
     });
   } };
 }
-function Eo(e2) {
-  var t2 = a$1(e2.caches), n2 = t2.shift();
+function Wr(e2) {
+  var t2 = c$1(e2.caches), n2 = t2.shift();
   return void 0 === n2 ? { get: function(e3, t3) {
     var n3 = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : { miss: function() {
       return Promise.resolve();
@@ -16346,7 +15983,7 @@ function Eo(e2) {
     return t3().then(function(e4) {
       return Promise.all([e4, n3.miss(e4)]);
     }).then(function(e4) {
-      return c$1(e4, 1)[0];
+      return i$1(e4, 1)[0];
     });
   }, set: function(e3, t3) {
     return Promise.resolve(t3);
@@ -16359,30 +15996,29 @@ function Eo(e2) {
       return Promise.resolve();
     } };
     return n2.get(e3, r2, o2).catch(function() {
-      return Eo({ caches: t2 }).get(e3, r2, o2);
+      return Wr({ caches: t2 }).get(e3, r2, o2);
     });
   }, set: function(e3, r2) {
     return n2.set(e3, r2).catch(function() {
-      return Eo({ caches: t2 }).set(e3, r2);
+      return Wr({ caches: t2 }).set(e3, r2);
     });
   }, delete: function(e3) {
     return n2.delete(e3).catch(function() {
-      return Eo({ caches: t2 }).delete(e3);
+      return Wr({ caches: t2 }).delete(e3);
     });
   }, clear: function() {
     return n2.clear().catch(function() {
-      return Eo({ caches: t2 }).clear();
+      return Wr({ caches: t2 }).clear();
     });
   } };
 }
-function Po() {
+function zr() {
   var e2 = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : { serializable: true }, t2 = {};
   return { get: function(n2, r2) {
     var o2 = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : { miss: function() {
       return Promise.resolve();
     } }, i2 = JSON.stringify(n2);
-    if (i2 in t2)
-      return Promise.resolve(e2.serializable ? JSON.parse(t2[i2]) : t2[i2]);
+    if (i2 in t2) return Promise.resolve(e2.serializable ? JSON.parse(t2[i2]) : t2[i2]);
     var c2 = r2(), a2 = o2 && o2.miss || function() {
       return Promise.resolve();
     };
@@ -16399,81 +16035,56 @@ function Po() {
     return t2 = {}, Promise.resolve();
   } };
 }
-function Io(e2) {
+function Jr(e2) {
   for (var t2 = e2.length - 1; t2 > 0; t2--) {
     var n2 = Math.floor(Math.random() * (t2 + 1)), r2 = e2[t2];
     e2[t2] = e2[n2], e2[n2] = r2;
   }
   return e2;
 }
-function Do(e2, t2) {
+function $r(e2, t2) {
   return t2 ? (Object.keys(t2).forEach(function(n2) {
     e2[n2] = t2[n2](e2);
   }), e2) : e2;
 }
-function ko(e2) {
-  for (var t2 = arguments.length, n2 = new Array(t2 > 1 ? t2 - 1 : 0), r2 = 1; r2 < t2; r2++)
-    n2[r2 - 1] = arguments[r2];
+function Zr(e2) {
+  for (var t2 = arguments.length, n2 = new Array(t2 > 1 ? t2 - 1 : 0), r2 = 1; r2 < t2; r2++) n2[r2 - 1] = arguments[r2];
   var o2 = 0;
   return e2.replace(/%s/g, function() {
     return encodeURIComponent(n2[o2++]);
   });
 }
-var Ao = { WithinQueryParameters: 0, WithinHeaders: 1 };
-function Co(e2, t2) {
+function Qr(e2, t2) {
   var n2 = e2 || {}, r2 = n2.data || {};
   return Object.keys(n2).forEach(function(e3) {
     -1 === ["timeout", "headers", "queryParameters", "data", "cacheable"].indexOf(e3) && (r2[e3] = n2[e3]);
   }), { data: Object.entries(r2).length > 0 ? r2 : void 0, timeout: n2.timeout || t2, headers: n2.headers || {}, queryParameters: n2.queryParameters || {}, cacheable: n2.cacheable };
 }
-var No = { Read: 1, Write: 2, Any: 3 }, xo = 1, To = 2, Ro = 3;
-function qo(e2) {
-  var n2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : xo;
+var Gr = { Read: 1, Write: 2, Any: 3 };
+function Yr(e2) {
+  var n2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 1;
   return t$1(t$1({}, e2), {}, { status: n2, lastUpdate: Date.now() });
 }
-function Lo(e2) {
-  return "string" == typeof e2 ? { protocol: "https", url: e2, accept: No.Any } : { protocol: e2.protocol || "https", url: e2.url, accept: e2.accept || No.Any };
-}
-var Mo = "GET", Ho = "POST";
-function Uo(e2, t2) {
-  return Promise.all(t2.map(function(t3) {
-    return e2.get(t3, function() {
-      return Promise.resolve(qo(t3));
-    });
-  })).then(function(e3) {
-    var n2 = e3.filter(function(e4) {
-      return function(e5) {
-        return e5.status === xo || Date.now() - e5.lastUpdate > 12e4;
-      }(e4);
-    }), r2 = e3.filter(function(e4) {
-      return function(e5) {
-        return e5.status === Ro && Date.now() - e5.lastUpdate <= 12e4;
-      }(e4);
-    }), o2 = [].concat(a$1(n2), a$1(r2));
-    return { getTimeout: function(e4, t3) {
-      return (0 === r2.length && 0 === e4 ? 1 : r2.length + 3 + e4) * t3;
-    }, statelessHosts: o2.length > 0 ? o2.map(function(e4) {
-      return Lo(e4);
-    }) : t2 };
-  });
+function Xr(e2) {
+  return "string" == typeof e2 ? { protocol: "https", url: e2, accept: Gr.Any } : { protocol: e2.protocol || "https", url: e2.url, accept: e2.accept || Gr.Any };
 }
-function Fo(e2, n2, r2, o2) {
-  var i2 = [], c2 = function(e3, n3) {
-    if (e3.method === Mo || void 0 === e3.data && void 0 === n3.data)
-      return;
-    var r3 = Array.isArray(e3.data) ? e3.data : t$1(t$1({}, e3.data), n3.data);
-    return JSON.stringify(r3);
+var eo = "POST";
+function to$1(e2, n2, r2, o2) {
+  var i2 = [], a2 = function(e3, n3) {
+    if ("GET" !== e3.method && (void 0 !== e3.data || void 0 !== n3.data)) {
+      var r3 = Array.isArray(e3.data) ? e3.data : t$1(t$1({}, e3.data), n3.data);
+      return JSON.stringify(r3);
+    }
   }(r2, o2), u2 = function(e3, n3) {
     var r3 = t$1(t$1({}, e3.headers), n3.headers), o3 = {};
     return Object.keys(r3).forEach(function(e4) {
       var t2 = r3[e4];
       o3[e4.toLowerCase()] = t2;
     }), o3;
-  }(e2, o2), l2 = r2.method, s2 = r2.method !== Mo ? {} : t$1(t$1({}, r2.data), o2.data), f2 = t$1(t$1(t$1({ "x-algolia-agent": e2.userAgent.value }, e2.queryParameters), s2), o2.queryParameters), p2 = 0, m2 = function t2(n3, a2) {
+  }(e2, o2), l2 = r2.method, s2 = "GET" !== r2.method ? {} : t$1(t$1({}, r2.data), o2.data), f2 = t$1(t$1(t$1({ "x-algolia-agent": e2.userAgent.value }, e2.queryParameters), s2), o2.queryParameters), p2 = 0, m2 = function t2(n3, c2) {
     var s3 = n3.pop();
-    if (void 0 === s3)
-      throw { name: "RetryError", message: "Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.", transporterStackTrace: Wo(i2) };
-    var m3 = { data: c2, headers: u2, method: l2, url: Vo(s3, r2.path, f2), connectTimeout: a2(p2, e2.timeouts.connect), responseTimeout: a2(p2, o2.timeout) }, v2 = function(e3) {
+    if (void 0 === s3) throw { name: "RetryError", message: "Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.", transporterStackTrace: io(i2) };
+    var m3 = { data: a2, headers: u2, method: l2, url: ro(s3, r2.path, f2), connectTimeout: c2(p2, e2.timeouts.connect), responseTimeout: c2(p2, o2.timeout) }, v2 = function(e3) {
       var t3 = { request: m3, response: e3, host: s3, triesLeft: n3.length };
       return i2.push(t3), t3;
     }, d2 = { onSuccess: function(e3) {
@@ -16488,20 +16099,20 @@ function Fo(e2, n2, r2, o2) {
       }(e3);
     }, onRetry: function(r3) {
       var o3 = v2(r3);
-      return r3.isTimedOut && p2++, Promise.all([e2.logger.info("Retryable failure", zo(o3)), e2.hostsCache.set(s3, qo(s3, r3.isTimedOut ? Ro : To))]).then(function() {
-        return t2(n3, a2);
+      return r3.isTimedOut && p2++, Promise.all([e2.logger.info("Retryable failure", co(o3)), e2.hostsCache.set(s3, Yr(s3, r3.isTimedOut ? 3 : 2))]).then(function() {
+        return t2(n3, c2);
       });
     }, onFail: function(e3) {
       throw v2(e3), function(e4, t3) {
         var n4 = e4.content, r3 = e4.status, o3 = n4;
         try {
           o3 = JSON.parse(n4).message;
-        } catch (e5) {
+        } catch (n5) {
         }
         return /* @__PURE__ */ function(e5, t4, n5) {
           return { name: "ApiError", message: e5, status: t4, transporterStackTrace: n5 };
         }(o3, r3, t3);
-      }(e3, Wo(i2));
+      }(e3, io(i2));
     } };
     return e2.requester.send(m3).then(function(e3) {
       return function(e4, t3) {
@@ -16515,121 +16126,108 @@ function Fo(e2, n2, r2, o2) {
       }(e3, d2);
     });
   };
-  return Uo(e2.hostsCache, n2).then(function(e3) {
-    return m2(a$1(e3.statelessHosts).reverse(), e3.getTimeout);
+  return function(e3, t2) {
+    return Promise.all(t2.map(function(t3) {
+      return e3.get(t3, function() {
+        return Promise.resolve(Yr(t3));
+      });
+    })).then(function(e4) {
+      var n3 = e4.filter(function(e5) {
+        return function(e6) {
+          return 1 === e6.status || Date.now() - e6.lastUpdate > 12e4;
+        }(e5);
+      }), r3 = e4.filter(function(e5) {
+        return function(e6) {
+          return 3 === e6.status && Date.now() - e6.lastUpdate <= 12e4;
+        }(e5);
+      }), o3 = [].concat(c$1(n3), c$1(r3));
+      return { getTimeout: function(e5, t3) {
+        return (0 === r3.length && 0 === e5 ? 1 : r3.length + 3 + e5) * t3;
+      }, statelessHosts: o3.length > 0 ? o3.map(function(e5) {
+        return Xr(e5);
+      }) : t2 };
+    });
+  }(e2.hostsCache, n2).then(function(e3) {
+    return m2(c$1(e3.statelessHosts).reverse(), e3.getTimeout);
   });
 }
-function Bo(e2) {
+function no(e2) {
   var t2 = { value: "Algolia for JavaScript (".concat(e2, ")"), add: function(e3) {
     var n2 = "; ".concat(e3.segment).concat(void 0 !== e3.version ? " (".concat(e3.version, ")") : "");
     return -1 === t2.value.indexOf(n2) && (t2.value = "".concat(t2.value).concat(n2)), t2;
   } };
   return t2;
 }
-function Vo(e2, t2, n2) {
-  var r2 = Ko(n2), o2 = "".concat(e2.protocol, "://").concat(e2.url, "/").concat("/" === t2.charAt(0) ? t2.substr(1) : t2);
+function ro(e2, t2, n2) {
+  var r2 = oo(n2), o2 = "".concat(e2.protocol, "://").concat(e2.url, "/").concat("/" === t2.charAt(0) ? t2.substr(1) : t2);
   return r2.length && (o2 += "?".concat(r2)), o2;
 }
-function Ko(e2) {
+function oo(e2) {
   return Object.keys(e2).map(function(t2) {
-    return ko("%s=%s", t2, (n2 = e2[t2], "[object Object]" === Object.prototype.toString.call(n2) || "[object Array]" === Object.prototype.toString.call(n2) ? JSON.stringify(e2[t2]) : e2[t2]));
+    return Zr("%s=%s", t2, (n2 = e2[t2], "[object Object]" === Object.prototype.toString.call(n2) || "[object Array]" === Object.prototype.toString.call(n2) ? JSON.stringify(e2[t2]) : e2[t2]));
     var n2;
   }).join("&");
 }
-function Wo(e2) {
+function io(e2) {
   return e2.map(function(e3) {
-    return zo(e3);
+    return co(e3);
   });
 }
-function zo(e2) {
+function co(e2) {
   var n2 = e2.request.headers["x-algolia-api-key"] ? { "x-algolia-api-key": "*****" } : {};
   return t$1(t$1({}, e2), {}, { request: t$1(t$1({}, e2.request), {}, { headers: t$1(t$1({}, e2.request.headers), n2) }) });
 }
-var Jo = function(e2) {
-  var n2 = e2.appId, r2 = /* @__PURE__ */ function(e3, t2, n3) {
-    var r3 = { "x-algolia-api-key": n3, "x-algolia-application-id": t2 };
-    return { headers: function() {
-      return e3 === Ao.WithinHeaders ? r3 : {};
-    }, queryParameters: function() {
-      return e3 === Ao.WithinQueryParameters ? r3 : {};
-    } };
-  }(void 0 !== e2.authMode ? e2.authMode : Ao.WithinHeaders, n2, e2.apiKey), o2 = function(e3) {
-    var t2 = e3.hostsCache, n3 = e3.logger, r3 = e3.requester, o3 = e3.requestsCache, i3 = e3.responsesCache, a2 = e3.timeouts, u2 = e3.userAgent, l2 = e3.hosts, s2 = e3.queryParameters, f2 = { hostsCache: t2, logger: n3, requester: r3, requestsCache: o3, responsesCache: i3, timeouts: a2, userAgent: u2, headers: e3.headers, queryParameters: s2, hosts: l2.map(function(e4) {
-      return Lo(e4);
-    }), read: function(e4, t3) {
-      var n4 = Co(t3, f2.timeouts.read), r4 = function() {
-        return Fo(f2, f2.hosts.filter(function(e5) {
-          return 0 != (e5.accept & No.Read);
-        }), e4, n4);
-      };
-      if (true !== (void 0 !== n4.cacheable ? n4.cacheable : e4.cacheable))
-        return r4();
-      var o4 = { request: e4, mappedRequestOptions: n4, transporter: { queryParameters: f2.queryParameters, headers: f2.headers } };
-      return f2.responsesCache.get(o4, function() {
-        return f2.requestsCache.get(o4, function() {
-          return f2.requestsCache.set(o4, r4()).then(function(e5) {
-            return Promise.all([f2.requestsCache.delete(o4), e5]);
-          }, function(e5) {
-            return Promise.all([f2.requestsCache.delete(o4), Promise.reject(e5)]);
-          }).then(function(e5) {
-            var t4 = c$1(e5, 2);
-            return t4[0], t4[1];
-          });
-        });
-      }, { miss: function(e5) {
-        return f2.responsesCache.set(o4, e5);
-      } });
-    }, write: function(e4, t3) {
-      return Fo(f2, f2.hosts.filter(function(e5) {
-        return 0 != (e5.accept & No.Write);
-      }), e4, Co(t3, f2.timeouts.write));
-    } };
-    return f2;
-  }(t$1(t$1({ hosts: [{ url: "".concat(n2, "-dsn.algolia.net"), accept: No.Read }, { url: "".concat(n2, ".algolia.net"), accept: No.Write }].concat(Io([{ url: "".concat(n2, "-1.algolianet.com") }, { url: "".concat(n2, "-2.algolianet.com") }, { url: "".concat(n2, "-3.algolianet.com") }])) }, e2), {}, { headers: t$1(t$1(t$1({}, r2.headers()), { "content-type": "application/x-www-form-urlencoded" }), e2.headers), queryParameters: t$1(t$1({}, r2.queryParameters()), e2.queryParameters) })), i2 = { transporter: o2, appId: n2, addAlgoliaAgent: function(e3, t2) {
-    o2.userAgent.add({ segment: e3, version: t2 });
-  }, clearCache: function() {
-    return Promise.all([o2.requestsCache.clear(), o2.responsesCache.clear()]).then(function() {
-    });
-  } };
-  return Do(i2, e2.methods);
-}, $o = function(e2) {
+var ao = function(e2) {
   return function(t2, n2) {
-    return t2.method === Mo ? e2.transporter.read(t2, n2) : e2.transporter.write(t2, n2);
+    return "GET" === t2.method ? e2.transporter.read(t2, n2) : e2.transporter.write(t2, n2);
   };
-}, Qo = function(e2) {
+}, uo = function(e2) {
   return function(t2) {
-    var n2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, r2 = { transporter: e2.transporter, appId: e2.appId, indexName: t2 };
-    return Do(r2, n2.methods);
+    var n2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
+    return $r({ transporter: e2.transporter, appId: e2.appId, indexName: t2 }, n2.methods);
   };
-}, Zo = function(e2) {
+}, lo = function(e2) {
   return function(n2, r2) {
     var o2 = n2.map(function(e3) {
-      return t$1(t$1({}, e3), {}, { params: Ko(e3.params || {}) });
+      return t$1(t$1({}, e3), {}, { params: oo(e3.params || {}) });
     });
-    return e2.transporter.read({ method: Ho, path: "1/indexes/*/queries", data: { requests: o2 }, cacheable: true }, r2);
+    return e2.transporter.read({ method: eo, path: "1/indexes/*/queries", data: { requests: o2 }, cacheable: true }, r2);
   };
-}, Yo = function(e2) {
+}, so = function(e2) {
   return function(n2, r2) {
     return Promise.all(n2.map(function(n3) {
-      var o2 = n3.params, c2 = o2.facetName, a2 = o2.facetQuery, u2 = i$1(o2, wo);
-      return Qo(e2)(n3.indexName, { methods: { searchForFacetValues: ei } }).searchForFacetValues(c2, a2, t$1(t$1({}, r2), u2));
+      var o2 = n3.params, i2 = o2.facetName, c2 = o2.facetQuery, a2 = function(e3, t2) {
+        if (null == e3) return {};
+        var n4, r3, o3 = function(e4, t3) {
+          if (null == e4) return {};
+          var n5, r4, o4 = {}, i4 = Object.keys(e4);
+          for (r4 = 0; r4 < i4.length; r4++) n5 = i4[r4], t3.indexOf(n5) >= 0 || (o4[n5] = e4[n5]);
+          return o4;
+        }(e3, t2);
+        if (Object.getOwnPropertySymbols) {
+          var i3 = Object.getOwnPropertySymbols(e3);
+          for (r3 = 0; r3 < i3.length; r3++) n4 = i3[r3], t2.indexOf(n4) >= 0 || Object.prototype.propertyIsEnumerable.call(e3, n4) && (o3[n4] = e3[n4]);
+        }
+        return o3;
+      }(o2, Be);
+      return uo(e2)(n3.indexName, { methods: { searchForFacetValues: mo } }).searchForFacetValues(i2, c2, t$1(t$1({}, r2), a2));
     }));
   };
-}, Go = function(e2) {
+}, fo = function(e2) {
   return function(t2, n2, r2) {
-    return e2.transporter.read({ method: Ho, path: ko("1/answers/%s/prediction", e2.indexName), data: { query: t2, queryLanguages: n2 }, cacheable: true }, r2);
+    return e2.transporter.read({ method: eo, path: Zr("1/answers/%s/prediction", e2.indexName), data: { query: t2, queryLanguages: n2 }, cacheable: true }, r2);
   };
-}, Xo = function(e2) {
+}, po = function(e2) {
   return function(t2, n2) {
-    return e2.transporter.read({ method: Ho, path: ko("1/indexes/%s/query", e2.indexName), data: { query: t2 }, cacheable: true }, n2);
+    return e2.transporter.read({ method: eo, path: Zr("1/indexes/%s/query", e2.indexName), data: { query: t2 }, cacheable: true }, n2);
   };
-}, ei = function(e2) {
+}, mo = function(e2) {
   return function(t2, n2, r2) {
-    return e2.transporter.read({ method: Ho, path: ko("1/indexes/%s/facets/%s/query", e2.indexName, t2), data: { facetQuery: n2 }, cacheable: true }, r2);
+    return e2.transporter.read({ method: eo, path: Zr("1/indexes/%s/facets/%s/query", e2.indexName, t2), data: { facetQuery: n2 }, cacheable: true }, r2);
   };
-}, ti = 1, ni = 2, ri = 3;
-function oi(e2, n2, r2) {
-  var o2, i2 = { appId: e2, apiKey: n2, timeouts: { connect: 1, read: 2, write: 30 }, requester: { send: function(e3) {
+};
+function vo(e2, n2, r2) {
+  var o2 = { appId: e2, apiKey: n2, timeouts: { connect: 1, read: 2, write: 30 }, requester: { send: function(e3) {
     return new Promise(function(t2) {
       var n3 = new XMLHttpRequest();
       n3.open(e3.method, e3.url, true), Object.keys(e3.headers).forEach(function(t3) {
@@ -16639,201 +16237,150 @@ function oi(e2, n2, r2) {
         return setTimeout(function() {
           n3.abort(), t2({ status: 0, content: r4, isTimedOut: true });
         }, 1e3 * e4);
-      }, i3 = o3(e3.connectTimeout, "Connection timeout");
+      }, i2 = o3(e3.connectTimeout, "Connection timeout");
       n3.onreadystatechange = function() {
-        n3.readyState > n3.OPENED && void 0 === r3 && (clearTimeout(i3), r3 = o3(e3.responseTimeout, "Socket timeout"));
+        n3.readyState > n3.OPENED && void 0 === r3 && (clearTimeout(i2), r3 = o3(e3.responseTimeout, "Socket timeout"));
       }, n3.onerror = function() {
-        0 === n3.status && (clearTimeout(i3), clearTimeout(r3), t2({ content: n3.responseText || "Network request failed", status: n3.status, isTimedOut: false }));
+        0 === n3.status && (clearTimeout(i2), clearTimeout(r3), t2({ content: n3.responseText || "Network request failed", status: n3.status, isTimedOut: false }));
       }, n3.onload = function() {
-        clearTimeout(i3), clearTimeout(r3), t2({ content: n3.responseText, status: n3.status, isTimedOut: false });
+        clearTimeout(i2), clearTimeout(r3), t2({ content: n3.responseText, status: n3.status, isTimedOut: false });
       }, n3.send(e3.data);
     });
-  } }, logger: (o2 = ri, { debug: function(e3, t2) {
-    return ti >= o2 && console.debug(e3, t2), Promise.resolve();
+  } }, logger: { debug: function(e3, t2) {
+    return Promise.resolve();
   }, info: function(e3, t2) {
-    return ni >= o2 && console.info(e3, t2), Promise.resolve();
+    return Promise.resolve();
   }, error: function(e3, t2) {
     return console.error(e3, t2), Promise.resolve();
-  } }), responsesCache: Po(), requestsCache: Po({ serializable: false }), hostsCache: Eo({ caches: [jo({ key: "".concat("4.19.1", "-").concat(e2) }), Po()] }), userAgent: Bo("4.19.1").add({ segment: "Browser", version: "lite" }), authMode: Ao.WithinQueryParameters };
-  return Jo(t$1(t$1(t$1({}, i2), r2), {}, { methods: { search: Zo, searchForFacetValues: Yo, multipleQueries: Zo, multipleSearchForFacetValues: Yo, customRequest: $o, initIndex: function(e3) {
+  } }, responsesCache: zr(), requestsCache: zr({ serializable: false }), hostsCache: Wr({ caches: [Kr({ key: "4.19.1-".concat(e2) }), zr()] }), userAgent: no("4.19.1").add({ segment: "Browser", version: "lite" }), authMode: 0 };
+  return function(e3) {
+    var n3 = e3.appId, r3 = /* @__PURE__ */ function(e4, t2, n4) {
+      var r4 = { "x-algolia-api-key": n4, "x-algolia-application-id": t2 };
+      return { headers: function() {
+        return 1 === e4 ? r4 : {};
+      }, queryParameters: function() {
+        return 0 === e4 ? r4 : {};
+      } };
+    }(void 0 !== e3.authMode ? e3.authMode : 1, n3, e3.apiKey), o3 = function(e4) {
+      var t2 = e4.hostsCache, n4 = e4.logger, r4 = e4.requester, o4 = e4.requestsCache, c3 = e4.responsesCache, a2 = e4.timeouts, u2 = e4.userAgent, l2 = e4.hosts, s2 = e4.queryParameters, f2 = { hostsCache: t2, logger: n4, requester: r4, requestsCache: o4, responsesCache: c3, timeouts: a2, userAgent: u2, headers: e4.headers, queryParameters: s2, hosts: l2.map(function(e5) {
+        return Xr(e5);
+      }), read: function(e5, t3) {
+        var n5 = Qr(t3, f2.timeouts.read), r5 = function() {
+          return to$1(f2, f2.hosts.filter(function(e6) {
+            return 0 != (e6.accept & Gr.Read);
+          }), e5, n5);
+        };
+        if (true !== (void 0 !== n5.cacheable ? n5.cacheable : e5.cacheable)) return r5();
+        var o5 = { request: e5, mappedRequestOptions: n5, transporter: { queryParameters: f2.queryParameters, headers: f2.headers } };
+        return f2.responsesCache.get(o5, function() {
+          return f2.requestsCache.get(o5, function() {
+            return f2.requestsCache.set(o5, r5()).then(function(e6) {
+              return Promise.all([f2.requestsCache.delete(o5), e6]);
+            }, function(e6) {
+              return Promise.all([f2.requestsCache.delete(o5), Promise.reject(e6)]);
+            }).then(function(e6) {
+              var t4 = i$1(e6, 2);
+              return t4[0], t4[1];
+            });
+          });
+        }, { miss: function(e6) {
+          return f2.responsesCache.set(o5, e6);
+        } });
+      }, write: function(e5, t3) {
+        return to$1(f2, f2.hosts.filter(function(e6) {
+          return 0 != (e6.accept & Gr.Write);
+        }), e5, Qr(t3, f2.timeouts.write));
+      } };
+      return f2;
+    }(t$1(t$1({ hosts: [{ url: "".concat(n3, "-dsn.algolia.net"), accept: Gr.Read }, { url: "".concat(n3, ".algolia.net"), accept: Gr.Write }].concat(Jr([{ url: "".concat(n3, "-1.algolianet.com") }, { url: "".concat(n3, "-2.algolianet.com") }, { url: "".concat(n3, "-3.algolianet.com") }])) }, e3), {}, { headers: t$1(t$1({}, r3.headers()), {}, { "content-type": "application/x-www-form-urlencoded" }, e3.headers), queryParameters: t$1(t$1({}, r3.queryParameters()), e3.queryParameters) })), c2 = { transporter: o3, appId: n3, addAlgoliaAgent: function(e4, t2) {
+      o3.userAgent.add({ segment: e4, version: t2 });
+    }, clearCache: function() {
+      return Promise.all([o3.requestsCache.clear(), o3.responsesCache.clear()]).then(function() {
+      });
+    } };
+    return $r(c2, e3.methods);
+  }(t$1(t$1(t$1({}, o2), r2), {}, { methods: { search: lo, searchForFacetValues: so, multipleQueries: lo, multipleSearchForFacetValues: so, customRequest: ao, initIndex: function(e3) {
     return function(t2) {
-      return Qo(e3)(t2, { methods: { search: Xo, searchForFacetValues: ei, findAnswers: Go } });
+      return uo(e3)(t2, { methods: { search: po, searchForFacetValues: mo, findAnswers: fo } });
     };
   } } }));
 }
-oi.version = "4.19.1";
-var ii = ["footer", "searchBox"];
-function ci() {
-  return ci = Object.assign || function(e2) {
-    for (var t2 = 1; t2 < arguments.length; t2++) {
-      var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
-    }
-    return e2;
-  }, ci.apply(this, arguments);
-}
-function ai(e2, t2) {
-  var n2 = Object.keys(e2);
-  if (Object.getOwnPropertySymbols) {
-    var r2 = Object.getOwnPropertySymbols(e2);
-    t2 && (r2 = r2.filter(function(t3) {
-      return Object.getOwnPropertyDescriptor(e2, t3).enumerable;
-    })), n2.push.apply(n2, r2);
-  }
-  return n2;
-}
-function ui(e2) {
-  for (var t2 = 1; t2 < arguments.length; t2++) {
-    var n2 = null != arguments[t2] ? arguments[t2] : {};
-    t2 % 2 ? ai(Object(n2), true).forEach(function(t3) {
-      li(e2, t3, n2[t3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : ai(Object(n2)).forEach(function(t3) {
-      Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3));
-    });
-  }
-  return e2;
-}
-function li(e2, t2, n2) {
-  return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2;
-}
-function si(e2, t2) {
-  return function(e3) {
-    if (Array.isArray(e3))
-      return e3;
-  }(e2) || function(e3, t3) {
-    var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
-    if (null == n2)
-      return;
-    var r2, o2, i2 = [], c2 = true, a2 = false;
-    try {
-      for (n2 = n2.call(e3); !(c2 = (r2 = n2.next()).done) && (i2.push(r2.value), !t3 || i2.length !== t3); c2 = true)
-        ;
-    } catch (e4) {
-      a2 = true, o2 = e4;
-    } finally {
-      try {
-        c2 || null == n2.return || n2.return();
-      } finally {
-        if (a2)
-          throw o2;
-      }
-    }
-    return i2;
-  }(e2, t2) || function(e3, t3) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return fi(e3, t3);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return fi(e3, t3);
-  }(e2, t2) || function() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }();
-}
-function fi(e2, t2) {
-  (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
-  return r2;
-}
-function pi(e2, t2) {
-  if (null == e2)
-    return {};
-  var n2, r2, o2 = function(e3, t3) {
-    if (null == e3)
-      return {};
-    var n3, r3, o3 = {}, i3 = Object.keys(e3);
-    for (r3 = 0; r3 < i3.length; r3++)
-      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
-    return o3;
-  }(e2, t2);
-  if (Object.getOwnPropertySymbols) {
-    var i2 = Object.getOwnPropertySymbols(e2);
-    for (r2 = 0; r2 < i2.length; r2++)
-      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
-  }
-  return o2;
-}
-function mi(e2) {
-  var t2 = e2.appId, n2 = e2.apiKey, r2 = e2.indexName, o2 = e2.placeholder, i2 = void 0 === o2 ? "Search docs" : o2, c2 = e2.searchParameters, a2 = e2.maxResultsPerGroup, u2 = e2.onClose, l2 = void 0 === u2 ? eo : u2, s2 = e2.transformItems, f2 = void 0 === s2 ? Gr : s2, p2 = e2.hitComponent, m2 = void 0 === p2 ? Or : p2, v2 = e2.resultsFooterComponent, d2 = void 0 === v2 ? function() {
+vo.version = "4.19.1";
+var ho = ["footer", "searchBox"];
+function yo(e2) {
+  var t2 = e2.appId, n2 = e2.apiKey, r2 = e2.indexName, o2 = e2.placeholder, i2 = void 0 === o2 ? "Search docs" : o2, c2 = e2.searchParameters, a2 = e2.maxResultsPerGroup, u2 = e2.onClose, l2 = void 0 === u2 ? Ar : u2, s2 = e2.transformItems, f2 = void 0 === s2 ? kr : s2, p2 = e2.hitComponent, m2 = void 0 === p2 ? ur : p2, v2 = e2.resultsFooterComponent, d2 = void 0 === v2 ? function() {
     return null;
-  } : v2, y2 = e2.navigator, h22 = e2.initialScrollY, b2 = void 0 === h22 ? 0 : h22, g2 = e2.transformSearchClient, _2 = void 0 === g2 ? Gr : g2, O2 = e2.disableUserPersonalization, S2 = void 0 !== O2 && O2, w2 = e2.initialQuery, j2 = void 0 === w2 ? "" : w2, E2 = e2.translations, P2 = void 0 === E2 ? {} : E2, I2 = e2.getMissingResultsUrl, D2 = e2.insights, k2 = void 0 !== D2 && D2, A2 = P2.footer, C2 = P2.searchBox, N2 = pi(P2, ii), x2 = si(Be.useState({ query: "", collections: [], completion: null, context: {}, isOpen: false, activeItemId: null, status: "idle" }), 2), T2 = x2[0], R2 = x2[1], q2 = Be.useRef(null), L2 = Be.useRef(null), M2 = Be.useRef(null), H2 = Be.useRef(null), U2 = Be.useRef(null), F2 = Be.useRef(10), B2 = Be.useRef("undefined" != typeof window ? window.getSelection().toString().slice(0, 64) : "").current, V2 = Be.useRef(j2 || B2).current, K2 = function(e3, t3, n3) {
-    return Be.useMemo(function() {
-      var r3 = oi(e3, t3);
-      return r3.addAlgoliaAgent("docsearch", "3.6.0"), false === /docsearch.js \(.*\)/.test(r3.transporter.userAgent.value) && r3.addAlgoliaAgent("docsearch-react", "3.6.0"), n3(r3);
+  } : v2, h3 = e2.navigator, y2 = e2.initialScrollY, _2 = void 0 === y2 ? 0 : y2, b2 = e2.transformSearchClient, g2 = void 0 === b2 ? kr : b2, S2 = e2.disableUserPersonalization, O2 = void 0 !== S2 && S2, w2 = e2.initialQuery, E2 = void 0 === w2 ? "" : w2, j2 = e2.translations, P2 = void 0 === j2 ? {} : j2, I2 = e2.getMissingResultsUrl, D2 = e2.insights, k2 = void 0 !== D2 && D2, C2 = P2.footer, A2 = P2.searchBox, x2 = Je(P2, ho), N2 = $e(Fe.useState({ query: "", collections: [], completion: null, context: {}, isOpen: false, activeItemId: null, status: "idle" }), 2), T2 = N2[0], R2 = N2[1], q2 = Fe.useRef(null), L2 = Fe.useRef(null), M2 = Fe.useRef(null), H2 = Fe.useRef(null), U2 = Fe.useRef(null), F2 = Fe.useRef(10), B2 = Fe.useRef("undefined" != typeof window ? window.getSelection().toString().slice(0, 64) : "").current, V2 = Fe.useRef(E2 || B2).current, K2 = function(e3, t3, n3) {
+    return Fe.useMemo(function() {
+      var r3 = vo(e3, t3);
+      return r3.addAlgoliaAgent("docsearch", "3.6.1"), false === /docsearch.js \(.*\)/.test(r3.transporter.userAgent.value) && r3.addAlgoliaAgent("docsearch-react", "3.6.1"), n3(r3);
     }, [e3, t3, n3]);
-  }(t2, n2, _2), W2 = Be.useRef(So({ key: "__DOCSEARCH_FAVORITE_SEARCHES__".concat(r2), limit: 10 })).current, z2 = Be.useRef(So({ key: "__DOCSEARCH_RECENT_SEARCHES__".concat(r2), limit: 0 === W2.getAll().length ? 7 : 4 })).current, J2 = Be.useCallback(function(e3) {
-    if (!S2) {
+  }(t2, n2, g2), W2 = Fe.useRef(Vr({ key: "__DOCSEARCH_FAVORITE_SEARCHES__".concat(r2), limit: 10 })).current, z2 = Fe.useRef(Vr({ key: "__DOCSEARCH_RECENT_SEARCHES__".concat(r2), limit: 0 === W2.getAll().length ? 7 : 4 })).current, J2 = Fe.useCallback(function(e3) {
+    if (!O2) {
       var t3 = "content" === e3.type ? e3.__docsearch_parent : e3;
       t3 && -1 === W2.getAll().findIndex(function(e4) {
         return e4.objectID === t3.objectID;
       }) && z2.add(t3);
     }
-  }, [W2, z2, S2]), $2 = Be.useCallback(function(e3) {
+  }, [W2, z2, O2]), $2 = Fe.useCallback(function(e3) {
     if (T2.context.algoliaInsightsPlugin && e3.__autocomplete_id) {
       var t3 = e3, n3 = { eventName: "Item Selected", index: t3.__autocomplete_indexName, items: [t3], positions: [e3.__autocomplete_id], queryID: t3.__autocomplete_queryID };
       T2.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(n3);
     }
-  }, [T2.context.algoliaInsightsPlugin]), Q2 = Be.useMemo(function() {
-    return hr({ id: "docsearch", defaultActiveItemId: 0, placeholder: i2, openOnFocus: true, initialState: { query: V2, context: { searchSuggestions: [] } }, insights: k2, navigator: y2, onStateChange: function(e3) {
+  }, [T2.context.algoliaInsightsPlugin]), Z2 = Fe.useMemo(function() {
+    return or({ id: "docsearch", defaultActiveItemId: 0, placeholder: i2, openOnFocus: true, initialState: { query: V2, context: { searchSuggestions: [] } }, insights: k2, navigator: h3, onStateChange: function(e3) {
       R2(e3.state);
     }, getSources: function(e3) {
       var o3 = e3.query, i3 = e3.state, u3 = e3.setContext, s3 = e3.setStatus;
-      if (!o3)
-        return S2 ? [] : [{ sourceId: "recentSearches", onSelect: function(e4) {
-          var t3 = e4.item, n3 = e4.event;
-          J2(t3), Xr(n3) || l2();
-        }, getItemUrl: function(e4) {
-          return e4.item.url;
-        }, getItems: function() {
-          return z2.getAll();
-        } }, { sourceId: "favoriteSearches", onSelect: function(e4) {
-          var t3 = e4.item, n3 = e4.event;
-          J2(t3), Xr(n3) || l2();
-        }, getItemUrl: function(e4) {
-          return e4.item.url;
-        }, getItems: function() {
-          return W2.getAll();
-        } }];
+      if (!o3) return O2 ? [] : [{ sourceId: "recentSearches", onSelect: function(e4) {
+        var t3 = e4.item, n3 = e4.event;
+        J2(t3), Cr(n3) || l2();
+      }, getItemUrl: function(e4) {
+        return e4.item.url;
+      }, getItems: function() {
+        return z2.getAll();
+      } }, { sourceId: "favoriteSearches", onSelect: function(e4) {
+        var t3 = e4.item, n3 = e4.event;
+        J2(t3), Cr(n3) || l2();
+      }, getItemUrl: function(e4) {
+        return e4.item.url;
+      }, getItems: function() {
+        return W2.getAll();
+      } }];
       var p3 = Boolean(k2);
-      return K2.search([{ query: o3, indexName: r2, params: ui({ attributesToRetrieve: ["hierarchy.lvl0", "hierarchy.lvl1", "hierarchy.lvl2", "hierarchy.lvl3", "hierarchy.lvl4", "hierarchy.lvl5", "hierarchy.lvl6", "content", "type", "url"], attributesToSnippet: ["hierarchy.lvl1:".concat(F2.current), "hierarchy.lvl2:".concat(F2.current), "hierarchy.lvl3:".concat(F2.current), "hierarchy.lvl4:".concat(F2.current), "hierarchy.lvl5:".concat(F2.current), "hierarchy.lvl6:".concat(F2.current), "content:".concat(F2.current)], snippetEllipsisText: "…", highlightPreTag: "<mark>", highlightPostTag: "</mark>", hitsPerPage: 20, clickAnalytics: p3 }, c2) }]).catch(function(e4) {
+      return K2.search([{ query: o3, indexName: r2, params: Ke({ attributesToRetrieve: ["hierarchy.lvl0", "hierarchy.lvl1", "hierarchy.lvl2", "hierarchy.lvl3", "hierarchy.lvl4", "hierarchy.lvl5", "hierarchy.lvl6", "content", "type", "url"], attributesToSnippet: ["hierarchy.lvl1:".concat(F2.current), "hierarchy.lvl2:".concat(F2.current), "hierarchy.lvl3:".concat(F2.current), "hierarchy.lvl4:".concat(F2.current), "hierarchy.lvl5:".concat(F2.current), "hierarchy.lvl6:".concat(F2.current), "content:".concat(F2.current)], snippetEllipsisText: "…", highlightPreTag: "<mark>", highlightPostTag: "</mark>", hitsPerPage: 20, clickAnalytics: p3 }, c2) }]).catch(function(e4) {
         throw "RetryError" === e4.name && s3("error"), e4;
       }).then(function(e4) {
-        var o4 = e4.results[0], c3 = o4.hits, s4 = o4.nbHits, m3 = Yr(c3, function(e5) {
-          return ro(e5);
+        var o4 = e4.results[0], c3 = o4.hits, s4 = o4.nbHits, m3 = Dr(c3, function(e5) {
+          return Tr(e5);
         }, a2);
         i3.context.searchSuggestions.length < Object.keys(m3).length && u3({ searchSuggestions: Object.keys(m3) }), u3({ nbHits: s4 });
         var v3 = {};
         return p3 && (v3 = { __autocomplete_indexName: r2, __autocomplete_queryID: o4.queryID, __autocomplete_algoliaCredentials: { appId: t2, apiKey: n2 } }), Object.values(m3).map(function(e5, t3) {
           return { sourceId: "hits".concat(t3), onSelect: function(e6) {
             var t4 = e6.item, n3 = e6.event;
-            J2(t4), Xr(n3) || l2();
+            J2(t4), Cr(n3) || l2();
           }, getItemUrl: function(e6) {
             return e6.item.url;
           }, getItems: function() {
-            return Object.values(Yr(e5, function(e6) {
+            return Object.values(Dr(e5, function(e6) {
               return e6.hierarchy.lvl1;
             }, a2)).map(f2).map(function(e6) {
               return e6.map(function(t4) {
                 var n3 = null, r3 = e6.find(function(e7) {
                   return "lvl1" === e7.type && e7.hierarchy.lvl1 === t4.hierarchy.lvl1;
                 });
-                return "lvl1" !== t4.type && r3 && (n3 = r3), ui(ui({}, t4), {}, { __docsearch_parent: n3 }, v3);
+                return "lvl1" !== t4.type && r3 && (n3 = r3), Ke(Ke({}, t4), {}, { __docsearch_parent: n3 }, v3);
               });
             }).flat();
           } };
         });
       });
     } });
-  }, [r2, c2, a2, K2, l2, z2, W2, J2, V2, i2, y2, f2, S2, k2, t2, n2]), Z2 = Q2.getEnvironmentProps, Y2 = Q2.getRootProps, G2 = Q2.refresh;
+  }, [r2, c2, a2, K2, l2, z2, W2, J2, V2, i2, h3, f2, O2, k2, t2, n2]), Q2 = Z2.getEnvironmentProps, G2 = Z2.getRootProps, Y2 = Z2.refresh;
   return function(e3) {
     var t3 = e3.getEnvironmentProps, n3 = e3.panelElement, r3 = e3.formElement, o3 = e3.inputElement;
-    Be.useEffect(function() {
+    Fe.useEffect(function() {
       if (n3 && r3 && o3) {
         var e4 = t3({ panelElement: n3, formElement: r3, inputElement: o3 }), i3 = e4.onTouchStart, c3 = e4.onTouchMove;
         return window.addEventListener("touchstart", i3), window.addEventListener("touchmove", c3), function() {
@@ -16841,9 +16388,9 @@ function mi(e2) {
         };
       }
     }, [t3, n3, r3, o3]);
-  }({ getEnvironmentProps: Z2, panelElement: H2.current, formElement: M2.current, inputElement: U2.current }), function(e3) {
+  }({ getEnvironmentProps: Q2, panelElement: H2.current, formElement: M2.current, inputElement: U2.current }), function(e3) {
     var t3 = e3.container;
-    Be.useEffect(function() {
+    Fe.useEffect(function() {
       if (t3) {
         var e4 = t3.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), input:not([disabled])"), n3 = e4[0], r3 = e4[e4.length - 1];
         return t3.addEventListener("keydown", o3), function() {
@@ -16854,18 +16401,18 @@ function mi(e2) {
         "Tab" === e5.key && (e5.shiftKey ? document.activeElement === n3 && (e5.preventDefault(), r3.focus()) : document.activeElement === r3 && (e5.preventDefault(), n3.focus()));
       }
     }, [t3]);
-  }({ container: q2.current }), Be.useEffect(function() {
+  }({ container: q2.current }), Fe.useEffect(function() {
     return document.body.classList.add("DocSearch--active"), function() {
       var e3, t3;
-      document.body.classList.remove("DocSearch--active"), null === (e3 = (t3 = window).scrollTo) || void 0 === e3 || e3.call(t3, 0, b2);
+      document.body.classList.remove("DocSearch--active"), null === (e3 = (t3 = window).scrollTo) || void 0 === e3 || e3.call(t3, 0, _2);
     };
-  }, []), Be.useEffect(function() {
+  }, []), Fe.useEffect(function() {
     window.matchMedia("(max-width: 768px)").matches && (F2.current = 5);
-  }, []), Be.useEffect(function() {
+  }, []), Fe.useEffect(function() {
     H2.current && (H2.current.scrollTop = 0);
-  }, [T2.query]), Be.useEffect(function() {
-    V2.length > 0 && (G2(), U2.current && U2.current.focus());
-  }, [V2, G2]), Be.useEffect(function() {
+  }, [T2.query]), Fe.useEffect(function() {
+    V2.length > 0 && (Y2(), U2.current && U2.current.focus());
+  }, [V2, Y2]), Fe.useEffect(function() {
     function e3() {
       if (L2.current) {
         var e4 = 0.01 * window.innerHeight;
@@ -16875,75 +16422,21 @@ function mi(e2) {
     return e3(), window.addEventListener("resize", e3), function() {
       window.removeEventListener("resize", e3);
     };
-  }, []), Be.createElement("div", ci({ ref: q2 }, Y2({ "aria-expanded": true }), { className: ["DocSearch", "DocSearch-Container", "stalled" === T2.status && "DocSearch-Container--Stalled", "error" === T2.status && "DocSearch-Container--Errored"].filter(Boolean).join(" "), role: "button", tabIndex: 0, onMouseDown: function(e3) {
+  }, []), Fe.createElement("div", ze({ ref: q2 }, G2({ "aria-expanded": true }), { className: ["DocSearch", "DocSearch-Container", "stalled" === T2.status && "DocSearch-Container--Stalled", "error" === T2.status && "DocSearch-Container--Errored"].filter(Boolean).join(" "), role: "button", tabIndex: 0, onMouseDown: function(e3) {
     e3.target === e3.currentTarget && l2();
-  } }), Be.createElement("div", { className: "DocSearch-Modal", ref: L2 }, Be.createElement("header", { className: "DocSearch-SearchBar", ref: M2 }, Be.createElement(bo, ci({}, Q2, { state: T2, autoFocus: 0 === V2.length, inputRef: U2, isFromSelection: Boolean(V2) && V2 === B2, translations: C2, onClose: l2 }))), Be.createElement("div", { className: "DocSearch-Dropdown", ref: H2 }, Be.createElement(mo, ci({}, Q2, { indexName: r2, state: T2, hitComponent: m2, resultsFooterComponent: d2, disableUserPersonalization: S2, recentSearches: z2, favoriteSearches: W2, inputRef: U2, translations: N2, getMissingResultsUrl: I2, onItemClick: function(e3, t3) {
-    $2(e3), J2(e3), Xr(t3) || l2();
-  } }))), Be.createElement("footer", { className: "DocSearch-Footer" }, Be.createElement(_r, { translations: A2 }))));
-}
-function vi() {
-  return vi = Object.assign || function(e2) {
-    for (var t2 = 1; t2 < arguments.length; t2++) {
-      var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
-    }
-    return e2;
-  }, vi.apply(this, arguments);
+  } }), Fe.createElement("div", { className: "DocSearch-Modal", ref: L2 }, Fe.createElement("header", { className: "DocSearch-SearchBar", ref: M2 }, Fe.createElement(Fr, ze({}, Z2, { state: T2, autoFocus: 0 === V2.length, inputRef: U2, isFromSelection: Boolean(V2) && V2 === B2, translations: A2, onClose: l2 }))), Fe.createElement("div", { className: "DocSearch-Dropdown", ref: H2 }, Fe.createElement(Hr, ze({}, Z2, { indexName: r2, state: T2, hitComponent: m2, resultsFooterComponent: d2, disableUserPersonalization: O2, recentSearches: z2, favoriteSearches: W2, inputRef: U2, translations: x2, getMissingResultsUrl: I2, onItemClick: function(e3, t3) {
+    $2(e3), J2(e3), Cr(t3) || l2();
+  } }))), Fe.createElement("footer", { className: "DocSearch-Footer" }, Fe.createElement(ar, { translations: C2 }))));
 }
-function di(e2, t2) {
-  return function(e3) {
-    if (Array.isArray(e3))
-      return e3;
-  }(e2) || function(e3, t3) {
-    var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
-    if (null == n2)
-      return;
-    var r2, o2, i2 = [], c2 = true, a2 = false;
-    try {
-      for (n2 = n2.call(e3); !(c2 = (r2 = n2.next()).done) && (i2.push(r2.value), !t3 || i2.length !== t3); c2 = true)
-        ;
-    } catch (e4) {
-      a2 = true, o2 = e4;
-    } finally {
-      try {
-        c2 || null == n2.return || n2.return();
-      } finally {
-        if (a2)
-          throw o2;
-      }
-    }
-    return i2;
-  }(e2, t2) || function(e3, t3) {
-    if (!e3)
-      return;
-    if ("string" == typeof e3)
-      return yi(e3, t3);
-    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
-    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
-    if ("Map" === n2 || "Set" === n2)
-      return Array.from(e3);
-    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
-      return yi(e3, t3);
-  }(e2, t2) || function() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }();
-}
-function yi(e2, t2) {
-  (null == t2 || t2 > e2.length) && (t2 = e2.length);
-  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
-    r2[n2] = e2[n2];
-  return r2;
-}
-function hi(e2) {
-  var t2, n2, r2 = Be.useRef(null), o2 = di(Be.useState(false), 2), i2 = o2[0], c2 = o2[1], a2 = di(Be.useState((null == e2 ? void 0 : e2.initialQuery) || void 0), 2), u2 = a2[0], l2 = a2[1], s2 = Be.useCallback(function() {
+function _o(e2) {
+  var t2, n2, r2 = Fe.useRef(null), o2 = $e(Fe.useState(false), 2), i2 = o2[0], c2 = o2[1], a2 = $e(Fe.useState((null == e2 ? void 0 : e2.initialQuery) || void 0), 2), u2 = a2[0], l2 = a2[1], s2 = Fe.useCallback(function() {
     c2(true);
-  }, [c2]), f2 = Be.useCallback(function() {
+  }, [c2]), f2 = Fe.useCallback(function() {
     c2(false);
   }, [c2]);
   return function(e3) {
     var t3 = e3.isOpen, n3 = e3.onOpen, r3 = e3.onClose, o3 = e3.onInput, i3 = e3.searchButtonRef;
-    Be.useEffect(function() {
+    Fe.useEffect(function() {
       function e4(e5) {
         var c3;
         (27 === e5.keyCode && t3 || "k" === (null === (c3 = e5.key) || void 0 === c3 ? void 0 : c3.toLowerCase()) && (e5.metaKey || e5.ctrlKey) || !function(e6) {
@@ -16955,13 +16448,13 @@ function hi(e2) {
         window.removeEventListener("keydown", e4);
       };
     }, [t3, n3, r3, o3, i3]);
-  }({ isOpen: i2, onOpen: s2, onClose: f2, onInput: Be.useCallback(function(e3) {
+  }({ isOpen: i2, onOpen: s2, onClose: f2, onInput: Fe.useCallback(function(e3) {
     c2(true), l2(e3.key);
-  }, [c2, l2]), searchButtonRef: r2 }), Be.createElement(Be.Fragment, null, Be.createElement(Ze, { ref: r2, translations: null == e2 || null === (t2 = e2.translations) || void 0 === t2 ? void 0 : t2.button, onClick: s2 }), i2 && Ie(Be.createElement(mi, vi({}, e2, { initialScrollY: window.scrollY, initialQuery: u2, translations: null == e2 || null === (n2 = e2.translations) || void 0 === n2 ? void 0 : n2.modal, onClose: f2 })), document.body));
+  }, [c2, l2]), searchButtonRef: r2 }), Fe.createElement(Fe.Fragment, null, Fe.createElement(et, { ref: r2, translations: null == e2 || null === (t2 = e2.translations) || void 0 === t2 ? void 0 : t2.button, onClick: s2 }), i2 && Pe(Fe.createElement(yo, ze({}, e2, { initialScrollY: window.scrollY, initialQuery: u2, translations: null == e2 || null === (n2 = e2.translations) || void 0 === n2 ? void 0 : n2.modal, onClose: f2 })), document.body));
 }
-function bi(e2) {
-  Ce(Be.createElement(hi, o$1({}, e2, { transformSearchClient: function(t2) {
-    return t2.addAlgoliaAgent("docsearch.js", "3.6.0"), e2.transformSearchClient ? e2.transformSearchClient(t2) : t2;
+function bo(e2) {
+  Ce(Fe.createElement(_o, o$1({}, e2, { transformSearchClient: function(t2) {
+    return t2.addAlgoliaAgent("docsearch.js", "3.6.1"), e2.transformSearchClient ? e2.transformSearchClient(t2) : t2;
   } })), function(e3) {
     var t2 = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : window;
     return "string" == typeof e3 ? t2.document.querySelector(e3) : e3;
@@ -17000,6 +16493,18 @@ const _sfc_main$8 = {
   }
 };
 const Ads = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "Ads.vue"]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "Banner",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const frontmatter = usePageFrontmatter();
+    const preview_component = frontmatter.value.preview_component;
+    const pro_component = frontmatter.value.pro_component;
+    const __returned__ = { frontmatter, preview_component, pro_component };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
 const _hoisted_1$7 = {
   key: 0,
   class: "bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5"
@@ -17019,29 +16524,21 @@ const _hoisted_5$1 = {
   class: "bg-warning d-none d-lg-block bg-opacity-10 border-start border-start-5 border-start-warning p-4 pb-3 mb-5"
 };
 const _hoisted_6$1 = /* @__PURE__ */ createBaseVNode("h3", { className: "mb-4" }, "Alpha release", -1);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "Banner",
-  setup(__props) {
-    const frontmatter = usePageFrontmatter();
-    const preview_component = frontmatter.value.preview_component;
-    const pro_component = frontmatter.value.pro_component;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        unref(pro_component) ? (openBlock(), createElementBlock("div", _hoisted_1$7, _hoisted_4$3)) : createCommentVNode("", true),
-        unref(preview_component) ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
-          _hoisted_6$1,
-          createBaseVNode("p", null, [
-            createTextVNode(" This component is in the Alpha phase and has an experimental API, which can be changed in the final release. If you want to use this component, please install "),
-            createBaseVNode("strong", null, "@coreui/coreui-pro " + toDisplayString(unref(preview_component)), 1),
-            createTextVNode(" and "),
-            createBaseVNode("strong", null, "@coreui/vue-pro " + toDisplayString(unref(preview_component)), 1)
-          ])
-        ])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "Banner.vue"]]);
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(Fragment, null, [
+    $setup.pro_component ? (openBlock(), createElementBlock("div", _hoisted_1$7, _hoisted_4$3)) : createCommentVNode("", true),
+    $setup.preview_component ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+      _hoisted_6$1,
+      createBaseVNode("p", null, [
+        createTextVNode(" This component is in the Alpha phase and has an experimental API, which can be changed in the final release. If you want to use this component, please install "),
+        createBaseVNode("strong", null, "@coreui/coreui-pro " + toDisplayString($setup.preview_component), 1),
+        createTextVNode(" and "),
+        createBaseVNode("strong", null, "@coreui/vue-pro " + toDisplayString($setup.preview_component), 1)
+      ])
+    ])) : createCommentVNode("", true)
+  ], 64);
+}
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__file", "Banner.vue"]]);
 const _sfc_main$6 = {};
 const _hoisted_1$6 = /* @__PURE__ */ createBaseVNode("ul", { class: "docs-footer-links ps-0 mb-3" }, [
   /* @__PURE__ */ createBaseVNode("li", { class: "d-inline-block" }, [
@@ -17081,7 +16578,7 @@ const _hoisted_3$5 = /* @__PURE__ */ createBaseVNode("p", { class: "mb-0" }, [
     /* @__PURE__ */ createTextVNode(".")
   ])
 ], -1);
-function _sfc_render(_ctx, _cache) {
+function _sfc_render$6(_ctx, _cache) {
   const _component_CContainer = resolveComponent("CContainer");
   const _component_CFooter = resolveComponent("CFooter");
   return openBlock(), createBlock(_component_CFooter, { class: "docs-footer p-3 p-md-5 mt-5 text-center text-sm-start" }, {
@@ -17098,7 +16595,7 @@ function _sfc_render(_ctx, _cache) {
     _: 1
   });
 }
-const Footer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render], ["__file", "Footer.vue"]]);
+const Footer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__file", "Footer.vue"]]);
 const CAccordion = /* @__PURE__ */ defineComponent({
   name: "CAccordion",
   props: {
@@ -17147,8 +16644,7 @@ const vVisible = {
     }
   },
   updated(el, { value, oldValue }, { transition }) {
-    if (!value === !oldValue)
-      return;
+    if (!value === !oldValue) return;
     if (transition) {
       if (value) {
         transition.beforeEnter(el);
@@ -17966,8 +17462,9 @@ const CButton = /* @__PURE__ */ defineComponent({
       {
         class: [
           "btn",
-          props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
           {
+            [`btn-${props.color}`]: props.color && !props.variant,
+            [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
             [`btn-${props.size}`]: props.size,
             active: props.active,
             disabled: props.disabled
@@ -18932,8 +18429,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                 color: "transparent",
                 size: "sm",
                 onClick: () => {
-                  if (props.navigation)
-                    view.value = "months";
+                  if (props.navigation) view.value = "months";
                 }
               },
               () => _calendarDate.toLocaleDateString(props.locale, { month: "long" })
@@ -18944,8 +18440,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                 color: "transparent",
                 size: "sm",
                 onClick: () => {
-                  if (props.navigation)
-                    view.value = "years";
+                  if (props.navigation) view.value = "years";
                 },
                 ...props.navYearFirst && { style: { order: "-1" } }
               },
@@ -20838,8 +20333,7 @@ function flip(_ref) {
     };
     for (var _i = numberOfChecks; _i > 0; _i--) {
       var _ret = _loop(_i);
-      if (_ret === "break")
-        break;
+      if (_ret === "break") break;
     }
   }
   if (state.placement !== firstFittingPlacement) {
@@ -21917,6 +21411,12 @@ const CTimePicker = /* @__PURE__ */ defineComponent({
       type: [Array, Boolean, Function],
       default: true
     },
+    /**
+     * Set the name attribute for the input element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -22118,6 +21618,8 @@ const CTimePicker = /* @__PURE__ */ defineComponent({
         autocomplete: "off",
         class: "time-picker-input",
         disabled: props.disabled,
+        id: props.id,
+        name: props.name,
         onInput: (event) => useDebouncedCallback(() => {
           if (isValidTime(event.target.value)) {
             date.value = convertTimeToDate(event.target.value);
@@ -22356,6 +21858,15 @@ const CTimePickerPlugin = {
     app.component(CTimePicker.name, CTimePicker);
   }
 };
+const getInputIdOrName = (attribute, range2, position) => {
+  if (range2 && !Array.isArray(attribute)) {
+    return `${attribute}-${position}-date`;
+  }
+  if (Array.isArray(attribute)) {
+    return position === "start" ? attribute[0] : attribute[1];
+  }
+  return attribute;
+};
 const getLocalDateFromString = (string, locale, time) => {
   if (!Number.isNaN(Date.parse(string))) {
     return new Date(Date.parse(string));
@@ -22368,8 +21879,7 @@ const getLocalDateFromString = (string, locale, time) => {
   }
   const rgx = new RegExp(`${regex}`);
   const partials = string.match(rgx);
-  if (partials === null)
-    return;
+  if (partials === null) return;
   const newDate = partials.groups && (time ? new Date(
     Number(partials.groups["year"]),
     Number(partials.groups["month"]) - 1,
@@ -22570,13 +22080,15 @@ const CDateRangePicker = /* @__PURE__ */ defineComponent({
      */
     footer: Boolean,
     /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.
      *
-     * The name attributes for input elements are generated based on the `id` property:
-     * - {id}-start-date
-     * - {id}-end-date
+     * **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.:
+     * - \{id\}-start-date
+     * - \{id\}-end-date
      */
-    id: String,
+    id: {
+      type: [String, Array]
+    },
     /**
      * Toggle visibility or set the content of the input indicator.
      */
@@ -22639,6 +22151,20 @@ const CDateRangePicker = /* @__PURE__ */ defineComponent({
      * Min selectable date.
      */
     minDate: [Date, String],
+    /**
+     * The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately.
+     *
+     * Example for single string: 'date-input'
+     * Result: 'date-input-start-date', 'date-input-end-date'
+     *
+     * Example for array: ['start-date-input', 'end-date-input']
+     * Result: 'start-date-input', 'end-date-input'
+     *
+     * @since 5.3.0
+     */
+    name: {
+      type: [String, Array]
+    },
     /**
      * Show arrows navigation.
      */
@@ -23032,7 +22558,10 @@ const CDateRangePicker = /* @__PURE__ */ defineComponent({
             }
           ],
           disabled: props.disabled,
-          ...props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` },
+          ...props.id && { id: getInputIdOrName(props.id, props.range, "start") },
+          ...props.name && { name: getInputIdOrName(props.name, props.range, "start") },
+          ...props.id && !Array.isArray(props.id) && !props.name && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` },
+          // TODO: remove in v6
           onClick: () => {
             selectEndDate.value = false;
           },
@@ -23057,7 +22586,10 @@ const CDateRangePicker = /* @__PURE__ */ defineComponent({
             }
           ],
           disabled: props.disabled,
-          ...props.id && { name: `${props.id}-end-date` },
+          ...props.id && { id: getInputIdOrName(props.id, props.range, "end") },
+          ...props.name && { name: getInputIdOrName(props.name, props.range, "end") },
+          ...props.id && !Array.isArray(props.id) && !props.name && { name: `${props.id}-end-date` },
+          // TODO: remove in v6
           onClick: () => {
             selectEndDate.value = true;
           },
@@ -23086,7 +22618,7 @@ const CDateRangePicker = /* @__PURE__ */ defineComponent({
         feedback: props.feedback,
         feedbackInvalid: props.feedbackInvalid,
         feedbackValid: props.feedbackValid,
-        id: props.id,
+        ...props.id && !Array.isArray(props.id) && { id: props.id },
         invalid: isValid.value === false ? true : false,
         label: props.label,
         text: props.text,
@@ -23109,7 +22641,6 @@ const CDateRangePicker = /* @__PURE__ */ defineComponent({
             disabled: props.disabled,
             dropdownClassNames: "date-picker-dropdown",
             footer: props.footer || props.timepicker,
-            id: props.id,
             onHide: () => {
               visible.value = false;
               emit2("hide");
@@ -23472,8 +23003,8 @@ const CDatePicker = /* @__PURE__ */ defineComponent({
     /**
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      *
-     * The name attribute for the input element is generated based on the `id` property:
-     * - {id}-date
+     * **[Deprecated since v5.3.0]** The name attributes for input element is generated based on this property until you define name prop ex.:
+     * - \{id\}-date
      */
     id: String,
     /**
@@ -23527,6 +23058,12 @@ const CDatePicker = /* @__PURE__ */ defineComponent({
     minDate: {
       type: [Date, String]
     },
+    /**
+     * The name attribute for the input element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * Show arrows navigation.
      */
@@ -24422,6 +23959,13 @@ const CElementCoverPlugin = {
 const CFooter = /* @__PURE__ */ defineComponent({
   name: "CFooter",
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: "div"
+    },
     /**
      * Place footer in non-static positions.
      *
@@ -24436,7 +23980,7 @@ const CFooter = /* @__PURE__ */ defineComponent({
   },
   setup(props, { slots }) {
     return () => h$2(
-      "div",
+      props.as,
       { class: ["footer", { [`footer-${props.position}`]: props.position }] },
       slots.default && slots.default()
     );
@@ -26335,6 +25879,7 @@ const CMultiSelectNativeSelect = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: true
     },
+    name: String,
     options: {
       type: Array,
       default: () => []
@@ -26358,8 +25903,11 @@ const CMultiSelectNativeSelect = /* @__PURE__ */ defineComponent({
       "select",
       {
         className: "multi-select-new",
-        ...props.id && { id: `${props.id}-multi-select` },
-        ...props.id && { name: `${props.id}-multi-select` },
+        id: props.id,
+        ...props.id && !props.name && { name: `${props.id}-multi-select` },
+        // TODO: remove in v6
+        ...props.name && { name: props.name },
+        // TODO: change to `name: props.name` in v6
         multiple: props.multiple,
         tabIndex: "-1",
         style: { display: "none" },
@@ -26509,8 +26057,7 @@ const flattenOptionsArray = (options, keepGroupLabel) => {
 const getNextSibling = (elem, selector) => {
   let sibling = elem.nextElementSibling;
   while (sibling) {
-    if (sibling.matches(selector))
-      return sibling;
+    if (sibling.matches(selector)) return sibling;
     sibling = sibling.nextElementSibling;
   }
   return;
@@ -26518,8 +26065,7 @@ const getNextSibling = (elem, selector) => {
 const getPreviousSibling = (elem, selector) => {
   let sibling = elem.previousElementSibling;
   while (sibling) {
-    if (sibling.matches(selector))
-      return sibling;
+    if (sibling.matches(selector)) return sibling;
     sibling = sibling.previousElementSibling;
   }
   return;
@@ -26761,7 +26307,10 @@ const CMultiSelect = /* @__PURE__ */ defineComponent({
      */
     feedbackValid: String,
     /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     * Set the id attribute for the native select element.
+     *
+     * **[Deprecated since v5.3.0]** The name attribute for the native select element is generated based on the `id` property:
+     * - `<select name="\{id\}-multi-select" />`
      */
     id: String,
     /**
@@ -26791,6 +26340,12 @@ const CMultiSelect = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: true
     },
+    /**
+     * The name attribute for the select element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * List of option elements.
      */
@@ -26833,6 +26388,12 @@ const CMultiSelect = /* @__PURE__ */ defineComponent({
      * When it is present, it indicates that the user must choose a value before submitting the form.
      */
     required: Boolean,
+    /**
+     * Determines whether the selected options should be cleared when the options list is updated. When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided.
+     *
+     * @since 5.3.0
+     */
+    resetSelectionOnOptionsChange: Boolean,
     /**
      * Enables search input element.
      */
@@ -27001,6 +26562,10 @@ const CMultiSelect = /* @__PURE__ */ defineComponent({
       (newValue, oldValue) => {
         if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
           options.value = newValue;
+          if (props.resetSelectionOnOptionsChange) {
+            selected.value = [];
+            return;
+          }
           const _selected = flattenedOptions.value.filter(
             (option) => option.selected === true
           );
@@ -27159,6 +26724,7 @@ const CMultiSelect = /* @__PURE__ */ defineComponent({
       h$2(CMultiSelectNativeSelect, {
         id: props.id,
         multiple: props.multiple,
+        name: props.name,
         options: selected.value,
         required: props.required,
         value: props.multiple ? selected.value.map((option) => option.value.toString()) : selected.value.map((option) => option.value)[0],
@@ -27193,7 +26759,6 @@ const CMultiSelect = /* @__PURE__ */ defineComponent({
                 }
               ],
               "aria-expanded": visible.value,
-              id: props.id,
               ref: multiSelectRef
             },
             {
@@ -29677,6 +29242,70 @@ const CIcon = /* @__PURE__ */ defineComponent({
     });
   }
 });
+const CIconSvg = /* @__PURE__ */ defineComponent({
+  name: "CIconSvg",
+  props: {
+    /**
+     * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.
+     */
+    customClassName: [String, Array, Object],
+    /**
+     * The height attribute defines the vertical length of an icon.
+     */
+    height: Number,
+    /**
+     * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+     */
+    size: {
+      type: String,
+      validator: (value) => {
+        return [
+          "custom",
+          "custom-size",
+          "sm",
+          "lg",
+          "xl",
+          "xxl",
+          "3xl",
+          "4xl",
+          "5xl",
+          "6xl",
+          "7xl",
+          "8xl",
+          "9xl"
+        ].includes(value);
+      }
+    },
+    /**
+     * Title tag content.
+     */
+    title: String,
+    /**
+     * The width attribute defines the horizontal length of an icon.
+     */
+    width: Number
+  },
+  setup(props, { attrs, slots }) {
+    return () => slots.default && slots.default().map((slot) => cloneVNode(slot, {
+      "aria-hidden": true,
+      class: [
+        props.customClassName || [
+          "icon",
+          {
+            [`icon-${props.size}`]: props.size,
+            [`icon-custom-size`]: props.height || props.width
+          },
+          attrs.class
+        ]
+      ],
+      height: props.height,
+      focusable: "false",
+      role: "img",
+      width: props.width,
+      ...attrs
+    }));
+  }
+});
 const CTableBody = /* @__PURE__ */ defineComponent({
   name: "CTableBody",
   props: {
@@ -30349,8 +29978,7 @@ const getTableHeaderCellStyles = (column, columnSorter) => {
 const isSortable = (i2, columns, columnSorter, itemsDataColumns, columnNames) => {
   const isDataColumn = itemsDataColumns.includes(columnNames[i2]);
   let column;
-  if (columns)
-    column = columns[i2];
+  if (columns) column = columns[i2];
   return columnSorter && (!columns || typeof column !== "object" || typeof column === "object" && (column.sorter === void 0 || column.sorter)) && isDataColumn;
 };
 const pretifyName = (name) => {
@@ -31330,8 +30958,7 @@ const CSmartTable = /* @__PURE__ */ defineComponent({
                 ...!(tableFilterState.value || sorterState.value.column || Object.values(columnFilterState.value).join("")) && { disabled: true, tabIndex: -1 },
                 onClick: () => handleClean(),
                 onKeydown: (event) => {
-                  if (event.key === "Enter")
-                    handleClean();
+                  if (event.key === "Enter") handleClean();
                 }
               },
               slots.cleanerIcon ? slots.cleanerIcon() : h$2(CIcon, { width: "18", content: cilFilterX })
@@ -32427,14 +32054,11 @@ function isObject$c(o2) {
 }
 function isPlainObject$2(o2) {
   var ctor, prot;
-  if (isObject$c(o2) === false)
-    return false;
+  if (isObject$c(o2) === false) return false;
   ctor = o2.constructor;
-  if (ctor === void 0)
-    return true;
+  if (ctor === void 0) return true;
   prot = ctor.prototype;
-  if (isObject$c(prot) === false)
-    return false;
+  if (isObject$c(prot) === false) return false;
   if (prot.hasOwnProperty("isPrototypeOf") === false) {
     return false;
   }
@@ -32444,22 +32068,18 @@ function t() {
   return t = Object.assign ? Object.assign.bind() : function(e2) {
     for (var t2 = 1; t2 < arguments.length; t2++) {
       var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
+      for (var r2 in n2) Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
     }
     return e2;
   }, t.apply(this, arguments);
 }
 function n(e2, t2) {
-  if (null == e2)
-    return {};
+  if (null == e2) return {};
   var n2 = {};
-  for (var r2 in e2)
-    if (Object.prototype.hasOwnProperty.call(e2, r2)) {
-      if (t2.indexOf(r2) >= 0)
-        continue;
-      n2[r2] = e2[r2];
-    }
+  for (var r2 in e2) if (Object.prototype.hasOwnProperty.call(e2, r2)) {
+    if (t2.indexOf(r2) >= 0) continue;
+    n2[r2] = e2[r2];
+  }
   return n2;
 }
 const r = { silent: false, logLevel: "warn" }, i = ["validator"], o = Object.prototype, a = o.toString, s = o.hasOwnProperty, u = /^\s*function (\w+)/;
@@ -32472,7 +32092,9 @@ function l(e2) {
   }
   return "";
 }
-const c = isPlainObject$2, f = (e2) => e2;
+const c = isPlainObject$2;
+function f() {
+}
 let d = f;
 {
   const e2 = "undefined" != typeof console;
@@ -32493,13 +32115,10 @@ function m(e2, t2, n2 = false) {
   r2 = c(e2) ? e2 : { type: e2 };
   const a2 = b(r2) ? r2._vueTypes_name + " - " : "";
   if (g(r2) && null !== r2.type) {
-    if (void 0 === r2.type || true === r2.type)
-      return i2;
-    if (!r2.required && null == t2)
-      return i2;
+    if (void 0 === r2.type || true === r2.type) return i2;
+    if (!r2.required && null == t2) return i2;
     v(r2.type) ? (i2 = r2.type.some((e3) => true === m(e3, t2, true)), o2 = r2.type.map((e3) => l(e3)).join(" or ")) : (o2 = l(r2), i2 = "Array" === o2 ? v(t2) : "Object" === o2 ? c(t2) : "String" === o2 || "Number" === o2 || "Boolean" === o2 || "Function" === o2 ? function(e3) {
-      if (null == e3)
-        return "";
+      if (null == e3) return "";
       const t3 = e3.constructor.toString().match(u);
       return t3 ? t3[1].replace(/^Async/, "") : "";
     }(t2) === o2 : t2 instanceof r2.type);
@@ -32541,8 +32160,7 @@ function T(e2, t2, r2) {
       t3[n2] = Object.getOwnPropertyDescriptor(e3, n2);
     }), Object.defineProperties({}, t3);
   }(t2);
-  if (o2._vueTypes_name = e2, !c(r2))
-    return o2;
+  if (o2._vueTypes_name = e2, !c(r2)) return o2;
   const { validator: a2 } = r2, s2 = n(r2, i);
   if (h(a2)) {
     let { validator: e3 } = o2;
@@ -32567,16 +32185,14 @@ const w = () => _("any", {}), x = () => _("function", { type: Function }), P = (
   return false === t2 && d("nullable - value should be null"), t2;
 } }, "_vueTypes_name", { value: "nullable" });
 function D(e2, t2 = "custom validation failed") {
-  if ("function" != typeof e2)
-    throw new TypeError("[VueTypes error]: You must provide a function as argument");
+  if ("function" != typeof e2) throw new TypeError("[VueTypes error]: You must provide a function as argument");
   return j(e2.name || "<<anonymous function>>", { type: null, validator(n2) {
     const r2 = e2(n2);
     return r2 || d(`${this._vueTypes_name} - ${t2}`), r2;
   } });
 }
 function L(e2) {
-  if (!v(e2))
-    throw new TypeError("[VueTypes error]: You must provide an array as argument.");
+  if (!v(e2)) throw new TypeError("[VueTypes error]: You must provide an array as argument.");
   const t2 = `oneOf - value should be one of "${e2.map((e3) => "symbol" == typeof e3 ? e3.toString() : e3).join('", "')}".`, n2 = { validator(n3) {
     const r2 = -1 !== e2.indexOf(n3);
     return r2 || d(t2), r2;
@@ -32594,8 +32210,7 @@ function L(e2) {
   return j("oneOf", n2);
 }
 function B(e2) {
-  if (!v(e2))
-    throw new TypeError("[VueTypes error]: You must provide an array as argument");
+  if (!v(e2)) throw new TypeError("[VueTypes error]: You must provide an array as argument");
   let t2 = false, n2 = false, r2 = [];
   for (let i3 = 0; i3 < e2.length; i3 += 1) {
     const o2 = e2[i3];
@@ -32613,8 +32228,7 @@ function B(e2) {
         continue;
       }
       r2 = r2.concat(o2.type);
-    } else
-      r2.push(o2);
+    } else r2.push(o2);
   }
   r2 = r2.filter((e3, t3) => r2.indexOf(e3) === t3);
   const i2 = false === n2 && r2.length > 0 ? r2 : null;
@@ -32651,16 +32265,14 @@ function J(e2) {
     var n3;
     return !(null === (n3 = e2[t3]) || void 0 === n3 || !n3.required);
   }), r2 = j("shape", { type: Object, validator(r3) {
-    if (!c(r3))
-      return false;
+    if (!c(r3)) return false;
     const i2 = Object.keys(r3);
     if (n2.length > 0 && n2.some((e3) => -1 === i2.indexOf(e3))) {
       const e3 = n2.filter((e4) => -1 === i2.indexOf(e4));
       return d(1 === e3.length ? `shape - required property "${e3[0]}" is not defined.` : `shape - required properties "${e3.join('", "')}" are not defined.`), false;
     }
     return i2.every((n3) => {
-      if (-1 === t2.indexOf(n3))
-        return true === this._vueTypes_isLoose || (d(`shape - shape definition does not include a "${n3}" property. Allowed keys: "${t2.join('", "')}".`), false);
+      if (-1 === t2.indexOf(n3)) return true === this._vueTypes_isLoose || (d(`shape - shape definition does not include a "${n3}" property. Allowed keys: "${t2.join('", "')}".`), false);
       const i3 = m(e2[n3], r3[n3], true);
       return "string" == typeof i3 && d(`shape - "${n3}" property validation error:
  ${$(i3)}`), true === i3;
@@ -32702,17 +32314,14 @@ const M = ["name", "validate", "getter"], R = /* @__PURE__ */ ((e2) => ((e2 = cl
     return k();
   }
   static extend(e3) {
-    if (d("VueTypes.extend is deprecated. Use the ES6+ method instead. See https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#extending-namespaced-validators-in-es6 for details."), v(e3))
-      return e3.forEach((e4) => this.extend(e4)), this;
+    if (d("VueTypes.extend is deprecated. Use the ES6+ method instead. See https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#extending-namespaced-validators-in-es6 for details."), v(e3)) return e3.forEach((e4) => this.extend(e4)), this;
     const { name: t2, validate: r2 = false, getter: i2 = false } = e3, o2 = n(e3, M);
-    if (p(this, t2))
-      throw new TypeError(`[VueTypes error]: Type "${t2}" already defined`);
+    if (p(this, t2)) throw new TypeError(`[VueTypes error]: Type "${t2}" already defined`);
     const { type: a2 } = o2;
-    if (b(a2))
-      return delete o2.type, Object.defineProperty(this, t2, i2 ? { get: () => T(t2, a2, o2) } : { value(...e4) {
-        const n2 = T(t2, a2, o2);
-        return n2.validator && (n2.validator = n2.validator.bind(n2, ...e4)), n2;
-      } });
+    if (b(a2)) return delete o2.type, Object.defineProperty(this, t2, i2 ? { get: () => T(t2, a2, o2) } : { value(...e4) {
+      const n2 = T(t2, a2, o2);
+      return n2.validator && (n2.validator = n2.validator.bind(n2, ...e4)), n2;
+    } });
     let s2;
     return s2 = i2 ? { get() {
       const e4 = Object.assign({}, o2);
@@ -33488,6 +33097,20 @@ const CoreuiVue = {
     }
   }
 };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "Header",
+  props: {
+    theme: String
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const { colorMode, setColorMode } = useColorModes("coreui-vue-docs-theme");
+    const __returned__ = { props, colorMode, setColorMode };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
 const _hoisted_1$5 = /* @__PURE__ */ createBaseVNode("div", {
   class: "docs-search",
   id: "docsearch"
@@ -33501,208 +33124,199 @@ const _hoisted_3$4 = /* @__PURE__ */ createBaseVNode("li", { class: "nav-item py
   /* @__PURE__ */ createBaseVNode("hr", { class: "d-lg-none my-2 text-white-50" })
 ], -1);
 const _hoisted_4$2 = /* @__PURE__ */ createBaseVNode("span", { class: "d-none d-lg-inline-block" }, "Download", -1);
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "Header",
-  props: {
-    theme: String
-  },
-  setup(__props) {
-    const { colorMode, setColorMode } = useColorModes("coreui-vue-docs-theme");
-    return (_ctx, _cache) => {
-      const _component_CIcon = resolveComponent("CIcon");
-      const _component_CHeaderToggler = resolveComponent("CHeaderToggler");
-      const _component_CNavItem = resolveComponent("CNavItem");
-      const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
-      const _component_CDropdownItem = resolveComponent("CDropdownItem");
-      const _component_CDropdownMenu = resolveComponent("CDropdownMenu");
-      const _component_CDropdown = resolveComponent("CDropdown");
-      const _component_CHeaderNav = resolveComponent("CHeaderNav");
-      const _component_CButton = resolveComponent("CButton");
-      const _component_CHeader = resolveComponent("CHeader");
-      return openBlock(), createBlock(_component_CHeader, {
-        class: "mb-5 elevation-0 border-bottom",
-        position: "sticky"
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CIcon = resolveComponent("CIcon");
+  const _component_CHeaderToggler = resolveComponent("CHeaderToggler");
+  const _component_CNavItem = resolveComponent("CNavItem");
+  const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
+  const _component_CDropdownItem = resolveComponent("CDropdownItem");
+  const _component_CDropdownMenu = resolveComponent("CDropdownMenu");
+  const _component_CDropdown = resolveComponent("CDropdown");
+  const _component_CHeaderNav = resolveComponent("CHeaderNav");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CHeader = resolveComponent("CHeader");
+  return openBlock(), createBlock(_component_CHeader, {
+    class: "mb-5 elevation-0 border-bottom",
+    position: "sticky"
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_CHeaderToggler, {
+        class: "ms-md-3",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle-sidebar"))
       }, {
         default: withCtx(() => [
-          createVNode(_component_CHeaderToggler, {
-            class: "ms-md-3",
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle-sidebar"))
-          }, {
+          createVNode(_component_CIcon, {
+            icon: "cil-menu",
+            size: "lg"
+          })
+        ]),
+        _: 1
+      }),
+      _hoisted_1$5,
+      createVNode(_component_CHeaderNav, { class: "ms-auto" }, {
+        default: withCtx(() => [
+          createVNode(_component_CNavItem, { href: "https://github.com/coreui/coreui-vue" }, {
+            default: withCtx(() => [
+              createVNode(_component_CIcon, {
+                icon: "cib-github",
+                size: "xl"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CNavItem, { href: "https://twitter.com/core_ui" }, {
             default: withCtx(() => [
               createVNode(_component_CIcon, {
-                icon: "cil-menu",
-                size: "lg"
+                icon: "cib-twitter",
+                size: "xl"
               })
             ]),
             _: 1
           }),
-          _hoisted_1$5,
-          createVNode(_component_CHeaderNav, { class: "ms-auto" }, {
+          createVNode(_component_CNavItem, { href: "https://opencollective.com/coreui" }, {
             default: withCtx(() => [
-              createVNode(_component_CNavItem, { href: "https://github.com/coreui/coreui-vue" }, {
+              createVNode(_component_CIcon, {
+                icon: "cib-open-collective",
+                size: "xl"
+              })
+            ]),
+            _: 1
+          }),
+          _hoisted_2$5,
+          createVNode(_component_CDropdown, {
+            variant: "nav-item",
+            placement: "bottom-end"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CDropdownToggle, { caret: false }, {
                 default: withCtx(() => [
-                  createVNode(_component_CIcon, {
-                    icon: "cib-github",
+                  $setup.colorMode === "dark" ? (openBlock(), createBlock(_component_CIcon, {
+                    key: 0,
+                    icon: "cil-moon",
                     size: "xl"
-                  })
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CNavItem, { href: "https://twitter.com/core_ui" }, {
-                default: withCtx(() => [
-                  createVNode(_component_CIcon, {
-                    icon: "cib-twitter",
+                  })) : $setup.colorMode === "light" ? (openBlock(), createBlock(_component_CIcon, {
+                    key: 1,
+                    icon: "cil-sun",
                     size: "xl"
-                  })
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CNavItem, { href: "https://opencollective.com/coreui" }, {
-                default: withCtx(() => [
-                  createVNode(_component_CIcon, {
-                    icon: "cib-open-collective",
+                  })) : (openBlock(), createBlock(_component_CIcon, {
+                    key: 2,
+                    icon: "cil-contrast",
                     size: "xl"
-                  })
+                  }))
                 ]),
                 _: 1
               }),
-              _hoisted_2$5,
-              createVNode(_component_CDropdown, {
-                variant: "nav-item",
-                placement: "bottom-end"
-              }, {
+              createVNode(_component_CDropdownMenu, null, {
                 default: withCtx(() => [
-                  createVNode(_component_CDropdownToggle, { caret: false }, {
+                  createVNode(_component_CDropdownItem, {
+                    active: $setup.colorMode === "light",
+                    class: "d-flex align-items-center",
+                    as: "button",
+                    type: "button",
+                    onClick: _cache[1] || (_cache[1] = ($event) => $setup.setColorMode("light"))
+                  }, {
                     default: withCtx(() => [
-                      unref(colorMode) === "dark" ? (openBlock(), createBlock(_component_CIcon, {
-                        key: 0,
-                        icon: "cil-moon",
-                        size: "xl"
-                      })) : unref(colorMode) === "light" ? (openBlock(), createBlock(_component_CIcon, {
-                        key: 1,
+                      createVNode(_component_CIcon, {
+                        class: "me-2",
                         icon: "cil-sun",
-                        size: "xl"
-                      })) : (openBlock(), createBlock(_component_CIcon, {
-                        key: 2,
-                        icon: "cil-contrast",
-                        size: "xl"
-                      }))
+                        size: "lg"
+                      }),
+                      createTextVNode(" Light ")
                     ]),
                     _: 1
-                  }),
-                  createVNode(_component_CDropdownMenu, null, {
+                  }, 8, ["active"]),
+                  createVNode(_component_CDropdownItem, {
+                    active: $setup.colorMode === "dark",
+                    class: "d-flex align-items-center",
+                    as: "button",
+                    type: "button",
+                    onClick: _cache[2] || (_cache[2] = ($event) => $setup.setColorMode("dark"))
+                  }, {
                     default: withCtx(() => [
-                      createVNode(_component_CDropdownItem, {
-                        active: unref(colorMode) === "light",
-                        class: "d-flex align-items-center",
-                        as: "button",
-                        type: "button",
-                        onClick: _cache[1] || (_cache[1] = ($event) => unref(setColorMode)("light"))
-                      }, {
-                        default: withCtx(() => [
-                          createVNode(_component_CIcon, {
-                            class: "me-2",
-                            icon: "cil-sun",
-                            size: "lg"
-                          }),
-                          createTextVNode(" Light ")
-                        ]),
-                        _: 1
-                      }, 8, ["active"]),
-                      createVNode(_component_CDropdownItem, {
-                        active: unref(colorMode) === "dark",
-                        class: "d-flex align-items-center",
-                        as: "button",
-                        type: "button",
-                        onClick: _cache[2] || (_cache[2] = ($event) => unref(setColorMode)("dark"))
-                      }, {
-                        default: withCtx(() => [
-                          createVNode(_component_CIcon, {
-                            class: "me-2",
-                            icon: "cil-moon",
-                            size: "lg"
-                          }),
-                          createTextVNode(" Dark ")
-                        ]),
-                        _: 1
-                      }, 8, ["active"]),
-                      createVNode(_component_CDropdownItem, {
-                        active: unref(colorMode) === "auto",
-                        class: "d-flex align-items-center",
-                        as: "button",
-                        type: "button",
-                        onClick: _cache[3] || (_cache[3] = ($event) => unref(setColorMode)("auto"))
-                      }, {
-                        default: withCtx(() => [
-                          createVNode(_component_CIcon, {
-                            class: "me-2",
-                            icon: "cil-contrast",
-                            size: "lg"
-                          }),
-                          createTextVNode(" Auto ")
-                        ]),
-                        _: 1
-                      }, 8, ["active"])
+                      createVNode(_component_CIcon, {
+                        class: "me-2",
+                        icon: "cil-moon",
+                        size: "lg"
+                      }),
+                      createTextVNode(" Dark ")
                     ]),
                     _: 1
-                  })
+                  }, 8, ["active"]),
+                  createVNode(_component_CDropdownItem, {
+                    active: $setup.colorMode === "auto",
+                    class: "d-flex align-items-center",
+                    as: "button",
+                    type: "button",
+                    onClick: _cache[3] || (_cache[3] = ($event) => $setup.setColorMode("auto"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_CIcon, {
+                        class: "me-2",
+                        icon: "cil-contrast",
+                        size: "lg"
+                      }),
+                      createTextVNode(" Auto ")
+                    ]),
+                    _: 1
+                  }, 8, ["active"])
                 ]),
                 _: 1
-              }),
-              _hoisted_3$4
+              })
             ]),
             _: 1
           }),
-          createVNode(_component_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"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CIcon, {
-                class: "me-lg-2",
-                icon: "cil-cloud-download"
-              }),
-              _hoisted_4$2
-            ]),
-            _: 1
+          _hoisted_3$4
+        ]),
+        _: 1
+      }),
+      createVNode(_component_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"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CIcon, {
+            class: "me-lg-2",
+            icon: "cil-cloud-download"
           }),
-          createVNode(_component_CButton, {
-            class: "d-lg-inline-block my-2 my-md-0 ms-md-3",
-            color: "primary",
-            component: "a",
-            href: "https://coreui.io/about/services/?docs=coreui-header-button",
-            variant: "outline"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CIcon, {
-                class: "me-2",
-                icon: "cil-handshake"
-              }),
-              createTextVNode("Hire Us ")
-            ]),
-            _: 1
+          _hoisted_4$2
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        class: "d-lg-inline-block my-2 my-md-0 ms-md-3",
+        color: "primary",
+        component: "a",
+        href: "https://coreui.io/about/services/?docs=coreui-header-button",
+        variant: "outline"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CIcon, {
+            class: "me-2",
+            icon: "cil-handshake"
           }),
-          createVNode(_component_CButton, {
-            class: "d-lg-inline-block my-2 my-md-0 ms-md-3",
-            color: "primary",
-            as: "a",
-            href: "https://coreui.io/pricing/?framework=vue&docs=coreui-header-button"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(" Get CoreUI PRO ")
-            ]),
-            _: 1
-          })
+          createTextVNode("Hire Us ")
         ]),
         _: 1
-      });
-    };
-  }
-});
-const Header = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "Header.vue"]]);
+      }),
+      createVNode(_component_CButton, {
+        class: "d-lg-inline-block my-2 my-md-0 ms-md-3",
+        color: "primary",
+        as: "a",
+        href: "https://coreui.io/pricing/?framework=vue&docs=coreui-header-button"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(" Get CoreUI PRO ")
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const Header = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__file", "Header.vue"]]);
 const accordion = {
   angular: "https://coreui.io/angular/docs/components/accordion/",
   bootstrap: "https://coreui.io/bootstrap/docs/components/accordion/",
@@ -34024,15 +33638,14 @@ const jsonData = {
   toast,
   tooltip
 };
-const _hoisted_1$4 = /* @__PURE__ */ createBaseVNode("h2", null, "Other frameworks", -1);
-const _hoisted_2$4 = /* @__PURE__ */ createBaseVNode("p", null, " CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages. ", -1);
-const _hoisted_3$3 = ["href"];
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "OtherFrameworks",
   props: {
     pro_component: Boolean
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
     const frontmatter = usePageFrontmatter();
     const frameworks = frontmatter.value.other_frameworks ? frontmatter.value.other_frameworks.split(", ") : false;
     const otherFrameworks = JSON.parse(JSON.stringify(jsonData));
@@ -34042,30 +33655,36 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       );
       return string[0].toUpperCase() + string.slice(1);
     };
-    return (_ctx, _cache) => {
-      return unref(frameworks) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _hoisted_1$4,
-        _hoisted_2$4,
-        createBaseVNode("ul", null, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(frameworks), (framework) => {
+    const __returned__ = { props, frontmatter, frameworks, otherFrameworks, humanize };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$4 = /* @__PURE__ */ createBaseVNode("h2", null, "Other frameworks", -1);
+const _hoisted_2$4 = /* @__PURE__ */ createBaseVNode("p", null, " CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages. ", -1);
+const _hoisted_3$3 = ["href"];
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.frameworks ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+    _hoisted_1$4,
+    _hoisted_2$4,
+    createBaseVNode("ul", null, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($setup.frameworks, (framework) => {
+        return openBlock(), createElementBlock(Fragment, null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys($setup.otherFrameworks[framework]), (el, index2) => {
             return openBlock(), createElementBlock(Fragment, null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(unref(otherFrameworks)[framework]), (el, index2) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  el !== "vue" ? (openBlock(), createElementBlock("li", { key: index2 }, [
-                    createBaseVNode("a", {
-                      href: unref(otherFrameworks)[framework][el]
-                    }, toDisplayString(el[0].toUpperCase() + el.slice(1)) + " " + toDisplayString(humanize(framework)), 9, _hoisted_3$3)
-                  ])) : createCommentVNode("", true)
-                ], 64);
-              }), 256))
+              el !== "vue" ? (openBlock(), createElementBlock("li", { key: index2 }, [
+                createBaseVNode("a", {
+                  href: $setup.otherFrameworks[framework][el]
+                }, toDisplayString(el[0].toUpperCase() + el.slice(1)) + " " + toDisplayString($setup.humanize(framework)), 9, _hoisted_3$3)
+              ])) : createCommentVNode("", true)
             ], 64);
           }), 256))
-        ])
-      ], 64)) : createCommentVNode("", true);
-    };
-  }
-});
-const OtherFrameworks = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "OtherFrameworks.vue"]]);
+        ], 64);
+      }), 256))
+    ])
+  ], 64)) : createCommentVNode("", true);
+}
+const OtherFrameworks = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__file", "OtherFrameworks.vue"]]);
 const normalizePath = (path) => decodeURI(path).replace(/#.*$/, "").replace(/(index)?\.(md|html)$/, "");
 const isActiveLink = (route, link) => {
   if (link === void 0) {
@@ -34166,6 +33785,18 @@ const SidebarNav = /* @__PURE__ */ defineComponent({
     );
   }
 });
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "Sidebar",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const sidebarItems = useSidebarItems();
+    const __returned__ = { sidebarItems, get SidebarNav() {
+      return SidebarNav;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
 const _hoisted_1$3 = /* @__PURE__ */ createBaseVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 556 134",
@@ -34188,84 +33819,91 @@ const _hoisted_1$3 = /* @__PURE__ */ createBaseVNode("svg", {
   ])
 ], -1);
 const _hoisted_2$3 = /* @__PURE__ */ createBaseVNode("div", { class: "text-body-secondary mx-3 mb-2 small fw-semibold" }, "Framework:", -1);
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "Sidebar",
-  setup(__props) {
-    const sidebarItems = useSidebarItems();
-    return (_ctx, _cache) => {
-      const _component_CSidebarBrand = resolveComponent("CSidebarBrand");
-      const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
-      const _component_CDropdownItem = resolveComponent("CDropdownItem");
-      const _component_CDropdownMenu = resolveComponent("CDropdownMenu");
-      const _component_CDropdown = resolveComponent("CDropdown");
-      const _component_CSidebar = resolveComponent("CSidebar");
-      return openBlock(), createBlock(_component_CSidebar, {
-        position: "fixed",
-        size: "lg",
-        class: "docs-sidebar border-end px-xl-4 elevation-0"
-      }, {
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSidebarBrand = resolveComponent("CSidebarBrand");
+  const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
+  const _component_CDropdownItem = resolveComponent("CDropdownItem");
+  const _component_CDropdownMenu = resolveComponent("CDropdownMenu");
+  const _component_CDropdown = resolveComponent("CDropdown");
+  const _component_CSidebar = resolveComponent("CSidebar");
+  return openBlock(), createBlock(_component_CSidebar, {
+    position: "fixed",
+    size: "lg",
+    class: "docs-sidebar border-end px-xl-4 elevation-0"
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_CSidebarBrand, { class: "justify-content-start ps-3" }, {
+        default: withCtx(() => [
+          _hoisted_1$3
+        ]),
+        _: 1
+      }),
+      _hoisted_2$3,
+      createVNode(_component_CDropdown, { class: "mx-3 mb-4" }, {
         default: withCtx(() => [
-          createVNode(_component_CSidebarBrand, { class: "justify-content-start ps-3" }, {
+          createVNode(_component_CDropdownToggle, {
+            color: "primary",
+            variant: "outline"
+          }, {
             default: withCtx(() => [
-              _hoisted_1$3
+              createTextVNode(" Vue.js ")
             ]),
             _: 1
           }),
-          _hoisted_2$3,
-          createVNode(_component_CDropdown, { class: "mx-3 mb-4" }, {
+          createVNode(_component_CDropdownMenu, { class: "w-100" }, {
             default: withCtx(() => [
-              createVNode(_component_CDropdownToggle, {
-                color: "primary",
-                variant: "outline"
+              createVNode(_component_CDropdownItem, {
+                href: "https://coreui.io/angular/docs/4.0/",
+                target: "_blank"
               }, {
                 default: withCtx(() => [
-                  createTextVNode(" Vue.js ")
+                  createTextVNode(" Angular ")
                 ]),
                 _: 1
               }),
-              createVNode(_component_CDropdownMenu, { class: "w-100" }, {
+              createVNode(_component_CDropdownItem, {
+                href: "https://coreui.io/docs/",
+                target: "_blank"
+              }, {
                 default: withCtx(() => [
-                  createVNode(_component_CDropdownItem, {
-                    href: "https://coreui.io/angular/docs/4.0/",
-                    target: "_blank"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(" Angular ")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CDropdownItem, {
-                    href: "https://coreui.io/docs/",
-                    target: "_blank"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(" JavaScript / Vanilla JS ")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CDropdownItem, {
-                    href: "https://coreui.io/react/docs/",
-                    target: "_blank"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(" React.js ")
-                    ]),
-                    _: 1
-                  })
+                  createTextVNode(" JavaScript / Vanilla JS ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CDropdownItem, {
+                href: "https://coreui.io/react/docs/",
+                target: "_blank"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" React.js ")
                 ]),
                 _: 1
               })
             ]),
             _: 1
-          }),
-          createVNode(unref(SidebarNav), { items: unref(sidebarItems) }, null, 8, ["items"])
+          })
         ]),
         _: 1
-      });
+      }),
+      createVNode($setup["SidebarNav"], { items: $setup.sidebarItems }, null, 8, ["items"])
+    ]),
+    _: 1
+  });
+}
+const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "Sidebar.vue"]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Toc",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const visible = ref(false);
+    const toggleVisible = () => {
+      visible.value = !visible.value;
     };
+    const __returned__ = { visible, toggleVisible };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "Sidebar.vue"]]);
 const _hoisted_1$2 = { class: "docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary" };
 const _hoisted_2$2 = ["aria-expanded"];
 const _hoisted_3$2 = /* @__PURE__ */ createBaseVNode("svg", {
@@ -34281,65 +33919,38 @@ const _hoisted_3$2 = /* @__PURE__ */ createBaseVNode("svg", {
   })
 ], -1);
 const _hoisted_4$1 = /* @__PURE__ */ createBaseVNode("strong", { class: "d-none d-md-block h6 mb-2 pb-2 border-bottom" }, "On this page", -1);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "Toc",
-  setup(__props) {
-    const visible = ref(false);
-    const toggleVisible = () => {
-      visible.value = !visible.value;
-    };
-    return (_ctx, _cache) => {
-      const _component_Toc = resolveComponent("Toc", true);
-      const _component_CCollapse = resolveComponent("CCollapse");
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        createBaseVNode("button", {
-          class: "btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none",
-          type: "button",
-          "aria-expanded": visible.value ? true : false,
-          "aria-controls": "tocContents",
-          onClick: _cache[0] || (_cache[0] = ($event) => toggleVisible())
-        }, [
-          createTextVNode(" On this page "),
-          _hoisted_3$2
-        ], 8, _hoisted_2$2),
-        _hoisted_4$1,
-        createVNode(_component_CCollapse, {
-          class: "docs-toc-collapse",
-          id: "tocContents",
-          visible: visible.value
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_Toc)
-          ]),
-          _: 1
-        }, 8, ["visible"])
-      ]);
-    };
-  }
-});
-const Toc$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "Toc.vue"]]);
-const _hoisted_1$1 = { class: "wrapper flex-grow-1" };
-const _hoisted_2$1 = { class: "docs-main order-1" };
-const _hoisted_3$1 = { class: "docs-intro ps-lg-4" };
-const _hoisted_4 = {
-  key: 0,
-  class: "d-flex flex-column"
-};
-const _hoisted_5 = {
-  class: "order-2 h5 mb-4 text-body-secondary",
-  id: "content"
-};
-const _hoisted_6 = { class: "docs-title order-1 h1" };
-const _hoisted_7 = {
-  key: 1,
-  class: "docs-title",
-  id: "content"
-};
-const _hoisted_8 = { class: "docs-lead" };
-const _hoisted_9 = { className: "docs-content ps-lg-4" };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Toc = resolveComponent("Toc", true);
+  const _component_CCollapse = resolveComponent("CCollapse");
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+    createBaseVNode("button", {
+      class: "btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none",
+      type: "button",
+      "aria-expanded": $setup.visible ? true : false,
+      "aria-controls": "tocContents",
+      onClick: _cache[0] || (_cache[0] = ($event) => $setup.toggleVisible())
+    }, [
+      createTextVNode(" On this page "),
+      _hoisted_3$2
+    ], 8, _hoisted_2$2),
+    _hoisted_4$1,
+    createVNode(_component_CCollapse, {
+      class: "docs-toc-collapse",
+      id: "tocContents",
+      visible: $setup.visible
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_Toc)
+      ]),
+      _: 1
+    }, 8, ["visible"])
+  ]);
+}
+const Toc$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "Toc.vue"]]);
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Layout",
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
+    __expose();
     const frontmatter = usePageFrontmatter();
     const isSidebarOpen = ref(true);
     const toggleSidebar = (to2) => {
@@ -34353,7 +33964,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const description = frontmatter.value.description;
     onMounted(() => {
       const searchElement = document.getElementById("docsearch");
-      bi({
+      bo({
         appId: "RG8RW9GEH3",
         apiKey: "4926b633296d71c6d727f7766170f82b",
         indexName: "coreuivue",
@@ -34362,89 +33973,115 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         debug: false
       });
     });
-    return (_ctx, _cache) => {
-      const _component_Content = resolveComponent("Content");
-      const _component_CContainer = resolveComponent("CContainer");
-      return openBlock(), createElementBlock("div", null, [
-        createVNode(Sidebar, {
-          visible: isSidebarOpen.value,
-          onVisibleChange: _cache[0] || (_cache[0] = (event) => isSidebarOpen.value = event)
-        }, null, 8, ["visible"]),
-        createBaseVNode("div", _hoisted_1$1, [
-          createVNode(Header, {
-            onToggleSidebar: _cache[1] || (_cache[1] = ($event) => toggleSidebar(!isSidebarOpen.value))
-          }),
-          createVNode(Transition, {
-            name: "fade-slide-y",
-            mode: "out-in",
-            onBeforeEnter: unref(onBeforeEnter),
-            onBeforeLeave: unref(onBeforeLeave)
+    const __returned__ = { frontmatter, isSidebarOpen, toggleSidebar, scrollPromise: scrollPromise2, onBeforeEnter, onBeforeLeave, name, title, description, Ads, Banner, Footer, Header, OtherFrameworks, Sidebar, Toc: Toc$1 };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$1 = { class: "wrapper flex-grow-1" };
+const _hoisted_2$1 = { class: "docs-main order-1" };
+const _hoisted_3$1 = { class: "docs-intro ps-lg-4" };
+const _hoisted_4 = {
+  key: 0,
+  class: "d-flex flex-column"
+};
+const _hoisted_5 = {
+  class: "order-2 h5 mb-4 text-body-secondary",
+  id: "content"
+};
+const _hoisted_6 = { class: "docs-title order-1 h1" };
+const _hoisted_7 = {
+  key: 1,
+  class: "docs-title",
+  id: "content"
+};
+const _hoisted_8 = { class: "docs-lead" };
+const _hoisted_9 = { className: "docs-content ps-lg-4" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Content = resolveComponent("Content");
+  const _component_CContainer = resolveComponent("CContainer");
+  return openBlock(), createElementBlock("div", null, [
+    createVNode($setup["Sidebar"], {
+      visible: $setup.isSidebarOpen,
+      onVisibleChange: _cache[0] || (_cache[0] = (event) => $setup.isSidebarOpen = event)
+    }, null, 8, ["visible"]),
+    createBaseVNode("div", _hoisted_1$1, [
+      createVNode($setup["Header"], {
+        onToggleSidebar: _cache[1] || (_cache[1] = ($event) => $setup.toggleSidebar(!$setup.isSidebarOpen))
+      }),
+      createVNode(Transition, {
+        name: "fade-slide-y",
+        mode: "out-in",
+        onBeforeEnter: $setup.onBeforeEnter,
+        onBeforeLeave: $setup.onBeforeLeave
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CContainer, {
+            class: "my-md-4 flex-grow-1",
+            lg: ""
           }, {
             default: withCtx(() => [
-              createVNode(_component_CContainer, {
-                class: "my-md-4 flex-grow-1",
-                lg: ""
-              }, {
-                default: withCtx(() => [
-                  createBaseVNode("main", _hoisted_2$1, [
-                    createBaseVNode("div", _hoisted_3$1, [
-                      createVNode(Banner),
-                      unref(name) && unref(name) !== unref(title) ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                        createBaseVNode("h1", _hoisted_5, toDisplayString(unref(title)), 1),
-                        createBaseVNode("h2", _hoisted_6, toDisplayString(unref(name)), 1)
-                      ])) : (openBlock(), createElementBlock("h1", _hoisted_7, toDisplayString(unref(title)), 1)),
-                      createBaseVNode("p", _hoisted_8, toDisplayString(unref(description)), 1),
-                      createVNode(Ads),
-                      createVNode(OtherFrameworks)
-                    ]),
-                    createVNode(Toc$1),
-                    createBaseVNode("div", _hoisted_9, [
-                      createVNode(_component_Content)
-                    ])
-                  ])
+              createBaseVNode("main", _hoisted_2$1, [
+                createBaseVNode("div", _hoisted_3$1, [
+                  createVNode($setup["Banner"]),
+                  $setup.name && $setup.name !== $setup.title ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                    createBaseVNode("h1", _hoisted_5, toDisplayString($setup.title), 1),
+                    createBaseVNode("h2", _hoisted_6, toDisplayString($setup.name), 1)
+                  ])) : (openBlock(), createElementBlock("h1", _hoisted_7, toDisplayString($setup.title), 1)),
+                  createBaseVNode("p", _hoisted_8, toDisplayString($setup.description), 1),
+                  createVNode($setup["Ads"]),
+                  createVNode($setup["OtherFrameworks"])
                 ]),
-                _: 1
-              })
+                createVNode($setup["Toc"]),
+                createBaseVNode("div", _hoisted_9, [
+                  createVNode(_component_Content)
+                ])
+              ])
             ]),
             _: 1
-          }, 8, ["onBeforeEnter", "onBeforeLeave"]),
-          createVNode(Footer)
-        ])
-      ]);
-    };
-  }
-});
-const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "Layout.vue"]]);
-const _hoisted_1 = { class: "theme-container" };
-const _hoisted_2 = { class: "theme-default-content" };
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h1", null, "404", -1);
+          })
+        ]),
+        _: 1
+      }, 8, ["onBeforeEnter", "onBeforeLeave"]),
+      createVNode($setup["Footer"])
+    ])
+  ]);
+}
+const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "Layout.vue"]]);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "404",
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
+    __expose();
     const routeLocale = useRouteLocale();
     const themeLocale = useThemeLocaleData();
     const messages = themeLocale.value.notFound ?? ["Not Found"];
     const getMsg = () => messages[Math.floor(Math.random() * messages.length)];
     const homeLink = themeLocale.value.home ?? routeLocale.value;
     const homeText = themeLocale.value.backToHome ?? "Back to home";
-    return (_ctx, _cache) => {
-      const _component_RouterLink = resolveComponent("RouterLink");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createBaseVNode("div", _hoisted_2, [
-          _hoisted_3,
-          createBaseVNode("blockquote", null, toDisplayString(getMsg()), 1),
-          createVNode(_component_RouterLink, { to: unref(homeLink) }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(homeText)), 1)
-            ]),
-            _: 1
-          }, 8, ["to"])
-        ])
-      ]);
-    };
+    const __returned__ = { routeLocale, themeLocale, messages, getMsg, homeLink, homeText };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-const NotFound = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "404.vue"]]);
+const _hoisted_1 = { class: "theme-container" };
+const _hoisted_2 = { class: "theme-default-content" };
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h1", null, "404", -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_RouterLink = resolveComponent("RouterLink");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createBaseVNode("div", _hoisted_2, [
+      _hoisted_3,
+      createBaseVNode("blockquote", null, toDisplayString($setup.getMsg()), 1),
+      createVNode(_component_RouterLink, { to: $setup.homeLink }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString($setup.homeText), 1)
+        ]),
+        _: 1
+      }, 8, ["to"])
+    ])
+  ]);
+}
+const NotFound = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "404.vue"]]);
 const config$2 = defineClientConfig({
   enhance({ app, router }) {
     app.component("AutoLinkExternalIcon", () => {
@@ -34665,7 +34302,7 @@ const clientConfig2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defin
 }, Symbol.toStringTag, { value: "Module" }));
 const clientConfig_391ecbd3 = {
   enhance: ({ app }) => {
-    app.component("Callout", /* @__PURE__ */ defineAsyncComponent(() => __vitePreload(() => import("./Callout-BATyFhCT.js"), true ? [] : void 0))), app.component("ScssDocs", /* @__PURE__ */ defineAsyncComponent(() => __vitePreload(() => import("./ScssDocs-Cuojc5PB.js"), true ? [] : void 0)));
+    app.component("Callout", /* @__PURE__ */ defineAsyncComponent(() => __vitePreload(() => import("./Callout-BG7mA_TE.js"), true ? [] : void 0))), app.component("ScssDocs", /* @__PURE__ */ defineAsyncComponent(() => __vitePreload(() => import("./ScssDocs-BzcEAHFR.js"), true ? [] : void 0)));
   }
 };
 const clientConfig3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -35659,25 +35296,25 @@ function _isBetween(value, start2, end2, epsilon = 1e-6) {
 }
 function _lookup(table2, value, cmp) {
   cmp = cmp || ((index2) => table2[index2] < value);
-  let hi2 = table2.length - 1;
+  let hi = table2.length - 1;
   let lo2 = 0;
   let mid;
-  while (hi2 - lo2 > 1) {
-    mid = lo2 + hi2 >> 1;
+  while (hi - lo2 > 1) {
+    mid = lo2 + hi >> 1;
     if (cmp(mid)) {
       lo2 = mid;
     } else {
-      hi2 = mid;
+      hi = mid;
     }
   }
   return {
     lo: lo2,
-    hi: hi2
+    hi
   };
 }
 const _lookupByKey = (table2, key, value, last) => _lookup(table2, value, last ? (index2) => {
-  const ti2 = table2[index2][key];
-  return ti2 < value || ti2 === value && table2[index2 + 1][key] === value;
+  const ti = table2[index2][key];
+  return ti < value || ti === value && table2[index2 + 1][key] === value;
 } : (index2) => table2[index2][key] < value);
 const _rlookupByKey = (table2, key, value) => _lookup(table2, value, (index2) => table2[index2][key] >= value);
 function _filterBetween(values, min2, max2) {
@@ -40317,8 +39954,8 @@ function evaluateInteractionItems(chart, axis, position, handler, intersect) {
   const value = position[axis];
   for (let i2 = 0, ilen = metasets.length; i2 < ilen; ++i2) {
     const { index: index2, data } = metasets[i2];
-    const { lo: lo2, hi: hi2 } = binarySearch(metasets[i2], axis, value, intersect);
-    for (let j2 = lo2; j2 <= hi2; ++j2) {
+    const { lo: lo2, hi } = binarySearch(metasets[i2], axis, value, intersect);
+    for (let j2 = lo2; j2 <= hi; ++j2) {
       const element = data[j2];
       if (!element.skip) {
         handler(element, index2, j2);
@@ -46254,12 +45891,12 @@ var plugin_legend = {
     weight: 1e3,
     onClick(e2, legendItem, legend) {
       const index2 = legendItem.datasetIndex;
-      const ci2 = legend.chart;
-      if (ci2.isDatasetVisible(index2)) {
-        ci2.hide(index2);
+      const ci = legend.chart;
+      if (ci.isDatasetVisible(index2)) {
+        ci.hide(index2);
         legendItem.hidden = true;
       } else {
-        ci2.show(index2);
+        ci.show(index2);
         legendItem.hidden = false;
       }
     },
@@ -48613,8 +48250,8 @@ function addTick(ticks, time, timestamps) {
   if (!timestamps) {
     ticks[time] = true;
   } else if (timestamps.length) {
-    const { lo: lo2, hi: hi2 } = _lookup(timestamps, time);
-    const timestamp = timestamps[lo2] >= time ? timestamps[lo2] : timestamps[hi2];
+    const { lo: lo2, hi } = _lookup(timestamps, time);
+    const timestamp = timestamps[lo2] >= time ? timestamps[lo2] : timestamps[hi];
     ticks[timestamp] = true;
   }
 }
@@ -48935,20 +48572,20 @@ __publicField(TimeScale, "defaults", {
 });
 function interpolate(table2, val, reverse) {
   let lo2 = 0;
-  let hi2 = table2.length - 1;
+  let hi = table2.length - 1;
   let prevSource, nextSource, prevTarget, nextTarget;
   if (reverse) {
-    if (val >= table2[lo2].pos && val <= table2[hi2].pos) {
-      ({ lo: lo2, hi: hi2 } = _lookupByKey(table2, "pos", val));
+    if (val >= table2[lo2].pos && val <= table2[hi].pos) {
+      ({ lo: lo2, hi } = _lookupByKey(table2, "pos", val));
     }
     ({ pos: prevSource, time: prevTarget } = table2[lo2]);
-    ({ pos: nextSource, time: nextTarget } = table2[hi2]);
+    ({ pos: nextSource, time: nextTarget } = table2[hi]);
   } else {
-    if (val >= table2[lo2].time && val <= table2[hi2].time) {
-      ({ lo: lo2, hi: hi2 } = _lookupByKey(table2, "time", val));
+    if (val >= table2[lo2].time && val <= table2[hi].time) {
+      ({ lo: lo2, hi } = _lookupByKey(table2, "time", val));
     }
     ({ time: prevSource, pos: prevTarget } = table2[lo2]);
-    ({ time: nextSource, pos: nextTarget } = table2[hi2]);
+    ({ time: nextSource, pos: nextTarget } = table2[hi]);
   }
   const span = nextSource - prevSource;
   return span ? prevTarget + (nextTarget - prevTarget) * (val - prevSource) / span : prevTarget;
@@ -51089,6 +50726,7 @@ const client = defineClientConfig({
     app.use(CoreuiVue);
     app.provide("icons", icons);
     app.component("CIcon", CIcon);
+    app.component("CIconSvg", CIconSvg);
     app.use(CChartPlugin), router.addRoute({ path: "", redirect: "/getting-started/introduction.html" });
   }
 });
@@ -51120,10 +50758,8 @@ var createVueRouter = () => {
       }
     ],
     scrollBehavior: (to2, _from, savedPosition) => {
-      if (savedPosition)
-        return savedPosition;
-      if (to2.hash)
-        return { el: to2.hash };
+      if (savedPosition) return savedPosition;
+      if (to2.hash) return { el: to2.hash };
       return { top: 0 };
     }
   });
@@ -51338,7 +50974,10 @@ var createVueApp = async () => {
   setupGlobalComponents(app);
   const globalComputed = setupGlobalComputed(app, router, clientConfigs);
   {
-    const { setupDevtools } = await __vitePreload(() => import("./setupDevtools-H6KAGBNI-orMN-CkE.js"), true ? [] : void 0);
+    const { setupDevtools } = await __vitePreload(async () => {
+      const { setupDevtools: setupDevtools2 } = await import("./setupDevtools-HHDGOOYC-BQImv-dR.js");
+      return { setupDevtools: setupDevtools2 };
+    }, true ? [] : void 0);
     setupDevtools(app, globalComputed);
   }
   for (const clientConfig of clientConfigs) {
@@ -51358,55 +50997,54 @@ var createVueApp = async () => {
   });
 }
 export {
-  normalizeStyle as $,
-  cilArrowRight as A,
-  cilArrowTop as B,
-  cilBasket as C,
-  cilBurn as D,
-  cilCheckCircle as E,
+  mergeProps as $,
+  cilArrowTop as A,
+  cilBasket as B,
+  cilBurn as C,
+  cilCheckCircle as D,
+  cilCloudDownload as E,
   Fragment as F,
-  cilCloudDownload as G,
-  cilContrast as H,
-  cilFilterX as I,
-  cilHandshake as J,
-  cilInfo as K,
-  cilLayers as L,
-  cilMenu as M,
-  cilMoon as N,
-  cilOptions as O,
-  cilPeople as P,
-  cilPuzzle as Q,
-  cilSettings as R,
-  cilSpeedometer as S,
-  cilSun as T,
-  cilSwapVertical as U,
-  cilUserFollow as V,
-  cilWarning as W,
-  CIcon as X,
-  resolveDirective as Y,
-  withDirectives as Z,
+  cilContrast as G,
+  cilFilterX as H,
+  cilHandshake as I,
+  cilInfo as J,
+  cilLayers as K,
+  cilMenu as L,
+  cilMoon as M,
+  cilOptions as N,
+  cilPeople as O,
+  cilPuzzle as P,
+  cilSettings as Q,
+  cilSpeedometer as R,
+  cilSun as S,
+  cilSwapVertical as T,
+  cilUserFollow as U,
+  cilWarning as V,
+  CIcon as W,
+  resolveDirective as X,
+  withDirectives as Y,
+  normalizeStyle as Z,
   _export_sfc as _,
-  createBaseVNode as a,
-  mergeProps as a0,
-  toHandlers as a1,
-  defineComponent as a2,
-  h$2 as a3,
-  cloneVNode as a4,
-  createPopper as a5,
-  onUnmounted as a6,
-  onUpdated as a7,
-  nextTick as a8,
-  inject as a9,
-  computed as aa,
-  provide as ab,
-  onBeforeUnmount as ac,
-  renderSlot as ad,
+  createStaticVNode as a,
+  toHandlers as a0,
+  defineComponent as a1,
+  h$2 as a2,
+  cloneVNode as a3,
+  createPopper as a4,
+  onUnmounted as a5,
+  onUpdated as a6,
+  nextTick as a7,
+  inject as a8,
+  computed as a9,
+  provide as aa,
+  onBeforeUnmount as ab,
+  renderSlot as ac,
   createVNode as b,
   createElementBlock as c,
   createVueApp,
   withCtx as d,
-  createTextVNode as e,
-  createStaticVNode as f,
+  createBaseVNode as e,
+  createTextVNode as f,
   ref as g,
   createBlock as h,
   createCommentVNode as i,
@@ -51421,10 +51059,10 @@ export {
   resolveComponent as r,
   setupDevtoolsPlugin as s,
   toDisplayString as t,
-  unref as u,
-  cibGithub as v,
+  cibGithub as u,
+  cibOpenCollective as v,
   watch as w,
-  cibOpenCollective as x,
-  cibTwitter as y,
-  cilArrowBottom as z
+  cibTwitter as x,
+  cilArrowBottom as y,
+  cilArrowRight as z
 };
diff --git a/vue/docs/assets/avatar.html-CGvuFR7Q.js b/vue/docs/assets/avatar.html-CGvuFR7Q.js
new file mode 100644
index 00000000000..fc5749f2b32
--- /dev/null
+++ b/vue/docs/assets/avatar.html-CGvuFR7Q.js
@@ -0,0 +1,272 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "image-avatars",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Image avatars "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#image-avatars",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Showcase Vue avatars using images. These avatars are typically circular and can display user profile pictures.", -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/1.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/2.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/3.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="letter-avatars" tabindex="-1">Letter avatars <a class="anchor-link" href="#letter-avatars" aria-hidden="true">#</a></h2><p>Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.</p>', 3);
+const _hoisted_7 = { class: "docs-example rounded-top p-4" };
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="icons-avatars" tabindex="-1">Icons avatars <a class="anchor-link" href="#icons-avatars" aria-hidden="true">#</a></h2><p>Incorporate icons within Vue avatars, allowing for a visual representation using scalable vector graphics (SVG).</p>', 3);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createBaseVNode("svg", {
+  id: "cib-coreui-c",
+  class: "icon",
+  viewBox: "0 0 32 32"
+}, [
+  /* @__PURE__ */ createBaseVNode("path", { d: "M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z" }),
+  /* @__PURE__ */ createBaseVNode("path", { d: "M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z" })
+], -1);
+const _hoisted_13 = /* @__PURE__ */ createBaseVNode("svg", {
+  id: "cib-coreui-c",
+  class: "icon",
+  viewBox: "0 0 32 32"
+}, [
+  /* @__PURE__ */ createBaseVNode("path", { d: "M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z" }),
+  /* @__PURE__ */ createBaseVNode("path", { d: "M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z" })
+], -1);
+const _hoisted_14 = /* @__PURE__ */ createBaseVNode("svg", {
+  id: "cib-coreui-c",
+  class: "icon",
+  viewBox: "0 0 32 32"
+}, [
+  /* @__PURE__ */ createBaseVNode("path", { d: "M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z" }),
+  /* @__PURE__ */ createBaseVNode("path", { d: "M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z" })
+], -1);
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">textColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cib-coreui-c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 32 32<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">textColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cib-coreui-c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 32 32<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">textColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cib-coreui-c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 32 32<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="rounded-avatars" tabindex="-1">Rounded avatars <a class="anchor-link" href="#rounded-avatars" aria-hidden="true">#</a></h2><p>Use the <code>shape=&quot;rounded&quot;</code> prop to make avatars squared with rounded corners.</p>', 3);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="square-avatars" tabindex="-1">Square avatars <a class="anchor-link" href="#square-avatars" aria-hidden="true">#</a></h2><p>Use the <code>shape=&quot;rounded-0&quot;</code> prop to make avatars squared.</p>', 3);
+const _hoisted_22 = { class: "docs-example rounded-top p-4" };
+const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1">Sizes <a class="anchor-link" href="#sizes" aria-hidden="true">#</a></h2><p>Fancy larger or smaller avatar? Add <code>size=&quot;xl&quot;</code>, <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
+const _hoisted_26 = { class: "docs-example rounded-top p-4" };
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="avatars-with-status" tabindex="-1">Avatars with status <a class="anchor-link" href="#avatars-with-status" aria-hidden="true">#</a></h2><p>Add a status indicator to avatars using the <code>status</code> property to show online or offline status.</p>', 3);
+const _hoisted_30 = { class: "docs-example rounded-top p-4" };
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/1.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue avatars use local CSS variables on <code>.avatar</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&#39;red&#39;</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CAvatar</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vars<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CAvatar</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAvatar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAvatar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/avatar/CAvatar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>src</strong></td><td>The src attribute for the img element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>status</strong></td><td>Sets the color context of the status indicator to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 5);
+function _sfc_render(_ctx, _cache) {
+  const _component_CAvatar = resolveComponent("CAvatar");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CAvatar, {
+        src: _ctx.$withBase("/images/avatars/1.jpg")
+      }, null, 8, ["src"]),
+      createVNode(_component_CAvatar, {
+        src: _ctx.$withBase("/images/avatars/2.jpg")
+      }, null, 8, ["src"]),
+      createVNode(_component_CAvatar, {
+        src: _ctx.$withBase("/images/avatars/3.jpg")
+      }, null, 8, ["src"])
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_7, [
+      createVNode(_component_CAvatar, {
+        color: "primary",
+        "text-color": "white"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "warning",
+        "text-color": "white"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_8,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CAvatar, {
+        color: "info",
+        textColor: "white"
+      }, {
+        default: withCtx(() => [
+          _hoisted_12
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "success",
+        textColor: "white"
+      }, {
+        default: withCtx(() => [
+          _hoisted_13
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "danger",
+        textColor: "white"
+      }, {
+        default: withCtx(() => [
+          _hoisted_14
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_15,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CAvatar, {
+        color: "primary",
+        "text-color": "white",
+        shape: "rounded"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "secondary",
+        shape: "rounded"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "warning",
+        "text-color": "white",
+        shape: "rounded"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_22, [
+      createVNode(_component_CAvatar, {
+        color: "primary",
+        "text-color": "white",
+        shape: "rounded-0"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "secondary",
+        shape: "rounded-0"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "warning",
+        "text-color": "white",
+        shape: "rounded-0"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_23,
+    createBaseVNode("div", _hoisted_26, [
+      createVNode(_component_CAvatar, {
+        color: "secondary",
+        size: "xl"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "secondary",
+        size: "lg"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "secondary",
+        size: "md"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAvatar, {
+        color: "secondary",
+        size: "sm"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_27,
+    createBaseVNode("div", _hoisted_30, [
+      createVNode(_component_CAvatar, {
+        src: _ctx.$withBase("/images/avatars/1.jpg"),
+        status: "success"
+      }, null, 8, ["src"]),
+      createVNode(_component_CAvatar, {
+        color: "secondary",
+        status: "danger"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("CUI")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_31,
+    createVNode(_component_ScssDocs, {
+      file: "_avatar.scss",
+      capture: "avatar-css-vars"
+    }),
+    _hoisted_35,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "avatar-variables"
+    }),
+    _hoisted_38
+  ]);
+}
+const avatar_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "avatar.html.vue"]]);
+const data = JSON.parse('{"path":"/components/avatar.html","title":"Vue Avatar Component","lang":"en-US","frontmatter":{"title":"Vue Avatar Component","name":"Avatar","description":"The Vue Avatar component is used to display circular user profile pictures. Vue avatars can portray people or objects and support images, icons, or letters.","other_frameworks":"avatar","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/avatar.html"}]]},"headers":[{"level":2,"title":"Image avatars","slug":"image-avatars","link":"#image-avatars","children":[]},{"level":2,"title":"Letter avatars","slug":"letter-avatars","link":"#letter-avatars","children":[]},{"level":2,"title":"Icons avatars","slug":"icons-avatars","link":"#icons-avatars","children":[]},{"level":2,"title":"Rounded avatars","slug":"rounded-avatars","link":"#rounded-avatars","children":[]},{"level":2,"title":"Square avatars","slug":"square-avatars","link":"#square-avatars","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]},{"level":2,"title":"Avatars with status","slug":"avatars-with-status","link":"#avatars-with-status","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CAvatar","slug":"cavatar","link":"#cavatar","children":[]}]}],"filePathRelative":"components/avatar.md"}');
+export {
+  avatar_html as comp,
+  data
+};
diff --git a/vue/docs/assets/avatar.html-z0-kiipd.js b/vue/docs/assets/avatar.html-z0-kiipd.js
deleted file mode 100644
index 4d8a03c3278..00000000000
--- a/vue/docs/assets/avatar.html-z0-kiipd.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "image-avatars",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Image avatars "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#image-avatars",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = { class: "docs-example rounded-top p-4" };
-const _hoisted_3 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/1.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/2.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/3.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="letter-avatars" tabindex="-1">Letter avatars <a class="anchor-link" href="#letter-avatars" aria-hidden="true">#</a></h2>', 2);
-const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="rounded-avatars" tabindex="-1">Rounded avatars <a class="anchor-link" href="#rounded-avatars" aria-hidden="true">#</a></h2><p>Use the <code>shape=&quot;rounded&quot;</code> prop to make avatars squared with rounded corners.</p>', 3);
-const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="square-avatars" tabindex="-1">Square avatars <a class="anchor-link" href="#square-avatars" aria-hidden="true">#</a></h2><p>Use the <code>shape=&quot;rounded-0&quot;</code> prop to make avatars squared.</p>', 3);
-const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1">Sizes <a class="anchor-link" href="#sizes" aria-hidden="true">#</a></h2><p>Fancy larger or smaller avatar? Add <code>size=&quot;xl&quot;</code>, <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
-const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="avatars-with-status" tabindex="-1">Avatars with status <a class="anchor-link" href="#avatars-with-status" aria-hidden="true">#</a></h2>', 2);
-const _hoisted_20 = { class: "docs-example rounded-top p-4" };
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/avatars/1.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAvatar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CAvatar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CAvatar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/avatar/CAvatar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>src</strong></td><td>The src attribute for the img element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>status</strong></td><td>Sets the color context of the status indicator to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 6);
-function _sfc_render(_ctx, _cache) {
-  const _component_CAvatar = resolveComponent("CAvatar");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_2, [
-      createVNode(_component_CAvatar, {
-        src: _ctx.$withBase("/images/avatars/1.jpg")
-      }, null, 8, ["src"]),
-      createVNode(_component_CAvatar, {
-        src: _ctx.$withBase("/images/avatars/2.jpg")
-      }, null, 8, ["src"]),
-      createVNode(_component_CAvatar, {
-        src: _ctx.$withBase("/images/avatars/3.jpg")
-      }, null, 8, ["src"])
-    ]),
-    _hoisted_3,
-    createBaseVNode("div", _hoisted_5, [
-      createVNode(_component_CAvatar, {
-        color: "primary",
-        "text-color": "white"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, {
-        color: "warning",
-        "text-color": "white"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_6,
-    createBaseVNode("div", _hoisted_9, [
-      createVNode(_component_CAvatar, {
-        color: "primary",
-        "text-color": "white",
-        shape: "rounded"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, {
-        color: "secondary",
-        shape: "rounded"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, {
-        color: "warning",
-        "text-color": "white",
-        shape: "rounded"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_10,
-    createBaseVNode("div", _hoisted_13, [
-      createVNode(_component_CAvatar, {
-        color: "primary",
-        "text-color": "white",
-        shape: "rounded-0"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, {
-        color: "secondary",
-        shape: "rounded-0"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, {
-        color: "warning",
-        "text-color": "white",
-        shape: "rounded-0"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_14,
-    createBaseVNode("div", _hoisted_17, [
-      createVNode(_component_CAvatar, {
-        color: "secondary",
-        size: "xl"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, {
-        color: "secondary",
-        size: "lg"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAvatar, {
-        color: "secondary",
-        size: "sm"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_18,
-    createBaseVNode("div", _hoisted_20, [
-      createVNode(_component_CAvatar, {
-        src: _ctx.$withBase("/images/avatars/1.jpg"),
-        status: "success"
-      }, null, 8, ["src"]),
-      createVNode(_component_CAvatar, {
-        color: "secondary",
-        status: "danger"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("CUI")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_21
-  ]);
-}
-const avatar_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "avatar.html.vue"]]);
-const data = JSON.parse('{"path":"/components/avatar.html","title":"Vue Avatar Component","lang":"en-US","frontmatter":{"title":"Vue Avatar Component","name":"Avatar","description":"Vue avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.","other_frameworks":"avatar","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/avatar.html"}]]},"headers":[{"level":2,"title":"Image avatars","slug":"image-avatars","link":"#image-avatars","children":[]},{"level":2,"title":"Letter avatars","slug":"letter-avatars","link":"#letter-avatars","children":[]},{"level":2,"title":"Rounded avatars","slug":"rounded-avatars","link":"#rounded-avatars","children":[]},{"level":2,"title":"Square avatars","slug":"square-avatars","link":"#square-avatars","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]},{"level":2,"title":"Avatars with status","slug":"avatars-with-status","link":"#avatars-with-status","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CAvatar","slug":"cavatar","link":"#cavatar","children":[]}]}],"filePathRelative":"components/avatar.md"}');
-export {
-  avatar_html as comp,
-  data
-};
diff --git a/vue/docs/assets/badge.html-DZ9fuOYW.js b/vue/docs/assets/badge.html-BIxXbpUI.js
similarity index 51%
rename from vue/docs/assets/badge.html-DZ9fuOYW.js
rename to vue/docs/assets/badge.html-BIxXbpUI.js
index 383a5f73e02..142bc84c3ee 100644
--- a/vue/docs/assets/badge.html-DZ9fuOYW.js
+++ b/vue/docs/assets/badge.html-BIxXbpUI.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, e as createTextVNode, b as createVNode, d as withCtx, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, f as createTextVNode, b as createVNode, d as withCtx, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -28,30 +28,30 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h3", {
   }, "#")
 ], -1);
 const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h6</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h6</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Badges can be used as part of links or buttons to provide a counter.</p>', 2);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h6</span><span class="token punctuation">&gt;</span></span>Example heading <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h6</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Badges can be used as part of links or buttons to provide a counter.</p>', 2);
 const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Notifications <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Remark that depending on how you use them, badges may be complicated for users of screen readers and related assistive technologies.</p><p>Unless the context is clear, consider including additional context with a visually hidden piece of additional text.</p>', 3);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Notifications <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Remark that depending on how you use them, badges may be complicated for users of screen readers and related assistive technologies.</p><p>Unless the context is clear, consider including additional context with a visually hidden piece of additional text.</p>', 3);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
 const _hoisted_12 = /* @__PURE__ */ createBaseVNode("span", { class: "visually-hidden" }, "unread messages", -1);
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>9<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="positioned" tabindex="-1">Positioned <a class="anchor-link" href="#positioned" aria-hidden="true">#</a></h3><p>Use <code>position</code> prop to modify a component and position it in the corner of a link or button.</p>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>9<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="positioned" tabindex="-1">Positioned <a class="anchor-link" href="#positioned" aria-hidden="true">#</a></h3><p>Use <code>position</code> prop to modify a component and position it in the corner of a link or button.</p>', 3);
 const _hoisted_16 = { class: "docs-example rounded-top p-4" };
 const _hoisted_17 = /* @__PURE__ */ createBaseVNode("span", { class: "visually-hidden" }, "unread messages", -1);
 const _hoisted_18 = /* @__PURE__ */ createBaseVNode("span", { class: "visually-hidden" }, "unread messages", -1);
 const _hoisted_19 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
 const _hoisted_20 = /* @__PURE__ */ createBaseVNode("span", { class: "visually-hidden" }, "unread messages", -1);
 const _hoisted_21 = /* @__PURE__ */ createBaseVNode("span", { class: "visually-hidden" }, "unread messages", -1);
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also create more generic indicators without a counter using a few more utilities.</p>', 2);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    99+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>unread messages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also create more generic indicators without a counter using a few more utilities.</p>', 2);
 const _hoisted_24 = { class: "docs-example rounded-top p-4" };
 const _hoisted_25 = /* @__PURE__ */ createBaseVNode("span", { class: "visually-hidden" }, "New alerts", -1);
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border border-light p-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-circle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New alerts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="contextual-variations" tabindex="-1">Contextual variations <a class="anchor-link" href="#contextual-variations" aria-hidden="true">#</a></h2><p>Add any of the below-mentioned <code>color</code> props to modify the presentation of a badge.</p>', 3);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Profile</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border border-light p-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-circle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New alerts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="contextual-variations" tabindex="-1">Contextual variations <a class="anchor-link" href="#contextual-variations" aria-hidden="true">#</a></h2><p>Add any of the below-mentioned <code>color</code> props to modify the presentation of a badge.</p>', 3);
 const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also apply contextual variations with the <code>textBgColor</code> property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.</p>', 2);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also apply contextual variations with the <code>textBgColor</code> property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.</p>', 2);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="pill-badges" tabindex="-1">Pill badges <a class="anchor-link" href="#pill-badges" aria-hidden="true">#</a></h2><p>Apply the <code>shape=&quot;rounded-pill&quot;</code> prop to make badges rounded.</p>', 3);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="pill-badges" tabindex="-1">Pill badges <a class="anchor-link" href="#pill-badges" aria-hidden="true">#</a></h2><p>Apply the <code>shape=&quot;rounded-pill&quot;</code> prop to make badges rounded.</p>', 3);
 const _hoisted_36 = { class: "docs-example rounded-top p-4" };
-const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue badges use local CSS variables on <code>.badges</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CBadge <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CBadge<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBadge <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBadge <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/badge/CBadge&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Position badge in one of the corners of a link or button.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom-start&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 5);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue badges use local CSS variables on <code>.badges</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CBadge <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CBadge<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBadge <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBadge <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/badge/CBadge&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Position badge in one of the corners of a link or button.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom-start&#39;</code></td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table>', 5);
 function _sfc_render(_ctx, _cache) {
   const _component_CBadge = resolveComponent("CBadge");
   const _component_CButton = resolveComponent("CButton");
diff --git a/vue/docs/assets/breadcrumb.html-3P6FIBpg.js b/vue/docs/assets/breadcrumb.html-3P6FIBpg.js
new file mode 100644
index 00000000000..3b03f51eef7
--- /dev/null
+++ b/vue/docs/assets/breadcrumb.html-3P6FIBpg.js
@@ -0,0 +1,163 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "example",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Example "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#example",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.", -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Data<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dividers" tabindex="-1">Dividers <a class="anchor-link" href="#dividers" aria-hidden="true">#</a></h2><p>Dividers are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" target="_blank" rel="noopener noreferrer"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content" target="_blank" rel="noopener noreferrer"><code>content</code></a>. They can be changed by modifying a local CSS custom property <code>--coreui-breadcrumb-divider</code>, or through the <code>$breadcrumb-divider</code> Sass variable — and <code>$breadcrumb-divider-flipped</code> for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.</p>', 3);
+const _hoisted_7 = { class: "docs-example rounded-top p-4" };
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-breadcrumb-divider</span><span class="token punctuation">:</span> <span class="token string">&#39;&gt;&#39;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When modifying via Sass, the <a href="https://sass-lang.com/documentation/modules/string#quote" target="_blank" rel="noopener noreferrer">quote</a> function is required to generate the quotes around a string. For example, using <code>&gt;</code> as the divider, you can use this:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$breadcrumb-divider</span></span><span class="token punctuation">:</span> <span class="token function">quote</span><span class="token punctuation">(</span><span class="token string">&quot;&gt;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>It&#39;s also possible to use an <strong>embedded SVG icon</strong>. Apply it via our CSS custom property, or use the Sass variable.</p>', 4);
+const _hoisted_12 = { class: "docs-example rounded-top p-4" };
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-breadcrumb-divider</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span>&amp;#34<span class="token punctuation">;</span><span class="token property">data</span><span class="token punctuation">:</span>image/svg+xml<span class="token punctuation">,</span>%3Csvg xmlns=<span class="token string">&#39;http://www.w3.org/2000/svg&#39;</span> width=<span class="token string">&#39;8&#39;</span> height=<span class="token string">&#39;8&#39;</span>%3E%3Cpath d=<span class="token string">&#39;M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z&#39;</span> fill=<span class="token string">&#39;currentColor&#39;</span>/%3E%3C/svg%3E&amp;#34<span class="token punctuation">;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$breadcrumb-divider</span></span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>&quot;<span class="token property">data</span><span class="token punctuation">:</span>image/svg+xml<span class="token punctuation">,</span><span class="token placeholder selector">%3Csvg</span> xmlns=<span class="token string">&#39;http://www.w3.org/2000/svg&#39;</span> </span>\n<span class="line">width=<span class="token string">&#39;8&#39;</span> height=<span class="token string">&#39;8&#39;</span><span class="token placeholder selector">%3E</span><span class="token placeholder selector">%3Cpath</span> d=<span class="token string">&#39;M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z&#39;</span> fill=<span class="token string">&#39;currentColor&#39;</span>/<span class="token placeholder selector">%3E</span><span class="token placeholder selector">%3C</span>/svg<span class="token placeholder selector">%3E</span>&quot;<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also remove the divider setting <code>--cui-breadcrumb-divider: &#39;&#39;;</code> (empty strings in CSS custom properties counts as a value), or setting the Sass variable to <code>$breadcrumb-divider: none;</code>.</p>', 3);
+const _hoisted_16 = { class: "docs-example rounded-top p-4" };
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-breadcrumb-divider</span><span class="token punctuation">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$breadcrumb-divider</span></span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h2><p>Since breadcrumbs provide navigation, it&#39;s useful to add a significant label such as <code>aria-label=&quot;breadcrumb&quot;</code> to explain the type of navigation implemented in the <code>&lt;nav&gt;</code> element. You should also add an <code>aria-current=&quot;page&quot;</code> to the last item of the set to show that it represents the current page. <strong>CoreUI for Vue.js automatically add all of this labels to breadcrumb&#39;s components.</strong></p><p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue breadcrumbs use local CSS variables on <code>.breadcrumb</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 8);
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CBreadcrumb <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CBreadcrumb<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbreadcrumbitem" tabindex="-1">CBreadcrumbItem <a class="anchor-link" href="#cbreadcrumbitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBreadcrumbItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBreadcrumbItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/breadcrumb/CBreadcrumbItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The <code>href</code> attribute for the inner link component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 5);
+function _sfc_render(_ctx, _cache) {
+  const _component_CBreadcrumbItem = resolveComponent("CBreadcrumbItem");
+  const _component_CBreadcrumb = resolveComponent("CBreadcrumb");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CBreadcrumb, null, {
+        default: withCtx(() => [
+          createVNode(_component_CBreadcrumbItem, { active: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Home")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CBreadcrumb, null, {
+        default: withCtx(() => [
+          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Home")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CBreadcrumbItem, { active: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Library")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CBreadcrumb, null, {
+        default: withCtx(() => [
+          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Home")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Library")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CBreadcrumbItem, { active: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Data")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_7, [
+      createVNode(_component_CBreadcrumb, { style: { "--cui-breadcrumb-divider": "'>'" } }, {
+        default: withCtx(() => [
+          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Home")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CBreadcrumbItem, { active: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Library")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_8,
+    createBaseVNode("div", _hoisted_12, [
+      createVNode(_component_CBreadcrumb, { style: { "--cui-breadcrumb-divider": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E")` } }, {
+        default: withCtx(() => [
+          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Home")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CBreadcrumbItem, { active: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Library")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_13,
+    createBaseVNode("div", _hoisted_16, [
+      createVNode(_component_CBreadcrumb, { style: { "--cui-breadcrumb-divider": "''" } }, {
+        default: withCtx(() => [
+          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Home")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CBreadcrumbItem, { active: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Library")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_17,
+    createVNode(_component_ScssDocs, {
+      file: "_breadcrumb.scss",
+      capture: "breadcrumb-css-vars"
+    }),
+    _hoisted_25,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "breadcrumb-variables"
+    }),
+    _hoisted_28
+  ]);
+}
+const breadcrumb_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "breadcrumb.html.vue"]]);
+const data = JSON.parse('{"path":"/components/breadcrumb.html","title":"Vue Breadcrumb Component","lang":"en-US","frontmatter":{"title":"Vue Breadcrumb Component","name":"Breadcrumb","description":"Vue breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.","other_frameworks":"breadcrumb","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/breadcrumb.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Dividers","slug":"dividers","link":"#dividers","children":[]},{"level":2,"title":"Accessibility","slug":"accessibility","link":"#accessibility","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CBreadcrumbItem","slug":"cbreadcrumbitem","link":"#cbreadcrumbitem","children":[]}]}],"filePathRelative":"components/breadcrumb.md"}');
+export {
+  breadcrumb_html as comp,
+  data
+};
diff --git a/vue/docs/assets/breadcrumb.html-DE4SDiRm.js b/vue/docs/assets/breadcrumb.html-DE4SDiRm.js
deleted file mode 100644
index 7d1563adc01..00000000000
--- a/vue/docs/assets/breadcrumb.html-DE4SDiRm.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "example",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Example "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.", -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Data<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dividers" tabindex="-1">Dividers <a class="anchor-link" href="#dividers" aria-hidden="true">#</a></h2><p>Dividers are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" target="_blank" rel="noopener noreferrer"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content" target="_blank" rel="noopener noreferrer"><code>content</code></a>. They can be changed by modifying a local CSS custom property <code>--coreui-breadcrumb-divider</code>, or through the <code>$breadcrumb-divider</code> Sass variable — and <code>$breadcrumb-divider-flipped</code> for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.</p>', 3);
-const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-breadcrumb-divider</span><span class="token punctuation">:</span> <span class="token string">&#39;&gt;&#39;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When modifying via Sass, the <a href="https://sass-lang.com/documentation/modules/string#quote" target="_blank" rel="noopener noreferrer">quote</a> function is required to generate the quotes around a string. For example, using <code>&gt;</code> as the divider, you can use this:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$breadcrumb-divider</span></span><span class="token punctuation">:</span> <span class="token function">quote</span><span class="token punctuation">(</span><span class="token string">&quot;&gt;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>It&#39;s also possible to use an <strong>embedded SVG icon</strong>. Apply it via our CSS custom property, or use the Sass variable.</p>', 4);
-const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-breadcrumb-divider</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span>&amp;#34<span class="token punctuation">;</span><span class="token property">data</span><span class="token punctuation">:</span>image/svg+xml<span class="token punctuation">,</span>%3Csvg xmlns=<span class="token string">&#39;http://www.w3.org/2000/svg&#39;</span> width=<span class="token string">&#39;8&#39;</span> height=<span class="token string">&#39;8&#39;</span>%3E%3Cpath d=<span class="token string">&#39;M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z&#39;</span> fill=<span class="token string">&#39;currentColor&#39;</span>/%3E%3C/svg%3E&amp;#34<span class="token punctuation">;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$breadcrumb-divider</span></span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>&quot;<span class="token property">data</span><span class="token punctuation">:</span>image/svg+xml<span class="token punctuation">,</span><span class="token placeholder selector">%3Csvg</span> xmlns=<span class="token string">&#39;http://www.w3.org/2000/svg&#39;</span> </span>\n<span class="line">width=<span class="token string">&#39;8&#39;</span> height=<span class="token string">&#39;8&#39;</span><span class="token placeholder selector">%3E</span><span class="token placeholder selector">%3Cpath</span> d=<span class="token string">&#39;M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z&#39;</span> fill=<span class="token string">&#39;currentColor&#39;</span>/<span class="token placeholder selector">%3E</span><span class="token placeholder selector">%3C</span>/svg<span class="token placeholder selector">%3E</span>&quot;<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also remove the divider setting <code>--cui-breadcrumb-divider: &#39;&#39;;</code> (empty strings in CSS custom properties counts as a value), or setting the Sass variable to <code>$breadcrumb-divider: none;</code>.</p>', 3);
-const _hoisted_16 = { class: "docs-example rounded-top p-4" };
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumb</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-breadcrumb-divider</span><span class="token punctuation">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBreadcrumbItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Library<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumbItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBreadcrumb</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$breadcrumb-divider</span></span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h2><p>Since breadcrumbs provide navigation, it&#39;s useful to add a significant label such as <code>aria-label=&quot;breadcrumb&quot;</code> to explain the type of navigation implemented in the <code>&lt;nav&gt;</code> element. You should also add an <code>aria-current=&quot;page&quot;</code> to the last item of the set to show that it represents the current page. <strong>CoreUI for Vue.js automatically add all of this labels to breadcrumb&#39;s components.</strong></p><p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue breadcrumbs use local CSS variables on <code>.breadcrumb</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 8);
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CBreadcrumb <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CBreadcrumb<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbreadcrumbitem" tabindex="-1">CBreadcrumbItem <a class="anchor-link" href="#cbreadcrumbitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CBreadcrumbItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CBreadcrumbItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/breadcrumb/CBreadcrumbItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The <code>href</code> attribute for the inner link component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 5);
-function _sfc_render(_ctx, _cache) {
-  const _component_CBreadcrumbItem = resolveComponent("CBreadcrumbItem");
-  const _component_CBreadcrumb = resolveComponent("CBreadcrumb");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    createBaseVNode("div", _hoisted_3, [
-      createVNode(_component_CBreadcrumb, null, {
-        default: withCtx(() => [
-          createVNode(_component_CBreadcrumbItem, { active: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Home")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CBreadcrumb, null, {
-        default: withCtx(() => [
-          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Home")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CBreadcrumbItem, { active: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Library")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CBreadcrumb, null, {
-        default: withCtx(() => [
-          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Home")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Library")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CBreadcrumbItem, { active: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Data")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_7, [
-      createVNode(_component_CBreadcrumb, { style: { "--cui-breadcrumb-divider": "'>'" } }, {
-        default: withCtx(() => [
-          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Home")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CBreadcrumbItem, { active: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Library")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_8,
-    createBaseVNode("div", _hoisted_12, [
-      createVNode(_component_CBreadcrumb, { style: { "--cui-breadcrumb-divider": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E")` } }, {
-        default: withCtx(() => [
-          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Home")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CBreadcrumbItem, { active: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Library")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_13,
-    createBaseVNode("div", _hoisted_16, [
-      createVNode(_component_CBreadcrumb, { style: { "--cui-breadcrumb-divider": "''" } }, {
-        default: withCtx(() => [
-          createVNode(_component_CBreadcrumbItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Home")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CBreadcrumbItem, { active: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Library")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_17,
-    createVNode(_component_ScssDocs, {
-      file: "_breadcrumb.scss",
-      capture: "breadcrumb-css-vars"
-    }),
-    _hoisted_25,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "breadcrumb-variables"
-    }),
-    _hoisted_28
-  ]);
-}
-const breadcrumb_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "breadcrumb.html.vue"]]);
-const data = JSON.parse('{"path":"/components/breadcrumb.html","title":"Vue Breadcrumb Component","lang":"en-US","frontmatter":{"title":"Vue Breadcrumb Component","name":"Breadcrumb","description":"Vue breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.","other_frameworks":"breadcrumb","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/breadcrumb.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Dividers","slug":"dividers","link":"#dividers","children":[]},{"level":2,"title":"Accessibility","slug":"accessibility","link":"#accessibility","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CBreadcrumbItem","slug":"cbreadcrumbitem","link":"#cbreadcrumbitem","children":[]}]}],"filePathRelative":"components/breadcrumb.md"}');
-export {
-  breadcrumb_html as comp,
-  data
-};
diff --git a/vue/docs/assets/breakpoints.html-BkLAX3Vl.js b/vue/docs/assets/breakpoints.html-BkLAX3Vl.js
deleted file mode 100644
index a9856603b36..00000000000
--- a/vue/docs/assets/breakpoints.html-BkLAX3Vl.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode, a as createBaseVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="core-concepts" tabindex="-1">Core concepts <a class="anchor-link" href="#core-concepts" aria-hidden="true">#</a></h2><ul><li><p><strong>Breakpoints are the building blocks of responsive design.</strong> Use them to control when your layout can be adapted at a particular viewport or device size.</p></li><li><p><strong>Use media queries to architect your CSS by breakpoint.</strong> Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use <code>min-width</code> in our media queries.</p></li><li><p><strong>Mobile first, responsive design is the goal.</strong> CoreUI&#39;s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.</p></li></ul><h2 id="available-breakpoints" tabindex="-1">Available breakpoints <a class="anchor-link" href="#available-breakpoints" aria-hidden="true">#</a></h2><p>CoreUI for Vue.js includes six default breakpoints, sometimes referred to as <em>grid tiers</em>, for building responsively. These breakpoints can be customized if you&#39;re using our source Sass files.</p><table class="table"><thead><tr><th>Breakpoint</th><th>Class infix</th><th>Dimensions</th></tr></thead><tbody><tr><td>X-Small</td><td><em>None</em></td><td>&lt;576px</td></tr><tr><td>Small</td><td><code>sm</code></td><td>≥576px</td></tr><tr><td>Medium</td><td><code>md</code></td><td>≥768px</td></tr><tr><td>Large</td><td><code>lg</code></td><td>≥992px</td></tr><tr><td>Extra large</td><td><code>xl</code></td><td>≥1200px</td></tr><tr><td>Extra extra large</td><td><code>xxl</code></td><td>≥1400px</td></tr></tbody></table><p>Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don&#39;t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.</p><p>These breakpoints are customizable via Sass—you&#39;ll find them in a Sass map in our <code>_variables.scss</code> stylesheet.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$grid-breakpoints</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span></span>\n<span class="line">  <span class="token property">xs</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">sm</span><span class="token punctuation">:</span> 576px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">md</span><span class="token punctuation">:</span> 768px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">lg</span><span class="token punctuation">:</span> 992px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">xl</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">xxl</span><span class="token punctuation">:</span> 1400px</span>\n<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="https://coreui.io/docs/4.0/layout/grid#sass" target="_blank" rel="noopener noreferrer">the Sass section of the Grid documentation</a>.</p><h2 id="media-queries" tabindex="-1">Media queries <a class="anchor-link" href="#media-queries" aria-hidden="true">#</a></h2><p>Since CoreUI for Vue.js is developed to be mobile first, we use a handful of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank" rel="noopener noreferrer">media queries</a> to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.</p><h3 id="min-width" tabindex="-1">Min-width <a class="anchor-link" href="#min-width" aria-hidden="true">#</a></h3><p>CoreUI for Vue.js primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Source mixins</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// No media query necessary for xs breakpoint as it&#39;s effectively `@media (min-width: 0) { ... }`</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>lg<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>xxl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Usage</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint</span></span>\n<span class="line"><span class="token selector">.custom-class </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token selector">.custom-class </span><span class="token punctuation">{</span></span>\n<span class="line">    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// X-Small devices (portrait phones, less than 576px)</span></span>\n<span class="line"><span class="token comment">// No media query for `xs` since this is the default in CoreUI</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Small devices (landscape phones, 576px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 576px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Medium devices (tablets, 768px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Large devices (desktops, 992px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 992px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// X-Large devices (large desktops, 1200px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// XX-Large devices (larger desktops, 1400px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1400px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="max-width" tabindex="-1">Max-width <a class="anchor-link" href="#max-width" aria-hidden="true">#</a></h3><p>We occasionally use media queries that go in the other direction (the given screen size <em>or smaller</em>):</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// No media query necessary for xs breakpoint as it&#39;s effectively `@media (max-width: 0) { ... }`</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>lg<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>xxl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Example: Style from medium breakpoint and down</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token selector">.custom-class </span><span class="token punctuation">{</span></span>\n<span class="line">    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These mixins take those declared breakpoints, subtract <code>.02px</code> from them, and use them as our <code>max-width</code> values. For example:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// X-Small devices (portrait phones, less than 576px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 575.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Small devices (landscape phones, less than 768px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 767.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Medium devices (tablets, less than 992px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 991.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Large devices (desktops, less than 1200px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1199.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// X-Large devices (large desktops, less than 1400px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1399.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// XX-Large devices (larger desktops)</span></span>\n<span class="line"><span class="token comment">// No media query since the xxl breakpoint has no upper bound on its width</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 21);
-const _hoisted_22 = /* @__PURE__ */ createBaseVNode("strong", null, "Why subtract .02px?", -1);
-const _hoisted_23 = /* @__PURE__ */ createBaseVNode("a", { href: "https://www.w3.org/TR/mediaqueries-4/#range-context" }, "range context queries", -1);
-const _hoisted_24 = /* @__PURE__ */ createBaseVNode("a", { href: "https://www.w3.org/TR/mediaqueries-4/#mq-min-max" }, [
-  /* @__PURE__ */ createBaseVNode("code", null, "min-"),
-  /* @__PURE__ */ createTextVNode(" and "),
-  /* @__PURE__ */ createBaseVNode("code", null, "max-"),
-  /* @__PURE__ */ createTextVNode(" prefixes")
-], -1);
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<h3 id="single-breakpoint" tabindex="-1">Single breakpoint <a class="anchor-link" href="#single-breakpoint" aria-hidden="true">#</a></h3><p>There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>xs<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>lg<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>xxl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For example the <code>@include media-breakpoint-only(md) { ... }</code> will result in :</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 991.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="between-breakpoints" tabindex="-1">Between breakpoints <a class="anchor-link" href="#between-breakpoints" aria-hidden="true">#</a></h3><p>Similarly, media queries may span multiple breakpoint widths:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-between</span><span class="token punctuation">(</span>md<span class="token punctuation">,</span> xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>Which results in:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Example</span></span>\n<span class="line"><span class="token comment">// Apply styles starting from medium devices and up to extra large devices</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1199.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 10);
-function _sfc_render(_ctx, _cache) {
-  const _component_Callout = resolveComponent("Callout");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createVNode(_component_Callout, { color: "warning" }, {
-      default: withCtx(() => [
-        _hoisted_22,
-        createTextVNode(" Browsers don’t currently support "),
-        _hoisted_23,
-        createTextVNode(", so we work around the limitations of "),
-        _hoisted_24,
-        createTextVNode(" and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision. ")
-      ]),
-      _: 1
-    }),
-    _hoisted_25
-  ]);
-}
-const breakpoints_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "breakpoints.html.vue"]]);
-const data = JSON.parse('{"path":"/layout/breakpoints.html","title":"Breakpoints","lang":"en-US","frontmatter":{"title":"Breakpoints","name":"Breakpoints","description":"Breakpoints are the triggers in CoreUI for Vue.js for how your layout responsive changes across device or viewport sizes.","menu":"Layout","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/layout/breakpoints.html"}]]},"headers":[{"level":2,"title":"Core concepts","slug":"core-concepts","link":"#core-concepts","children":[]},{"level":2,"title":"Available breakpoints","slug":"available-breakpoints","link":"#available-breakpoints","children":[]},{"level":2,"title":"Media queries","slug":"media-queries","link":"#media-queries","children":[{"level":3,"title":"Min-width","slug":"min-width","link":"#min-width","children":[]},{"level":3,"title":"Max-width","slug":"max-width","link":"#max-width","children":[]},{"level":3,"title":"Single breakpoint","slug":"single-breakpoint","link":"#single-breakpoint","children":[]},{"level":3,"title":"Between breakpoints","slug":"between-breakpoints","link":"#between-breakpoints","children":[]}]}],"filePathRelative":"layout/breakpoints.md"}');
-export {
-  breakpoints_html as comp,
-  data
-};
diff --git a/vue/docs/assets/breakpoints.html-TXDgB0cd.js b/vue/docs/assets/breakpoints.html-TXDgB0cd.js
new file mode 100644
index 00000000000..a19d2c5009c
--- /dev/null
+++ b/vue/docs/assets/breakpoints.html-TXDgB0cd.js
@@ -0,0 +1,36 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode, e as createBaseVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="core-concepts" tabindex="-1">Core concepts <a class="anchor-link" href="#core-concepts" aria-hidden="true">#</a></h2><ul><li><p><strong>Breakpoints are the building blocks of responsive design.</strong> Use them to control when your layout can be adapted at a particular viewport or device size.</p></li><li><p><strong>Use media queries to architect your CSS by breakpoint.</strong> Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use <code>min-width</code> in our media queries.</p></li><li><p><strong>Mobile first, responsive design is the goal.</strong> CoreUI&#39;s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.</p></li></ul><h2 id="available-breakpoints" tabindex="-1">Available breakpoints <a class="anchor-link" href="#available-breakpoints" aria-hidden="true">#</a></h2><p>CoreUI for Vue.js includes six default breakpoints, sometimes referred to as <em>grid tiers</em>, for building responsively. These breakpoints can be customized if you&#39;re using our source Sass files.</p><table class="table"><thead><tr><th>Breakpoint</th><th>Class infix</th><th>Dimensions</th></tr></thead><tbody><tr><td>X-Small</td><td><em>None</em></td><td>&lt;576px</td></tr><tr><td>Small</td><td><code>sm</code></td><td>≥576px</td></tr><tr><td>Medium</td><td><code>md</code></td><td>≥768px</td></tr><tr><td>Large</td><td><code>lg</code></td><td>≥992px</td></tr><tr><td>Extra large</td><td><code>xl</code></td><td>≥1200px</td></tr><tr><td>Extra extra large</td><td><code>xxl</code></td><td>≥1400px</td></tr></tbody></table><p>Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don&#39;t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.</p><p>These breakpoints are customizable via Sass—you&#39;ll find them in a Sass map in our <code>_variables.scss</code> stylesheet.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$grid-breakpoints</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span></span>\n<span class="line">  <span class="token property">xs</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">sm</span><span class="token punctuation">:</span> 576px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">md</span><span class="token punctuation">:</span> 768px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">lg</span><span class="token punctuation">:</span> 992px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">xl</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">,</span></span>\n<span class="line">  <span class="token property">xxl</span><span class="token punctuation">:</span> 1400px</span>\n<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="https://coreui.io/docs/4.0/layout/grid#sass" target="_blank" rel="noopener noreferrer">the Sass section of the Grid documentation</a>.</p><h2 id="media-queries" tabindex="-1">Media queries <a class="anchor-link" href="#media-queries" aria-hidden="true">#</a></h2><p>Since CoreUI for Vue.js is developed to be mobile first, we use a handful of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank" rel="noopener noreferrer">media queries</a> to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.</p><h3 id="min-width" tabindex="-1">Min-width <a class="anchor-link" href="#min-width" aria-hidden="true">#</a></h3><p>CoreUI for Vue.js primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Source mixins</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// No media query necessary for xs breakpoint as it&#39;s effectively `@media (min-width: 0) { ... }`</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>lg<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>xxl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Usage</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint</span></span>\n<span class="line"><span class="token selector">.custom-class </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token selector">.custom-class </span><span class="token punctuation">{</span></span>\n<span class="line">    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// X-Small devices (portrait phones, less than 576px)</span></span>\n<span class="line"><span class="token comment">// No media query for `xs` since this is the default in CoreUI</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Small devices (landscape phones, 576px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 576px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Medium devices (tablets, 768px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Large devices (desktops, 992px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 992px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// X-Large devices (large desktops, 1200px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// XX-Large devices (larger desktops, 1400px and up)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1400px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="max-width" tabindex="-1">Max-width <a class="anchor-link" href="#max-width" aria-hidden="true">#</a></h3><p>We occasionally use media queries that go in the other direction (the given screen size <em>or smaller</em>):</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// No media query necessary for xs breakpoint as it&#39;s effectively `@media (max-width: 0) { ... }`</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>lg<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>xxl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Example: Style from medium breakpoint and down</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-down</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token selector">.custom-class </span><span class="token punctuation">{</span></span>\n<span class="line">    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These mixins take those declared breakpoints, subtract <code>.02px</code> from them, and use them as our <code>max-width</code> values. For example:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// X-Small devices (portrait phones, less than 576px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 575.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Small devices (landscape phones, less than 768px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 767.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Medium devices (tablets, less than 992px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 991.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Large devices (desktops, less than 1200px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1199.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// X-Large devices (large desktops, less than 1400px)</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1399.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// XX-Large devices (larger desktops)</span></span>\n<span class="line"><span class="token comment">// No media query since the xxl breakpoint has no upper bound on its width</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 21);
+const _hoisted_22 = /* @__PURE__ */ createBaseVNode("strong", null, "Why subtract .02px?", -1);
+const _hoisted_23 = /* @__PURE__ */ createBaseVNode("a", { href: "https://www.w3.org/TR/mediaqueries-4/#range-context" }, "range context queries", -1);
+const _hoisted_24 = /* @__PURE__ */ createBaseVNode("a", { href: "https://www.w3.org/TR/mediaqueries-4/#mq-min-max" }, [
+  /* @__PURE__ */ createBaseVNode("code", null, "min-"),
+  /* @__PURE__ */ createTextVNode(" and "),
+  /* @__PURE__ */ createBaseVNode("code", null, "max-"),
+  /* @__PURE__ */ createTextVNode(" prefixes")
+], -1);
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<h3 id="single-breakpoint" tabindex="-1">Single breakpoint <a class="anchor-link" href="#single-breakpoint" aria-hidden="true">#</a></h3><p>There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>xs<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>lg<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-only</span><span class="token punctuation">(</span>xxl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For example the <code>@include media-breakpoint-only(md) { ... }</code> will result in :</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 991.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="between-breakpoints" tabindex="-1">Between breakpoints <a class="anchor-link" href="#between-breakpoints" aria-hidden="true">#</a></h3><p>Similarly, media queries may span multiple breakpoint widths:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@include</span> <span class="token function">media-breakpoint-between</span><span class="token punctuation">(</span>md<span class="token punctuation">,</span> xl<span class="token punctuation">)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>Which results in:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Example</span></span>\n<span class="line"><span class="token comment">// Apply styles starting from medium devices and up to extra large devices</span></span>\n<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1199.98px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 10);
+function _sfc_render(_ctx, _cache) {
+  const _component_Callout = resolveComponent("Callout");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createVNode(_component_Callout, { color: "warning" }, {
+      default: withCtx(() => [
+        _hoisted_22,
+        createTextVNode(" Browsers don’t currently support "),
+        _hoisted_23,
+        createTextVNode(", so we work around the limitations of "),
+        _hoisted_24,
+        createTextVNode(" and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision. ")
+      ]),
+      _: 1
+    }),
+    _hoisted_25
+  ]);
+}
+const breakpoints_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "breakpoints.html.vue"]]);
+const data = JSON.parse('{"path":"/layout/breakpoints.html","title":"Breakpoints","lang":"en-US","frontmatter":{"title":"Breakpoints","name":"Breakpoints","description":"Breakpoints are the triggers in CoreUI for Vue.js for how your layout responsive changes across device or viewport sizes.","menu":"Layout","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/layout/breakpoints.html"}]]},"headers":[{"level":2,"title":"Core concepts","slug":"core-concepts","link":"#core-concepts","children":[]},{"level":2,"title":"Available breakpoints","slug":"available-breakpoints","link":"#available-breakpoints","children":[]},{"level":2,"title":"Media queries","slug":"media-queries","link":"#media-queries","children":[{"level":3,"title":"Min-width","slug":"min-width","link":"#min-width","children":[]},{"level":3,"title":"Max-width","slug":"max-width","link":"#max-width","children":[]},{"level":3,"title":"Single breakpoint","slug":"single-breakpoint","link":"#single-breakpoint","children":[]},{"level":3,"title":"Between breakpoints","slug":"between-breakpoints","link":"#between-breakpoints","children":[]}]}],"filePathRelative":"layout/breakpoints.md"}');
+export {
+  breakpoints_html as comp,
+  data
+};
diff --git a/vue/docs/assets/button-group.html-D-Y114W6.js b/vue/docs/assets/button-group.html-DokwKiVg.js
similarity index 53%
rename from vue/docs/assets/button-group.html-D-Y114W6.js
rename to vue/docs/assets/button-group.html-DokwKiVg.js
index fa62d869dd5..45c16501b56 100644
--- a/vue/docs/assets/button-group.html-D-Y114W6.js
+++ b/vue/docs/assets/button-group.html-DokwKiVg.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "basic-example",
@@ -19,33 +19,33 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(".")
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="ensure-the-correct-role-and-provide-a-label" tabindex="-1">Ensure the correct <code>role</code> and provide a label <a class="anchor-link" href="#ensure-the-correct-role-and-provide-a-label" aria-hidden="true">#</a></h5><p>For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper <code>role</code> attribute has to be provided. For button groups, this should be <code>role=&quot;group&quot;</code>, while toolbars should have a <code>role=&quot;toolbar&quot;</code>.</p><p>Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply <code>aria-label</code>, but options such as <code>aria-labelledby</code> can also be used.</p><p>These classes can also be added to groups of links, as an alternative to the <code>&lt;CNav&gt;</code> components.</p>', 5);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="ensure-the-correct-role-and-provide-a-label" tabindex="-1">Ensure the correct <code>role</code> and provide a label <a class="anchor-link" href="#ensure-the-correct-role-and-provide-a-label" aria-hidden="true">#</a></h5><p>For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper <code>role</code> attribute has to be provided. For button groups, this should be <code>role=&quot;group&quot;</code>, while toolbars should have a <code>role=&quot;toolbar&quot;</code>.</p><p>Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply <code>aria-label</code>, but options such as <code>aria-labelledby</code> can also be used.</p><p>These classes can also be added to groups of links, as an alternative to the <code>&lt;CNav&gt;</code> components.</p>', 5);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Active link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="mixed-styles" tabindex="-1">Mixed styles <a class="anchor-link" href="#mixed-styles" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Active link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="mixed-styles" tabindex="-1">Mixed styles <a class="anchor-link" href="#mixed-styles" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic mixed styles example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic mixed styles example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic outlined example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="checkbox-and-radio-button-groups" tabindex="-1">Checkbox and radio button groups <a class="anchor-link" href="#checkbox-and-radio-button-groups" aria-hidden="true">#</a></h2><p>Combine button-like checkbox and radio toggle buttons into a seamless looking button group.</p>', 3);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic outlined example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="checkbox-and-radio-button-groups" tabindex="-1">Checkbox and radio button groups <a class="anchor-link" href="#checkbox-and-radio-button-groups" aria-hidden="true">#</a></h2><p>Combine button-like checkbox and radio toggle buttons into a seamless looking button group.</p>', 3);
 const _hoisted_19 = { class: "docs-example rounded-top p-4" };
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic checkbox toggle button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btncheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btncheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btncheck3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic checkbox toggle button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btncheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btncheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btncheck3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic checkbox toggle button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-toolbar" tabindex="-1">Button toolbar <a class="anchor-link" href="#button-toolbar" aria-hidden="true">#</a></h2><p>Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.</p>', 3);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Basic checkbox toggle button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color: &#39;primary&#39;, variant: &#39;outline&#39;}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnradio3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-toolbar" tabindex="-1">Button toolbar <a class="anchor-link" href="#button-toolbar" aria-hidden="true">#</a></h2><p>Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.</p>', 3);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonToolbar</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toolbar with button groups<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Third group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonToolbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.</p>', 2);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonToolbar</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toolbar with button groups<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Third group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonToolbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.</p>', 2);
 const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonToolbar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toolbar with button groups<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnGroupAddon<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonToolbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonToolbar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-between<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toolbar with button groups<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnGroupAddon<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonToolbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Alternatively, of implementing button sizing classes to each button in a group, set <code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when nesting multiple groups.</p>', 3);
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonToolbar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toolbar with button groups<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnGroupAddon<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonToolbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonToolbar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-between<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toolbar with button groups<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input group example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnGroupAddon<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonToolbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Alternatively, of implementing button sizing classes to each button in a group, set <code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when nesting multiple groups.</p>', 3);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
 const _hoisted_33 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
 const _hoisted_34 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="nesting" tabindex="-1">Nesting <a class="anchor-link" href="#nesting" aria-hidden="true">#</a></h2><p>Put a <code>&lt;CDropdown&gt;</code> inside <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series of buttons.</p>', 3);
+const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="nesting" tabindex="-1">Nesting <a class="anchor-link" href="#nesting" aria-hidden="true">#</a></h2><p>Put a <code>&lt;CDropdown&gt;</code> inside <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series of buttons.</p>', 3);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Button group with nested dropdown<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vertical-variation" tabindex="-1">Vertical variation <a class="anchor-link" href="#vertical-variation" aria-hidden="true">#</a></h2><p>Create a set of buttons that appear vertically stacked rather than horizontally. <strong>Split button dropdowns are not supported here.</strong></p>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Button group with nested dropdown<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vertical-variation" tabindex="-1">Vertical variation <a class="anchor-link" href="#vertical-variation" aria-hidden="true">#</a></h2><p>Create a set of buttons that appear vertically stacked rather than horizontally. <strong>Split button dropdowns are not supported here.</strong></p>', 3);
 const _hoisted_42 = { class: "docs-example rounded-top p-4" };
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">vertical</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vertical button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">vertical</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vertical button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_44 = { class: "docs-example rounded-top p-4" };
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">vertical</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vertical button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">vertical</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vertical button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_46 = { class: "docs-example rounded-top p-4" };
-const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">vertical</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vertical button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbuttongroup" tabindex="-1">CButtonGroup <a class="anchor-link" href="#cbuttongroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButtonGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButtonGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button-group/CButtonGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>vertical</strong></td><td>Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 6);
+const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span> <span class="token attr-name">vertical</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vertical button group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vbtnradio3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbuttongroup" tabindex="-1">CButtonGroup <a class="anchor-link" href="#cbuttongroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButtonGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButtonGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button-group/CButtonGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>vertical</strong></td><td>Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 6);
 function _sfc_render(_ctx, _cache) {
   const _component_CButton = resolveComponent("CButton");
   const _component_CButtonGroup = resolveComponent("CButtonGroup");
diff --git a/vue/docs/assets/button.html-wRYZPE1L.js b/vue/docs/assets/button.html-Tm2d-w3G.js
similarity index 52%
rename from vue/docs/assets/button.html-wRYZPE1L.js
rename to vue/docs/assets/button.html-Tm2d-w3G.js
index 1023e40c3fa..dfa88fc54ff 100644
--- a/vue/docs/assets/button.html-wRYZPE1L.js
+++ b/vue/docs/assets/button.html-Tm2d-w3G.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -13,15 +13,15 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "CoreUI includes a bunch of predefined buttons components, each serving its own semantic purpose. Buttons show what action will happen when the user clicks or touches it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.", -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_5 = /* @__PURE__ */ createBaseVNode("code", null, ".visually-hidden", -1);
 const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<h2 id="disable-text-wrapping" tabindex="-1">Disable text wrapping <a class="anchor-link" href="#disable-text-wrapping" aria-hidden="true">#</a></h2><p>If you don&#39;t want the button text to wrap, you can add the <code>.text-nowrap</code> class to the <code>&lt;CButton&gt;</code>. In Sass, you can set <code>$btn-white-space: nowrap</code> to disable text wrapping for each button.</p><h2 id="button-components" tabindex="-1">Button components <a class="anchor-link" href="#button-components" aria-hidden="true">#</a></h2><p>The <code>&lt;CButton&gt;</code> component are designed for <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code> elements (though some browsers may apply a slightly different rendering).</p><p>If you&#39;re using <code>&lt;CButton&gt;</code> component as <code>&lt;a&gt;</code> elements that are used to trigger functionality ex. collapsing content, these links should be given a <code>role=&quot;button&quot;</code> to adequately communicate their meaning to assistive technologies such as screen readers.</p>', 5);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reset<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="outline-buttons" tabindex="-1">Outline buttons <a class="anchor-link" href="#outline-buttons" aria-hidden="true">#</a></h2><p>If you need a button, but without the strong background colors. Set <code>variant=&quot;outline&quot;</code> prop to remove all background colors.</p>', 3);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reset<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="outline-buttons" tabindex="-1">Outline buttons <a class="anchor-link" href="#outline-buttons" aria-hidden="true">#</a></h2><p>If you need a button, but without the strong background colors. Set <code>variant=&quot;outline&quot;</code> prop to remove all background colors.</p>', 3);
 const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="ghost-buttons" tabindex="-1">Ghost buttons <a class="anchor-link" href="#ghost-buttons" aria-hidden="true">#</a></h2><p>If you need a ghost variant of button, set <code>variant=&quot;ghost&quot;</code> prop to remove all background colors.</p>', 3);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="ghost-buttons" tabindex="-1">Ghost buttons <a class="anchor-link" href="#ghost-buttons" aria-hidden="true">#</a></h2><p>If you need a ghost variant of button, set <code>variant=&quot;ghost&quot;</code> prop to remove all background colors.</p>', 3);
 const _hoisted_19 = { class: "docs-example rounded-top p-4" };
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_21 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "sizes",
   tabindex: "-1"
@@ -41,29 +41,29 @@ const _hoisted_22 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(" for additional sizes.")
 ], -1);
 const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="shapes" tabindex="-1">Shapes <a class="anchor-link" href="#shapes" aria-hidden="true">#</a></h2><h3 id="pill-buttons" tabindex="-1">Pill buttons <a class="anchor-link" href="#pill-buttons" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="shapes" tabindex="-1">Shapes <a class="anchor-link" href="#shapes" aria-hidden="true">#</a></h2><h3 id="pill-buttons" tabindex="-1">Pill buttons <a class="anchor-link" href="#pill-buttons" aria-hidden="true">#</a></h3>', 3);
 const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="square-buttons" tabindex="-1">Square buttons <a class="anchor-link" href="#square-buttons" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="square-buttons" tabindex="-1">Square buttons <a class="anchor-link" href="#square-buttons" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
-const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-state" tabindex="-1">Disabled state <a class="anchor-link" href="#disabled-state" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean prop to any <code>&lt;CButton&gt;</code> component to make buttons look inactive. Disabled button has <code>pointer-events: none</code> applied to, disabling hover and active states from triggering.</p>', 3);
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-state" tabindex="-1">Disabled state <a class="anchor-link" href="#disabled-state" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean prop to any <code>&lt;CButton&gt;</code> component to make buttons look inactive. Disabled button has <code>pointer-events: none</code> applied to, disabling hover and active states from triggering.</p>', 3);
 const _hoisted_34 = { class: "docs-example rounded-top p-4" };
-const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Primary button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:</p><p><code>&lt;a&gt;</code>s don&#39;t support the <code>disabled</code> attribute, so CoreUI has to add <code>.disabled</code> class to make buttons look inactive. CoreUI also has to add to the disabled button component <code>aria-disabled=&quot;true&quot;</code> attribute to show the state of the component to assistive technologies.</p>', 3);
+const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Primary button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:</p><p><code>&lt;a&gt;</code>s don&#39;t support the <code>disabled</code> attribute, so CoreUI has to add <code>.disabled</code> class to make buttons look inactive. CoreUI also has to add to the disabled button component <code>aria-disabled=&quot;true&quot;</code> attribute to show the state of the component to assistive technologies.</p>', 3);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Primary link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>The <code>.disabled</code> class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized. Besides, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a <code>tabindex=&quot;-1&quot;</code> attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p><h2 id="block-buttons" tabindex="-1">Block buttons <a class="anchor-link" href="#block-buttons" aria-hidden="true">#</a></h2><p>Create buttons that span the full width of a parent—by using utilities.</p>', 4);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Primary link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>The <code>.disabled</code> class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized. Besides, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a <code>tabindex=&quot;-1&quot;</code> attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p><h2 id="block-buttons" tabindex="-1">Block buttons <a class="anchor-link" href="#block-buttons" aria-hidden="true">#</a></h2><p>Create buttons that span the full width of a parent—by using utilities.</p>', 4);
 const _hoisted_43 = { class: "docs-example rounded-top p-4" };
 const _hoisted_44 = { class: "d-grid gap-2" };
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Here we create a responsive variation, starting with vertically stacked buttons until the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize your browser to see them change.</p>', 2);
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Here we create a responsive variation, starting with vertically stacked buttons until the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize your browser to see them change.</p>', 2);
 const _hoisted_47 = { class: "docs-example rounded-top p-4" };
 const _hoisted_48 = { class: "d-grid gap-2 d-md-block" };
-const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2 d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can adjust the width of your block buttons with grid column width classes. For example, for a half-width &quot;block button&quot;, use <code>.col-6</code>. Center it horizontally with <code>.mx-auto</code>, too.</p>', 2);
+const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2 d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can adjust the width of your block buttons with grid column width classes. For example, for a half-width &quot;block button&quot;, use <code>.col-6</code>. Center it horizontally with <code>.mx-auto</code>, too.</p>', 2);
 const _hoisted_51 = { class: "docs-example rounded-top p-4" };
 const _hoisted_52 = { class: "d-grid gap-2 col-6 mx-auto" };
-const _hoisted_53 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2 col-6 mx-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we&#39;ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they&#39;re no longer stacked.</p>', 2);
+const _hoisted_53 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2 col-6 mx-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we&#39;ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they&#39;re no longer stacked.</p>', 2);
 const _hoisted_55 = { class: "docs-example rounded-top p-4" };
 const _hoisted_56 = { class: "d-grid gap-2 d-md-flex justify-content-md-end" };
-const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2 d-md-flex justify-content-md-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-md-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue buttons use local CSS variables on <code>.btn</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_61 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CButton <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CButton<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button/CButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of button. Always specify the type attribute for the <code>&lt;button&gt;</code> element.<br>Different browsers may use different default types for the <code>&lt;button&gt;</code> element.</td><td>string</td><td><code>&#39;button&#39;</code>, <code>&#39;submit&#39;</code>, <code>&#39;reset&#39;</code></td><td>&#39;button&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the button.</td><td></td></tr></tbody></table>', 7);
+const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-grid gap-2 d-md-flex justify-content-md-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-md-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue buttons use local CSS variables on <code>.btn</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_61 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CButton <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CButton<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/button/CButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>shape</strong></td><td>Select the shape of the component.</td><td>string</td><td><code>&#39;rounded&#39;</code>, <code>&#39;rounded-top&#39;</code>, <code>&#39;rounded-end&#39;</code>, <code>&#39;rounded-bottom&#39;</code>, <code>&#39;rounded-start&#39;</code>, <code>&#39;rounded-circle&#39;</code>, <code>&#39;rounded-pill&#39;</code>, <code>&#39;rounded-0&#39;</code>, <code>&#39;rounded-1&#39;</code>, <code>&#39;rounded-2&#39;</code>, <code>&#39;rounded-3&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of button. Always specify the type attribute for the <code>&lt;button&gt;</code> element.<br>Different browsers may use different default types for the <code>&lt;button&gt;</code> element.</td><td>string</td><td><code>&#39;button&#39;</code>, <code>&#39;submit&#39;</code>, <code>&#39;reset&#39;</code></td><td>&#39;button&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the button.</td><td></td></tr></tbody></table>', 7);
 function _sfc_render(_ctx, _cache) {
   const _component_CButton = resolveComponent("CButton");
   const _component_Callout = resolveComponent("Callout");
diff --git a/vue/docs/assets/calendar.html-CseGxlE_.js b/vue/docs/assets/calendar.html-aIZ63-sL.js
similarity index 92%
rename from vue/docs/assets/calendar.html-CseGxlE_.js
rename to vue/docs/assets/calendar.html-aIZ63-sL.js
index 5caa23a4d2d..583e8d78ae5 100644
--- a/vue/docs/assets/calendar.html-CseGxlE_.js
+++ b/vue/docs/assets/calendar.html-aIZ63-sL.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -65,7 +65,7 @@ const _hoisted_13 = /* @__PURE__ */ createBaseVNode("h3", {
 ], -1);
 const _hoisted_14 = { class: "docs-example rounded-top p-4" };
 const _hoisted_15 = { class: "d-flex mb-3" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccalendar" tabindex="-1">CCalendar <a class="anchor-link" href="#ccalendar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCalendar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCalendar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/calendar/CCalendar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>range</strong></td><td>Allow range selection.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-hover</strong></td><td>Callback fired when the user hovers over the calendar cell.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>calendar-date-change</strong></td><td>Callback fired when the calendar date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr></tbody></table>', 7);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccalendar" tabindex="-1">CCalendar <a class="anchor-link" href="#ccalendar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCalendar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCalendar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/calendar/CCalendar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>range</strong></td><td>Allow range selection.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td></td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-hover</strong></td><td>Callback fired when the user hovers over the calendar cell.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>calendar-date-change</strong></td><td>Callback fired when the calendar date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - undefined</td></tr></tbody></table>', 7);
 function _sfc_render(_ctx, _cache) {
   const _component_CCalendar = resolveComponent("CCalendar");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/callout.html-DJC53ru-.js b/vue/docs/assets/callout.html-BHcngsku.js
similarity index 52%
rename from vue/docs/assets/callout.html-DJC53ru-.js
rename to vue/docs/assets/callout.html-BHcngsku.js
index 3a45bc5bf2e..89fda357b4c 100644
--- a/vue/docs/assets/callout.html-DJC53ru-.js
+++ b/vue/docs/assets/callout.html-BHcngsku.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -19,7 +19,7 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(").")
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCallout</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCallout</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_5 = /* @__PURE__ */ createBaseVNode("h5", null, "Conveying meaning to assistive technologies", -1);
 const _hoisted_6 = /* @__PURE__ */ createBaseVNode("p", null, " Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class. ", -1);
 const _hoisted_7 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -49,8 +49,8 @@ const _hoisted_9 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, ".callout"),
   /* @__PURE__ */ createTextVNode(" for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.")
 ], -1);
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CCallout <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CCallout<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccallout" tabindex="-1">CCallout <a class="anchor-link" href="#ccallout" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCallout <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCallout <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/callout/CCallout&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr></tbody></table>', 5);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CCallout <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CCallout<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccallout" tabindex="-1">CCallout <a class="anchor-link" href="#ccallout" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCallout <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCallout <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/callout/CCallout&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr></tbody></table>', 5);
 function _sfc_render(_ctx, _cache) {
   const _component_CCallout = resolveComponent("CCallout");
   const _component_ScssDocs = resolveComponent("ScssDocs");
diff --git a/vue/docs/assets/card.html-DN9WmlIZ.js b/vue/docs/assets/card.html-CiiNUsv5.js
similarity index 62%
rename from vue/docs/assets/card.html-DN9WmlIZ.js
rename to vue/docs/assets/card.html-CiiNUsv5.js
index a721312d98d..f33bc44252e 100644
--- a/vue/docs/assets/card.html-DN9WmlIZ.js
+++ b/vue/docs/assets/card.html-CiiNUsv5.js
@@ -1,24 +1,24 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, F as Fragment, j as renderList, f as createStaticVNode, e as createTextVNode, t as toDisplayString, n as normalizeClass } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, F as Fragment, j as renderList, a as createStaticVNode, f as createTextVNode, t as toDisplayString, n as normalizeClass } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples" aria-hidden="true">#</a></h2><h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about" aria-hidden="true">#</a></h2><p>A Vue card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.</p><h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use <a href="https://coreui.io/docs/utilities/spacing" target="_blank" rel="noopener noreferrer">spacing utilities</a> as needed. They have no fixed width to start, so they&#39;ll fill the full width of its parent.</p><p>Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they&#39;ll naturally fill the full width of its parent element.</p>', 6);
 const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="content-types" tabindex="-1">Content types <a class="anchor-link" href="#content-types" aria-hidden="true">#</a></h2><p>CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.</p><h3 id="body" tabindex="-1">Body <a class="anchor-link" href="#body" aria-hidden="true">#</a></h3><p>The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you need a padded section within a card.</p>', 5);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="content-types" tabindex="-1">Content types <a class="anchor-link" href="#content-types" aria-hidden="true">#</a></h2><p>CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.</p><h3 id="body" tabindex="-1">Body <a class="anchor-link" href="#body" aria-hidden="true">#</a></h3><p>The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you need a padded section within a card.</p>', 5);
 const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    This is some text within a card body.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="titles-text-and-links" tabindex="-1">Titles, text, and links <a class="anchor-link" href="#titles-text-and-links" aria-hidden="true">#</a></h3><p>Card titles are managed by <code>&lt;CCardTitle&gt;</code> component. Identically, links are attached and collected next to each other by <code>&lt;CCardLink&gt;</code> component.</p><p>Subtitles are managed by <code>&lt;CCardSubtitle&gt;</code> component. If the <code>&lt;CCardTitle&gt;</code> also, the <code>&lt;CCardSubtitle&gt;</code> items are stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are arranged rightly.</p>', 4);
+const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    This is some text within a card body.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="titles-text-and-links" tabindex="-1">Titles, text, and links <a class="anchor-link" href="#titles-text-and-links" aria-hidden="true">#</a></h3><p>Card titles are managed by <code>&lt;CCardTitle&gt;</code> component. Identically, links are attached and collected next to each other by <code>&lt;CCardLink&gt;</code> component.</p><p>Subtitles are managed by <code>&lt;CCardSubtitle&gt;</code> component. If the <code>&lt;CCardTitle&gt;</code> also, the <code>&lt;CCardSubtitle&gt;</code> items are stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are arranged rightly.</p>', 4);
 const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardSubtitle</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2 text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Card subtitle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardSubtitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Card link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="images" tabindex="-1">Images <a class="anchor-link" href="#images" aria-hidden="true">#</a></h3><p><code>.card-img-top</code> places a picture to the top of the card. With <code>.card-text</code>, text can be added to the card. Text within <code>.card-text</code> can additionally be styled with the regular HTML tags.</p>', 3);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardSubtitle</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2 text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Card subtitle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardSubtitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Card link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="images" tabindex="-1">Images <a class="anchor-link" href="#images" aria-hidden="true">#</a></h3><p><code>.card-img-top</code> places a picture to the top of the card. With <code>.card-text</code>, text can be added to the card. Text within <code>.card-text</code> can additionally be styled with the regular HTML tags.</p>', 3);
 const _hoisted_22 = { class: "docs-example rounded-top p-4" };
-const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="list-groups" tabindex="-1">List groups <a class="anchor-link" href="#list-groups" aria-hidden="true">#</a></h3><p>Create lists of content in a card with a flush list group.</p>', 3);
+const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="list-groups" tabindex="-1">List groups <a class="anchor-link" href="#list-groups" aria-hidden="true">#</a></h3><p>Create lists of content in a card with a flush list group.</p>', 3);
 const _hoisted_26 = { class: "docs-example rounded-top p-4" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">::: demo</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">:::</span>\n<span class="line">```vue</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">::: demo</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">:::</span>\n<span class="line">```vue</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="kitchen-sink" tabindex="-1">Kitchen sink <a class="anchor-link" href="#kitchen-sink" aria-hidden="true">#</a></h3><p>Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.</p>', 3);
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="kitchen-sink" tabindex="-1">Kitchen sink <a class="anchor-link" href="#kitchen-sink" aria-hidden="true">#</a></h3><p>Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.</p>', 3);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Card link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="header-and-footer" tabindex="-1">Header and footer <a class="anchor-link" href="#header-and-footer" aria-hidden="true">#</a></h3><p>Add an optional header and/or footer within a card.</p>', 3);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Card link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="header-and-footer" tabindex="-1">Header and footer <a class="anchor-link" href="#header-and-footer" aria-hidden="true">#</a></h3><p>Add an optional header and/or footer within a card.</p>', 3);
 const _hoisted_36 = { class: "docs-example rounded-top p-4" };
-const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Card headers can be styled by adding ex. <code>as=&quot;h5&quot;</code>.</p>', 2);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Card headers can be styled by adding ex. <code>as=&quot;h5&quot;</code>.</p>', 2);
 const _hoisted_39 = { class: "docs-example rounded-top p-4" };
-const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_41 = { class: "docs-example rounded-top p-4" };
 const _hoisted_42 = /* @__PURE__ */ createBaseVNode("blockquote", { class: "blockquote mb-0" }, [
   /* @__PURE__ */ createBaseVNode("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."),
@@ -27,34 +27,34 @@ const _hoisted_42 = /* @__PURE__ */ createBaseVNode("blockquote", { class: "bloc
     /* @__PURE__ */ createBaseVNode("cite", { title: "Source Title" }, "Source Title")
   ])
 ], -1);
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Quote<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blockquote mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blockquote-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Someone famous in <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cite</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Source Title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Source Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cite</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>blockquote</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Quote<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blockquote mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blockquote-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Someone famous in <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cite</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Source Title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Source Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cite</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>blockquote</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_44 = { class: "docs-example rounded-top p-4" };
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Cards assume no specific <code>width</code> to start, so they&#39;ll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.</p><h3 id="using-grid-markup" tabindex="-1">Using grid markup <a class="anchor-link" href="#using-grid-markup" aria-hidden="true">#</a></h3><p>Using the grid, wrap cards in columns and rows as needed.</p>', 5);
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Cards assume no specific <code>width</code> to start, so they&#39;ll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.</p><h3 id="using-grid-markup" tabindex="-1">Using grid markup <a class="anchor-link" href="#using-grid-markup" aria-hidden="true">#</a></h3><p>Using the grid, wrap cards in columns and rows as needed.</p>', 5);
 const _hoisted_50 = { class: "docs-example rounded-top p-4" };
-const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="using-utilities" tabindex="-1">Using utilities <a class="anchor-link" href="#using-utilities" aria-hidden="true">#</a></h3><p>Use some of <a href="https://coreui.io/docs/utilities/sizing/" target="_blank" rel="noopener noreferrer">available sizing utilities</a> to rapidly set a card&#39;s width.</p>', 3);
+const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="using-utilities" tabindex="-1">Using utilities <a class="anchor-link" href="#using-utilities" aria-hidden="true">#</a></h3><p>Use some of <a href="https://coreui.io/docs/utilities/sizing/" target="_blank" rel="noopener noreferrer">available sizing utilities</a> to rapidly set a card&#39;s width.</p>', 3);
 const _hoisted_54 = { class: "docs-example rounded-top p-4" };
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-75<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="using-custom-css" tabindex="-1">Using custom CSS <a class="anchor-link" href="#using-custom-css" aria-hidden="true">#</a></h3><p>Use custom CSS in your stylesheets or as inline styles to set a width.</p>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-75<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="using-custom-css" tabindex="-1">Using custom CSS <a class="anchor-link" href="#using-custom-css" aria-hidden="true">#</a></h3><p>Use custom CSS in your stylesheets or as inline styles to set a width.</p>', 3);
 const _hoisted_58 = { class: "docs-example rounded-top p-4" };
-const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-alignment" tabindex="-1">Text alignment <a class="anchor-link" href="#text-alignment" aria-hidden="true">#</a></h2><p>You can instantly change the text arrangement of any card—in its whole or specific parts—with <a href="https://coreui.io/docs/utilities/text/#text-alignment" target="_blank" rel="noopener noreferrer">text align classes</a>.</p>', 3);
+const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-alignment" tabindex="-1">Text alignment <a class="anchor-link" href="#text-alignment" aria-hidden="true">#</a></h2><p>You can instantly change the text arrangement of any card—in its whole or specific parts—with <a href="https://coreui.io/docs/utilities/text/#text-alignment" target="_blank" rel="noopener noreferrer">text align classes</a>.</p>', 3);
 const _hoisted_62 = { class: "docs-example rounded-top p-4" };
-const _hoisted_63 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-end<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="navigation" tabindex="-1">Navigation <a class="anchor-link" href="#navigation" aria-hidden="true">#</a></h2><p>Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our <code>&lt;CNav&gt;</code> component.</p>', 3);
+const _hoisted_63 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-end<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="navigation" tabindex="-1">Navigation <a class="anchor-link" href="#navigation" aria-hidden="true">#</a></h2><p>Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our <code>&lt;CNav&gt;</code> component.</p>', 3);
 const _hoisted_66 = { class: "docs-example rounded-top p-4" };
-const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card-header-tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">active</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Active</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Link</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">disabled</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Disabled</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card-header-tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">active</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Active</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Link</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">disabled</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Disabled</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_68 = { class: "docs-example rounded-top p-4" };
-const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card-header-pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">active</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Active</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Link</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">disabled</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Disabled</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="images-1" tabindex="-1">Images <a class="anchor-link" href="#images-1" aria-hidden="true">#</a></h2><p>Cards introduce several options for acting with images. Pick from appending &quot;image caps&quot; at either end of a card, overlaying images with content, or just inserting the image in a card.</p><h3 id="image-caps" tabindex="-1">Image caps <a class="anchor-link" href="#image-caps" aria-hidden="true">#</a></h3><p>Similar to headers and footers, cards can include top and bottom &quot;image caps&quot;—images at the top or bottom of a card.</p>', 5);
+const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card-header-pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">active</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Active</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Link</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">disabled</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Disabled</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Special title treatment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>With supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="images-1" tabindex="-1">Images <a class="anchor-link" href="#images-1" aria-hidden="true">#</a></h2><p>Cards introduce several options for acting with images. Pick from appending &quot;image caps&quot; at either end of a card, overlaying images with content, or just inserting the image in a card.</p><h3 id="image-caps" tabindex="-1">Image caps <a class="anchor-link" href="#image-caps" aria-hidden="true">#</a></h3><p>Similar to headers and footers, cards can include top and bottom &quot;image caps&quot;—images at the top or bottom of a card.</p>', 5);
 const _hoisted_74 = { class: "docs-example rounded-top p-4" };
 const _hoisted_75 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_76 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
-const _hoisted_77 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="image-overlays" tabindex="-1">Image overlays <a class="anchor-link" href="#image-overlays" aria-hidden="true">#</a></h3><p>Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.</p>', 3);
+const _hoisted_77 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="image-overlays" tabindex="-1">Image overlays <a class="anchor-link" href="#image-overlays" aria-hidden="true">#</a></h3><p>Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.</p>', 3);
 const _hoisted_80 = { class: "docs-example rounded-top p-4" };
-const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3 bg-dark text-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImageOverlay</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardImageOverlay</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal" tabindex="-1">Horizontal <a class="anchor-link" href="#horizontal" aria-hidden="true">#</a></h2><p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code>.g-0</code> and use <code>.col-md-*</code> classes to make the card horizontal at the <code>md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>', 3);
+const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3 bg-dark text-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImageOverlay</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardImageOverlay</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal" tabindex="-1">Horizontal <a class="anchor-link" href="#horizontal" aria-hidden="true">#</a></h2><p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code>.g-0</code> and use <code>.col-md-*</code> classes to make the card horizontal at the <code>md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>', 3);
 const _hoisted_84 = { class: "docs-example rounded-top p-4" };
 const _hoisted_85 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
-const _hoisted_86 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css">max=<span class="token property">width</span><span class="token punctuation">:</span> 540px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="card-styles" tabindex="-1">Card styles <a class="anchor-link" href="#card-styles" aria-hidden="true">#</a></h2><p>Cards include various options for customizing their backgrounds, borders, and color.</p><h3 id="background-and-color" tabindex="-1">Background and color <a class="anchor-link" href="#background-and-color" aria-hidden="true">#</a></h3><p>Use <code>color</code> property to change the appearance of a card.</p>', 5);
+const _hoisted_86 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css">max=<span class="token property">width</span><span class="token punctuation">:</span> 540px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="card-styles" tabindex="-1">Card styles <a class="anchor-link" href="#card-styles" aria-hidden="true">#</a></h2><p>Cards include various options for customizing their backgrounds, borders, and color.</p><h3 id="background-and-color" tabindex="-1">Background and color <a class="anchor-link" href="#background-and-color" aria-hidden="true">#</a></h3><p>Use <code>color</code> property to change the appearance of a card.</p>', 5);
 const _hoisted_91 = { class: "docs-example rounded-top p-4" };
-const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;success&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;danger&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;light&#39; },</span>\n<span class="line">  { color: &#39;dark&#39;, textColor: &#39;white&#39; }</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.textColor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also apply contextual variations with the <code>textBgColor</code> property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.</p>', 2);
+const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;success&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;danger&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39;, textColor: &#39;white&#39; },</span>\n<span class="line">  { color: &#39;light&#39; },</span>\n<span class="line">  { color: &#39;dark&#39;, textColor: &#39;white&#39; }</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.textColor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also apply contextual variations with the <code>textBgColor</code> property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.</p>', 2);
 const _hoisted_94 = { class: "docs-example rounded-top p-4" };
-const _hoisted_95 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39; },</span>\n<span class="line">  { color: &#39;success&#39; },</span>\n<span class="line">  { color: &#39;danger&#39; },</span>\n<span class="line">  { color: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39; },</span>\n<span class="line">  { color: &#39;light&#39; },</span>\n<span class="line">  { color: &#39;dark&#39; }</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_95 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39; },</span>\n<span class="line">  { color: &#39;success&#39; },</span>\n<span class="line">  { color: &#39;danger&#39; },</span>\n<span class="line">  { color: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39; },</span>\n<span class="line">  { color: &#39;light&#39; },</span>\n<span class="line">  { color: &#39;dark&#39; }</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:textBgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_96 = /* @__PURE__ */ createBaseVNode("code", null, ".visually-hidden", -1);
 const _hoisted_97 = /* @__PURE__ */ createBaseVNode("h3", {
   id: "border",
@@ -83,40 +83,40 @@ const _hoisted_98 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(" or a subset of the card's contents as shown below.")
 ], -1);
 const _hoisted_99 = { class: "docs-example rounded-top p-4" };
-const _hoisted_100 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39;, textColor: &#39;primary&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39;, textColor: &#39;secondary&#39; },</span>\n<span class="line">  { color: &#39;success&#39;, textColor: &#39;success&#39; },</span>\n<span class="line">  { color: &#39;danger&#39;, textColor: &#39;danger&#39; },</span>\n<span class="line">  { color: &#39;warning&#39;, textColor: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39;, textColor: &#39;info&#39; },</span>\n<span class="line">  { color: &#39;light&#39;},</span>\n<span class="line">  { color: &#39;dark&#39;}</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.textColor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>border-&#39; + item.color<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="top-border" tabindex="-1">Top border <a class="anchor-link" href="#top-border" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_100 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39;, textColor: &#39;primary&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39;, textColor: &#39;secondary&#39; },</span>\n<span class="line">  { color: &#39;success&#39;, textColor: &#39;success&#39; },</span>\n<span class="line">  { color: &#39;danger&#39;, textColor: &#39;danger&#39; },</span>\n<span class="line">  { color: &#39;warning&#39;, textColor: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39;, textColor: &#39;info&#39; },</span>\n<span class="line">  { color: &#39;light&#39;},</span>\n<span class="line">  { color: &#39;dark&#39;}</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.textColor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>border-&#39; + item.color<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="top-border" tabindex="-1">Top border <a class="anchor-link" href="#top-border" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_102 = { class: "docs-example rounded-top p-4" };
-const _hoisted_103 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39;, textColor: &#39;primary&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39;, textColor: &#39;secondary&#39; },</span>\n<span class="line">  { color: &#39;success&#39;, textColor: &#39;success&#39; },</span>\n<span class="line">  { color: &#39;danger&#39;, textColor: &#39;danger&#39; },</span>\n<span class="line">  { color: &#39;warning&#39;, textColor: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39;, textColor: &#39;info&#39; },</span>\n<span class="line">  { color: &#39;light&#39;},</span>\n<span class="line">  { color: &#39;dark&#39;}</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.textColor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3 border-top-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>border-top-&#39; + item.color<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="card-layout" tabindex="-1">Card layout <a class="anchor-link" href="#card-layout" aria-hidden="true">#</a></h2><p>In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, <strong>these layout options are not yet responsive</strong>.</p><h3 id="card-groups" tabindex="-1">Card groups <a class="anchor-link" href="#card-groups" aria-hidden="true">#</a></h3><p>Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use <code>display: flex;</code> to become attached with uniform dimensions starting at the <code>sm</code> breakpoint.</p>', 5);
+const _hoisted_103 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [</span>\n<span class="line">  { color: &#39;primary&#39;, textColor: &#39;primary&#39; },</span>\n<span class="line">  { color: &#39;secondary&#39;, textColor: &#39;secondary&#39; },</span>\n<span class="line">  { color: &#39;success&#39;, textColor: &#39;success&#39; },</span>\n<span class="line">  { color: &#39;danger&#39;, textColor: &#39;danger&#39; },</span>\n<span class="line">  { color: &#39;warning&#39;, textColor: &#39;warning&#39; },</span>\n<span class="line">  { color: &#39;info&#39;, textColor: &#39;info&#39; },</span>\n<span class="line">  { color: &#39;light&#39;},</span>\n<span class="line">  { color: &#39;dark&#39;}</span>\n<span class="line">]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">:text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.textColor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3 border-top-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>border-top-&#39; + item.color<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardHeader</span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>{{item.color}} card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="card-layout" tabindex="-1">Card layout <a class="anchor-link" href="#card-layout" aria-hidden="true">#</a></h2><p>In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, <strong>these layout options are not yet responsive</strong>.</p><h3 id="card-groups" tabindex="-1">Card groups <a class="anchor-link" href="#card-groups" aria-hidden="true">#</a></h3><p>Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use <code>display: flex;</code> to become attached with uniform dimensions starting at the <code>sm</code> breakpoint.</p>', 5);
 const _hoisted_108 = { class: "docs-example rounded-top p-4" };
 const _hoisted_109 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_110 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_111 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
-const _hoisted_112 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When using card groups with footers, their content will automatically line up.</p>', 2);
+const _hoisted_112 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When using card groups with footers, their content will automatically line up.</p>', 2);
 const _hoisted_114 = { class: "docs-example rounded-top p-4" };
 const _hoisted_115 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_116 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_117 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
-const _hoisted_118 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="grid-cards" tabindex="-1">Grid cards <a class="anchor-link" href="#grid-cards" aria-hidden="true">#</a></h3><p>Use the <code>CRow</code> component and set <code>:xs|sm|md|lg|xl|xxl=&quot;{ cols: * }&quot;</code> property to control how many grid columns (wrapped around your cards) you show per row. For example, here&#39;s <code>:xs=&quot;{cols: 1}&quot;</code> laying out the cards on one column, and <code>:md=&quot;{cols: 1}&quot;</code> splitting four cards to equal width across multiple rows, from the medium breakpoint up.</p>', 3);
+const _hoisted_118 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="grid-cards" tabindex="-1">Grid cards <a class="anchor-link" href="#grid-cards" aria-hidden="true">#</a></h3><p>Use the <code>CRow</code> component and set <code>:xs|sm|md|lg|xl|xxl=&quot;{ cols: * }&quot;</code> property to control how many grid columns (wrapped around your cards) you show per row. For example, here&#39;s <code>:xs=&quot;{cols: 1}&quot;</code> laying out the cards on one column, and <code>:md=&quot;{cols: 1}&quot;</code> splitting four cards to equal width across multiple rows, from the medium breakpoint up.</p>', 3);
 const _hoisted_121 = { class: "docs-example rounded-top p-4" };
 const _hoisted_122 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_123 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_124 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_125 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
-const _hoisted_126 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols:2 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Change it to <code>:md=&quot;{ cols: 3}&quot;</code> and you&#39;ll see the fourth card wrap.</p>', 2);
+const _hoisted_126 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols:2 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Change it to <code>:md=&quot;{ cols: 3}&quot;</code> and you&#39;ll see the fourth card wrap.</p>', 2);
 const _hoisted_128 = { class: "docs-example rounded-top p-4" };
 const _hoisted_129 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_130 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_131 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_132 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
-const _hoisted_133 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When you need equal height, add <code>.h-100</code> to the cards. If you want equal heights by default, you can set <code>$card-height: 100%</code> in Sass.</p>', 2);
+const _hoisted_133 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When you need equal height, add <code>.h-100</code> to the cards. If you want equal heights by default, you can set <code>$card-height: 100%</code> in Sass.</p>', 2);
 const _hoisted_135 = { class: "docs-example rounded-top p-4" };
-const _hoisted_136 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Just like with card groups, card footers will automatically line up.</p>', 2);
+const _hoisted_136 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Just like with card groups, card footers will automatically line up.</p>', 2);
 const _hoisted_138 = { class: "docs-example rounded-top p-4" };
 const _hoisted_139 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_140 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
 const _hoisted_141 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Last updated 3 mins ago", -1);
-const _hoisted_142 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue cards use local CSS variables on <code>.card</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_146 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CCard <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CCard<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_149 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCard <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCard <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCard&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table><h3 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table><h3 id="ccardimage" tabindex="-1">CCardImage <a class="anchor-link" href="#ccardimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;img&#39;</td></tr><tr><td><strong>orientation</strong></td><td>Optionally orientate the image to the top, bottom.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr></tbody></table><h3 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardSubtitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardSubtitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardSubtitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table><h3 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;p&#39;</td></tr></tbody></table><h3 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-5" tabindex="-1">Props <a class="anchor-link" href="#props-5" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 25);
+const _hoisted_142 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1, gutter: 4 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This card has supporting text below as a natural lead-in to additional content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardFooter</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Last updated 3 mins ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue cards use local CSS variables on <code>.card</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_146 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CCard <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CCard<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_149 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCard <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCard <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCard&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-bg-color</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Sets the component&#39;s color scheme to one of CoreUI&#39;s themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>text-color</strong></td><td>Sets the text color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>&#39;primary-emphasis&#39;</code>, <code>&#39;secondary-emphasis&#39;</code>, <code>&#39;success-emphasis&#39;</code>, <code>&#39;danger-emphasis&#39;</code>, <code>&#39;warning-emphasis&#39;</code>, <code>&#39;info-emphasis&#39;</code>, <code>&#39;light-emphasis&#39;</code>, <code>&#39;body&#39;</code>, <code>&#39;body-emphasis&#39;</code>, <code>&#39;body-secondary&#39;</code>, <code>&#39;body-tertiary&#39;</code>, <code>&#39;black&#39;</code>, <code>&#39;black-50&#39;</code>, <code>&#39;white&#39;</code>, <code>&#39;white-50&#39;</code></td><td>-</td></tr></tbody></table><h3 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table><h3 id="ccardimage" tabindex="-1">CCardImage <a class="anchor-link" href="#ccardimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;img&#39;</td></tr><tr><td><strong>orientation</strong></td><td>Optionally orientate the image to the top, bottom.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr></tbody></table><h3 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardSubtitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardSubtitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardSubtitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table><h3 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;p&#39;</td></tr></tbody></table><h3 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCardTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCardTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/card/CCardTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-5" tabindex="-1">Props <a class="anchor-link" href="#props-5" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 25);
 function _sfc_render(_ctx, _cache) {
   const _component_CCardImage = resolveComponent("CCardImage");
   const _component_CCardTitle = resolveComponent("CCardTitle");
diff --git a/vue/docs/assets/carousel.html-61D6vnww.js b/vue/docs/assets/carousel.html-61D6vnww.js
deleted file mode 100644
index 4aaeb8d69f8..00000000000
--- a/vue/docs/assets/carousel.html-61D6vnww.js
+++ /dev/null
@@ -1,323 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>The Vue carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.</p><p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/" target="_blank" rel="noopener noreferrer">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p><h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Carousels don&#39;t automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they&#39;re not explicitly expected. Add and customize as you see fit.</p><h3 id="slides-only" tabindex="-1">Slides only <a class="anchor-link" href="#slides-only" aria-hidden="true">#</a></h3>', 6);
-const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = ["src"];
-const _hoisted_9 = ["src"];
-const _hoisted_10 = ["src"];
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="with-controls" tabindex="-1">With controls <a class="anchor-link" href="#with-controls" aria-hidden="true">#</a></h3><p>Adding in the previous and next controls by <code>controls</code> property.</p>', 3);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = ["src"];
-const _hoisted_16 = ["src"];
-const _hoisted_17 = ["src"];
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="with-indicators" tabindex="-1">With indicators <a class="anchor-link" href="#with-indicators" aria-hidden="true">#</a></h3><p>You can attach the indicators to the carousel, lengthwise the controls, too.</p>', 3);
-const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = ["src"];
-const _hoisted_23 = ["src"];
-const _hoisted_24 = ["src"];
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="with-captions" tabindex="-1">With captions <a class="anchor-link" href="#with-captions" aria-hidden="true">#</a></h3><p>You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on smaller viewports, as shown below, with optional <a href="https://coreui.io/4.0/utilities/display" target="_blank" rel="noopener noreferrer">display utilities</a>. We hide them with <code>.d-none</code> and draw them back on medium-sized devices with <code>.d-md-block</code>.</p>', 3);
-const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = ["src"];
-const _hoisted_30 = /* @__PURE__ */ createBaseVNode("h5", null, "First slide label", -1);
-const _hoisted_31 = /* @__PURE__ */ createBaseVNode("p", null, "Some representative placeholder content for the first slide.", -1);
-const _hoisted_32 = ["src"];
-const _hoisted_33 = /* @__PURE__ */ createBaseVNode("h5", null, "First slide label", -1);
-const _hoisted_34 = /* @__PURE__ */ createBaseVNode("p", null, "Some representative placeholder content for the first slide.", -1);
-const _hoisted_35 = ["src"];
-const _hoisted_36 = /* @__PURE__ */ createBaseVNode("h5", null, "First slide label", -1);
-const _hoisted_37 = /* @__PURE__ */ createBaseVNode("p", null, "Some representative placeholder content for the first slide.", -1);
-const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span> <span class="token attr-name">indicators</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselCaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>First slide label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some representative placeholder content for the first slide.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselCaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>First slide label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some representative placeholder content for the first slide.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselCaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>First slide label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some representative placeholder content for the first slide.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="crossfade" tabindex="-1">Crossfade <a class="anchor-link" href="#crossfade" aria-hidden="true">#</a></h3><p>Add <code>transition=&quot;crossfade&quot;</code> to your carousel to animate slides with a fade transition instead of a slide.</p>', 3);
-const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = ["src"];
-const _hoisted_43 = ["src"];
-const _hoisted_44 = ["src"];
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span> <span class="token attr-name">indicators</span> <span class="token attr-name">transition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>crossfade<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-variant" tabindex="-1">Dark variant <a class="anchor-link" href="#dark-variant" aria-hidden="true">#</a></h2><p>Add <code>dark</code> property to the <code>CCarousel</code> for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the <code>filter</code> CSS property. Captions and controls have additional Sass variables that customize the <code>color</code> and <code>background-color</code>.</p>', 3);
-const _hoisted_48 = { class: "docs-example rounded-top p-4" };
-const _hoisted_49 = ["src"];
-const _hoisted_50 = ["src"];
-const _hoisted_51 = ["src"];
-const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span> <span class="token attr-name">indicators</span> <span class="token attr-name">transition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>crossfade<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccarousel" tabindex="-1">CCarousel <a class="anchor-link" href="#ccarousel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarousel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarousel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarousel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>controls</strong></td><td>Adding in the previous and next controls.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>dark</strong></td><td>Add darker controls, indicators, and captions.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>index</strong></td><td>index of the active item.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>indicators</strong></td><td>Adding indicators at the bottom of the carousel for each item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td><td>boolean|number</td><td>-</td><td>5000</td></tr><tr><td><strong>pause</strong></td><td>If set to &#39;hover&#39;, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won&#39;t pause it.</td><td>boolean|string</td><td>-</td><td>&#39;hover&#39;</td></tr><tr><td><strong>transition</strong></td><td>Set type of the transition.</td><td>string</td><td><code>&#39;crossfade&#39;</code>, <code>&#39;slide&#39;</code></td><td>&#39;slide&#39;</td></tr><tr><td><strong>wrap</strong></td><td>Set whether the carousel should cycle continuously or have hard stops.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h3 id="ccarouselitem" tabindex="-1">CCarouselItem <a class="anchor-link" href="#ccarouselitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarouselItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarouselItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarouselItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item.</td><td>boolean|number</td><td>-</td><td>false</td></tr></tbody></table>', 9);
-function _sfc_render(_ctx, _cache) {
-  const _component_CCarouselItem = resolveComponent("CCarouselItem");
-  const _component_CCarousel = resolveComponent("CCarousel");
-  const _component_CCarouselCaption = resolveComponent("CCarouselCaption");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_7, [
-      createVNode(_component_CCarousel, null, {
-        default: withCtx(() => [
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/vue.jpg"),
-                alt: "slide 1"
-              }, null, 8, _hoisted_8)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/react.jpg"),
-                alt: "slide 2"
-              }, null, 8, _hoisted_9)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/angular.jpg"),
-                alt: "slide 3"
-              }, null, 8, _hoisted_10)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_11,
-    createBaseVNode("div", _hoisted_14, [
-      createVNode(_component_CCarousel, { controls: "" }, {
-        default: withCtx(() => [
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/vue.jpg"),
-                alt: "slide 1"
-              }, null, 8, _hoisted_15)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/react.jpg"),
-                alt: "slide 2"
-              }, null, 8, _hoisted_16)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/angular.jpg"),
-                alt: "slide 3"
-              }, null, 8, _hoisted_17)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_18,
-    createBaseVNode("div", _hoisted_21, [
-      createVNode(_component_CCarousel, {
-        controls: "",
-        indicators: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/vue.jpg"),
-                alt: "slide 1"
-              }, null, 8, _hoisted_22)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/react.jpg"),
-                alt: "slide 2"
-              }, null, 8, _hoisted_23)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/angular.jpg"),
-                alt: "slide 3"
-              }, null, 8, _hoisted_24)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_25,
-    createBaseVNode("div", _hoisted_28, [
-      createVNode(_component_CCarousel, {
-        controls: "",
-        indicators: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/vue.jpg"),
-                alt: "slide 1"
-              }, null, 8, _hoisted_29),
-              createVNode(_component_CCarouselCaption, { class: "d-none d-md-block" }, {
-                default: withCtx(() => [
-                  _hoisted_30,
-                  _hoisted_31
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/react.jpg"),
-                alt: "slide 2"
-              }, null, 8, _hoisted_32),
-              createVNode(_component_CCarouselCaption, { class: "d-none d-md-block" }, {
-                default: withCtx(() => [
-                  _hoisted_33,
-                  _hoisted_34
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/angular.jpg"),
-                alt: "slide 3"
-              }, null, 8, _hoisted_35),
-              createVNode(_component_CCarouselCaption, { class: "d-none d-md-block" }, {
-                default: withCtx(() => [
-                  _hoisted_36,
-                  _hoisted_37
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_38,
-    createBaseVNode("div", _hoisted_41, [
-      createVNode(_component_CCarousel, {
-        controls: "",
-        indicators: "",
-        transition: "crossfade"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/vue.jpg"),
-                alt: "slide 1"
-              }, null, 8, _hoisted_42)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/react.jpg"),
-                alt: "slide 2"
-              }, null, 8, _hoisted_43)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/angular.jpg"),
-                alt: "slide 3"
-              }, null, 8, _hoisted_44)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_45,
-    createBaseVNode("div", _hoisted_48, [
-      createVNode(_component_CCarousel, {
-        controls: "",
-        indicators: "",
-        dark: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/vue.jpg"),
-                alt: "slide 1"
-              }, null, 8, _hoisted_49)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/react.jpg"),
-                alt: "slide 2"
-              }, null, 8, _hoisted_50)
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCarouselItem, null, {
-            default: withCtx(() => [
-              createBaseVNode("img", {
-                class: "d-block w-100",
-                src: _ctx.$withBase("/images/angular.jpg"),
-                alt: "slide 3"
-              }, null, 8, _hoisted_51)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_52,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "carousel-variables"
-    }),
-    _hoisted_55
-  ]);
-}
-const carousel_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "carousel.html.vue"]]);
-const data = JSON.parse('{"path":"/components/carousel.html","title":"Vue Carousel Component","lang":"en-US","frontmatter":{"title":"Vue Carousel Component","name":"Carousel","description":"Vue carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.","other_frameworks":"carousel","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/carousel.html"}]]},"headers":[{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Slides only","slug":"slides-only","link":"#slides-only","children":[]},{"level":3,"title":"With controls","slug":"with-controls","link":"#with-controls","children":[]},{"level":3,"title":"With indicators","slug":"with-indicators","link":"#with-indicators","children":[]},{"level":3,"title":"With captions","slug":"with-captions","link":"#with-captions","children":[]},{"level":3,"title":"Crossfade","slug":"crossfade","link":"#crossfade","children":[]}]},{"level":2,"title":"Dark variant","slug":"dark-variant","link":"#dark-variant","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CCarousel","slug":"ccarousel","link":"#ccarousel","children":[]},{"level":3,"title":"CCarouselItem","slug":"ccarouselitem","link":"#ccarouselitem","children":[]}]}],"filePathRelative":"components/carousel.md"}');
-export {
-  carousel_html as comp,
-  data
-};
diff --git a/vue/docs/assets/carousel.html-DN2cjEdX.js b/vue/docs/assets/carousel.html-DN2cjEdX.js
new file mode 100644
index 00000000000..5cac9f0b54c
--- /dev/null
+++ b/vue/docs/assets/carousel.html-DN2cjEdX.js
@@ -0,0 +1,323 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>The Vue carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.</p><p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/" target="_blank" rel="noopener noreferrer">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p><h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Carousels don&#39;t automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they&#39;re not explicitly expected. Add and customize as you see fit.</p><h3 id="slides-only" tabindex="-1">Slides only <a class="anchor-link" href="#slides-only" aria-hidden="true">#</a></h3>', 6);
+const _hoisted_7 = { class: "docs-example rounded-top p-4" };
+const _hoisted_8 = ["src"];
+const _hoisted_9 = ["src"];
+const _hoisted_10 = ["src"];
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="with-controls" tabindex="-1">With controls <a class="anchor-link" href="#with-controls" aria-hidden="true">#</a></h3><p>Adding in the previous and next controls by <code>controls</code> property.</p>', 3);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = ["src"];
+const _hoisted_16 = ["src"];
+const _hoisted_17 = ["src"];
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="with-indicators" tabindex="-1">With indicators <a class="anchor-link" href="#with-indicators" aria-hidden="true">#</a></h3><p>You can attach the indicators to the carousel, lengthwise the controls, too.</p>', 3);
+const _hoisted_21 = { class: "docs-example rounded-top p-4" };
+const _hoisted_22 = ["src"];
+const _hoisted_23 = ["src"];
+const _hoisted_24 = ["src"];
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="with-captions" tabindex="-1">With captions <a class="anchor-link" href="#with-captions" aria-hidden="true">#</a></h3><p>You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on smaller viewports, as shown below, with optional <a href="https://coreui.io/4.0/utilities/display" target="_blank" rel="noopener noreferrer">display utilities</a>. We hide them with <code>.d-none</code> and draw them back on medium-sized devices with <code>.d-md-block</code>.</p>', 3);
+const _hoisted_28 = { class: "docs-example rounded-top p-4" };
+const _hoisted_29 = ["src"];
+const _hoisted_30 = /* @__PURE__ */ createBaseVNode("h5", null, "First slide label", -1);
+const _hoisted_31 = /* @__PURE__ */ createBaseVNode("p", null, "Some representative placeholder content for the first slide.", -1);
+const _hoisted_32 = ["src"];
+const _hoisted_33 = /* @__PURE__ */ createBaseVNode("h5", null, "First slide label", -1);
+const _hoisted_34 = /* @__PURE__ */ createBaseVNode("p", null, "Some representative placeholder content for the first slide.", -1);
+const _hoisted_35 = ["src"];
+const _hoisted_36 = /* @__PURE__ */ createBaseVNode("h5", null, "First slide label", -1);
+const _hoisted_37 = /* @__PURE__ */ createBaseVNode("p", null, "Some representative placeholder content for the first slide.", -1);
+const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span> <span class="token attr-name">indicators</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselCaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>First slide label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some representative placeholder content for the first slide.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselCaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>First slide label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some representative placeholder content for the first slide.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselCaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>First slide label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some representative placeholder content for the first slide.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="crossfade" tabindex="-1">Crossfade <a class="anchor-link" href="#crossfade" aria-hidden="true">#</a></h3><p>Add <code>transition=&quot;crossfade&quot;</code> to your carousel to animate slides with a fade transition instead of a slide.</p>', 3);
+const _hoisted_41 = { class: "docs-example rounded-top p-4" };
+const _hoisted_42 = ["src"];
+const _hoisted_43 = ["src"];
+const _hoisted_44 = ["src"];
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span> <span class="token attr-name">indicators</span> <span class="token attr-name">transition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>crossfade<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-variant" tabindex="-1">Dark variant <a class="anchor-link" href="#dark-variant" aria-hidden="true">#</a></h2><p>Add <code>dark</code> property to the <code>CCarousel</code> for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the <code>filter</code> CSS property. Captions and controls have additional Sass variables that customize the <code>color</code> and <code>background-color</code>.</p>', 3);
+const _hoisted_48 = { class: "docs-example rounded-top p-4" };
+const _hoisted_49 = ["src"];
+const _hoisted_50 = ["src"];
+const _hoisted_51 = ["src"];
+const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarousel</span> <span class="token attr-name">controls</span> <span class="token attr-name">indicators</span> <span class="token attr-name">transition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>crossfade<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/react.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-block w-100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/angular.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarouselItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCarousel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccarousel" tabindex="-1">CCarousel <a class="anchor-link" href="#ccarousel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarousel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarousel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarousel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>controls</strong></td><td>Adding in the previous and next controls.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>dark</strong></td><td>Add darker controls, indicators, and captions.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>index</strong></td><td>index of the active item.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>indicators</strong></td><td>Adding indicators at the bottom of the carousel for each item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td><td>boolean|number</td><td>-</td><td>5000</td></tr><tr><td><strong>pause</strong></td><td>If set to &#39;hover&#39;, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won&#39;t pause it.</td><td>boolean|string</td><td>-</td><td>&#39;hover&#39;</td></tr><tr><td><strong>transition</strong></td><td>Set type of the transition.</td><td>string</td><td><code>&#39;crossfade&#39;</code>, <code>&#39;slide&#39;</code></td><td>&#39;slide&#39;</td></tr><tr><td><strong>wrap</strong></td><td>Set whether the carousel should cycle continuously or have hard stops.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h3 id="ccarouselitem" tabindex="-1">CCarouselItem <a class="anchor-link" href="#ccarouselitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCarouselItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCarouselItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/carousel/CCarouselItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>interval</strong></td><td>The amount of time to delay between automatically cycling an item.</td><td>boolean|number</td><td>-</td><td>false</td></tr></tbody></table>', 9);
+function _sfc_render(_ctx, _cache) {
+  const _component_CCarouselItem = resolveComponent("CCarouselItem");
+  const _component_CCarousel = resolveComponent("CCarousel");
+  const _component_CCarouselCaption = resolveComponent("CCarouselCaption");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_7, [
+      createVNode(_component_CCarousel, null, {
+        default: withCtx(() => [
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/vue.jpg"),
+                alt: "slide 1"
+              }, null, 8, _hoisted_8)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/react.jpg"),
+                alt: "slide 2"
+              }, null, 8, _hoisted_9)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/angular.jpg"),
+                alt: "slide 3"
+              }, null, 8, _hoisted_10)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_11,
+    createBaseVNode("div", _hoisted_14, [
+      createVNode(_component_CCarousel, { controls: "" }, {
+        default: withCtx(() => [
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/vue.jpg"),
+                alt: "slide 1"
+              }, null, 8, _hoisted_15)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/react.jpg"),
+                alt: "slide 2"
+              }, null, 8, _hoisted_16)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/angular.jpg"),
+                alt: "slide 3"
+              }, null, 8, _hoisted_17)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_18,
+    createBaseVNode("div", _hoisted_21, [
+      createVNode(_component_CCarousel, {
+        controls: "",
+        indicators: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/vue.jpg"),
+                alt: "slide 1"
+              }, null, 8, _hoisted_22)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/react.jpg"),
+                alt: "slide 2"
+              }, null, 8, _hoisted_23)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/angular.jpg"),
+                alt: "slide 3"
+              }, null, 8, _hoisted_24)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_25,
+    createBaseVNode("div", _hoisted_28, [
+      createVNode(_component_CCarousel, {
+        controls: "",
+        indicators: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/vue.jpg"),
+                alt: "slide 1"
+              }, null, 8, _hoisted_29),
+              createVNode(_component_CCarouselCaption, { class: "d-none d-md-block" }, {
+                default: withCtx(() => [
+                  _hoisted_30,
+                  _hoisted_31
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/react.jpg"),
+                alt: "slide 2"
+              }, null, 8, _hoisted_32),
+              createVNode(_component_CCarouselCaption, { class: "d-none d-md-block" }, {
+                default: withCtx(() => [
+                  _hoisted_33,
+                  _hoisted_34
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/angular.jpg"),
+                alt: "slide 3"
+              }, null, 8, _hoisted_35),
+              createVNode(_component_CCarouselCaption, { class: "d-none d-md-block" }, {
+                default: withCtx(() => [
+                  _hoisted_36,
+                  _hoisted_37
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_38,
+    createBaseVNode("div", _hoisted_41, [
+      createVNode(_component_CCarousel, {
+        controls: "",
+        indicators: "",
+        transition: "crossfade"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/vue.jpg"),
+                alt: "slide 1"
+              }, null, 8, _hoisted_42)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/react.jpg"),
+                alt: "slide 2"
+              }, null, 8, _hoisted_43)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/angular.jpg"),
+                alt: "slide 3"
+              }, null, 8, _hoisted_44)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_45,
+    createBaseVNode("div", _hoisted_48, [
+      createVNode(_component_CCarousel, {
+        controls: "",
+        indicators: "",
+        dark: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/vue.jpg"),
+                alt: "slide 1"
+              }, null, 8, _hoisted_49)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/react.jpg"),
+                alt: "slide 2"
+              }, null, 8, _hoisted_50)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCarouselItem, null, {
+            default: withCtx(() => [
+              createBaseVNode("img", {
+                class: "d-block w-100",
+                src: _ctx.$withBase("/images/angular.jpg"),
+                alt: "slide 3"
+              }, null, 8, _hoisted_51)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_52,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "carousel-variables"
+    }),
+    _hoisted_55
+  ]);
+}
+const carousel_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "carousel.html.vue"]]);
+const data = JSON.parse('{"path":"/components/carousel.html","title":"Vue Carousel Component","lang":"en-US","frontmatter":{"title":"Vue Carousel Component","name":"Carousel","description":"Vue carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.","other_frameworks":"carousel","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/carousel.html"}]]},"headers":[{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Slides only","slug":"slides-only","link":"#slides-only","children":[]},{"level":3,"title":"With controls","slug":"with-controls","link":"#with-controls","children":[]},{"level":3,"title":"With indicators","slug":"with-indicators","link":"#with-indicators","children":[]},{"level":3,"title":"With captions","slug":"with-captions","link":"#with-captions","children":[]},{"level":3,"title":"Crossfade","slug":"crossfade","link":"#crossfade","children":[]}]},{"level":2,"title":"Dark variant","slug":"dark-variant","link":"#dark-variant","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CCarousel","slug":"ccarousel","link":"#ccarousel","children":[]},{"level":3,"title":"CCarouselItem","slug":"ccarouselitem","link":"#ccarouselitem","children":[]}]}],"filePathRelative":"components/carousel.md"}');
+export {
+  carousel_html as comp,
+  data
+};
diff --git a/vue/docs/assets/chart.html-DCdC0-KY.js b/vue/docs/assets/chart.html-DCdC0-KY.js
deleted file mode 100644
index 686c8565c80..00000000000
--- a/vue/docs/assets/chart.html-DCdC0-KY.js
+++ /dev/null
@@ -1,446 +0,0 @@
-import { _ as _export_sfc, g as ref, k as onMounted, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, u as unref, f as createStaticVNode } from "./app-Dv803XR0.js";
-var getStyle = function(property, element) {
-  if (typeof window === "undefined") {
-    return;
-  }
-  if (typeof document === "undefined") {
-    return;
-  }
-  var _element = element !== null && element !== void 0 ? element : document.body;
-  return window.getComputedStyle(_element, null).getPropertyValue(property).replace(/^\s/, "");
-};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="installation" tabindex="-1">Installation <a class="anchor-link" href="#installation" aria-hidden="true">#</a></h2><p>If you want to use our Chart.js Vue wrapper you have to install an additional package.</p><h3 id="npm" tabindex="-1">Npm <a class="anchor-link" href="#npm" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> @coreui/vue-chartjs</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="yarn" tabindex="-1">Yarn <a class="anchor-link" href="#yarn" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">yarn</span> <span class="token function">add</span> @coreui/vue-chartjs</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="chart-types" tabindex="-1">Chart Types <a class="anchor-link" href="#chart-types" aria-hidden="true">#</a></h2><h3 id="line-chart" tabindex="-1">Line Chart <a class="anchor-link" href="#line-chart" aria-hidden="true">#</a></h3><p>A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. <a href="https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties" target="_blank" rel="noopener noreferrer">Line Chart properties</a></p>', 9);
-const _hoisted_10 = { class: "docs-example rounded-top p-4" };
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:wrapper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My First dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(220, 220, 220, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        data: [40, 20, 12, 39, 10, 40, 39]</span>\n<span class="line">      },</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My Second dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(151, 187, 205, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        data: [50, 12, 28, 29, 7, 25, 12]</span>\n<span class="line">      }</span>\n<span class="line">    ]</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="bar-chart" tabindex="-1">Bar Chart <a class="anchor-link" href="#bar-chart" aria-hidden="true">#</a></h3><p>A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. <a href="https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties" target="_blank" rel="noopener noreferrer">Bar Chart properties</a></p>', 3);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;GitHub Commits&#39;,</span>\n<span class="line">        backgroundColor: &#39;#f87979&#39;,</span>\n<span class="line">        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">labels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>months<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="radar-chart" tabindex="-1">Radar Chart <a class="anchor-link" href="#radar-chart" aria-hidden="true">#</a></h3><p>A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. <a href="https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties" target="_blank" rel="noopener noreferrer">Radar Chart properties</a></p>', 3);
-const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [</span>\n<span class="line">      &#39;Eating&#39;,</span>\n<span class="line">      &#39;Drinking&#39;,</span>\n<span class="line">      &#39;Sleeping&#39;,</span>\n<span class="line">      &#39;Designing&#39;,</span>\n<span class="line">      &#39;Coding&#39;,</span>\n<span class="line">      &#39;Cycling&#39;,</span>\n<span class="line">      &#39;Running&#39;,</span>\n<span class="line">    ],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My First dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(220, 220, 220, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightFill: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightStroke: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        data: [65, 59, 90, 81, 56, 55, 40],</span>\n<span class="line">      },</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My Second dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(151, 187, 205, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightFill: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightStroke: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        data: [28, 48, 40, 19, 96, 27, 100],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="doughnut-and-pie-charts" tabindex="-1">Doughnut and Pie Charts <a class="anchor-link" href="#doughnut-and-pie-charts" aria-hidden="true">#</a></h3><p>Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. <a href="https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties" target="_blank" rel="noopener noreferrer">Doughnut and Pie Charts properties</a></p>', 3);
-const _hoisted_22 = { class: "docs-example rounded-top p-4" };
-const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>doughnut<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;VueJs&#39;, &#39;EmberJs&#39;, &#39;ReactJs&#39;, &#39;AngularJs&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        backgroundColor: [&#39;#41B883&#39;, &#39;#E46651&#39;, &#39;#00D8FF&#39;, &#39;#DD1B16&#39;],</span>\n<span class="line">        data: [40, 20, 80, 10],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pie<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;VueJs&#39;, &#39;EmberJs&#39;, &#39;ReactJs&#39;, &#39;AngularJs&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        backgroundColor: [&#39;#41B883&#39;, &#39;#E46651&#39;, &#39;#00D8FF&#39;, &#39;#DD1B16&#39;],</span>\n<span class="line">        data: [40, 20, 80, 10],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="polar-area-chart" tabindex="-1">Polar Area Chart <a class="anchor-link" href="#polar-area-chart" aria-hidden="true">#</a></h3><p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. <a href="https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties" target="_blank" rel="noopener noreferrer">Polar Area Chart properties</a></p>', 3);
-const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>polarArea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;Red&#39;, &#39;Green&#39;, &#39;Yellow&#39;, &#39;Grey&#39;, &#39;Blue&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        data: [11, 16, 7, 3, 14],</span>\n<span class="line">        backgroundColor: [&#39;#FF6384&#39;, &#39;#4BC0C0&#39;, &#39;#FFCE56&#39;, &#39;#E7E9ED&#39;, &#39;#36A2EB&#39;],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="bubble-chart" tabindex="-1">Bubble Chart <a class="anchor-link" href="#bubble-chart" aria-hidden="true">#</a></h3><p>A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. <a href="https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties" target="_blank" rel="noopener noreferrer">Bubble Chart properties</a></p>', 3);
-const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bubble<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    datasets: [{</span>\n<span class="line">      label: &#39;First Dataset&#39;,</span>\n<span class="line">      data: [{</span>\n<span class="line">        x: 20,</span>\n<span class="line">        y: 30,</span>\n<span class="line">        r: 15</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 40,</span>\n<span class="line">        y: 10,</span>\n<span class="line">        r: 10</span>\n<span class="line">      }],</span>\n<span class="line">      backgroundColor: &#39;rgb(255, 99, 132)&#39;</span>\n<span class="line">    }]</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="scatter-chart" tabindex="-1">Scatter Chart <a class="anchor-link" href="#scatter-chart" aria-hidden="true">#</a></h3><p>A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. <a href="https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties" target="_blank" rel="noopener noreferrer">Scatter Chart properties</a></p>', 3);
-const _hoisted_36 = { class: "docs-example rounded-top p-4" };
-const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token comment">&lt;!-- use &lt;CChart type=&quot;scatter&quot;&gt; or &lt;CChartScatter&gt; component --&gt;</span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scatter<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    datasets: [{</span>\n<span class="line">      label: &#39;Scatter Dataset&#39;,</span>\n<span class="line">      data: [{</span>\n<span class="line">        x: -10,</span>\n<span class="line">        y: 0</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 0,</span>\n<span class="line">        y: 10</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 10,</span>\n<span class="line">        y: 5</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 0.5,</span>\n<span class="line">        y: 5.5</span>\n<span class="line">      }],</span>\n<span class="line">      backgroundColor: &#39;rgb(255, 99, 132)&#39;</span>\n<span class="line">    }],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    plugins: {</span>\n<span class="line">      legend: {</span>\n<span class="line">        labels: {</span>\n<span class="line">          color: getStyle(&#39;--cui-body-color&#39;),</span>\n<span class="line">        }</span>\n<span class="line">      }</span>\n<span class="line">    },</span>\n<span class="line">    scales: {</span>\n<span class="line">      x: {</span>\n<span class="line">        grid: {</span>\n<span class="line">          color: getStyle(&#39;--cui-border-color-translucent&#39;),</span>\n<span class="line">        },</span>\n<span class="line">        position: &#39;bottom&#39;,</span>\n<span class="line">        ticks: {</span>\n<span class="line">          color: getStyle(&#39;--cui-body-color&#39;),</span>\n<span class="line">        },</span>\n<span class="line">        type: &#39;linear&#39;,</span>\n<span class="line">      },</span>\n<span class="line">      y: {</span>\n<span class="line">        grid: {</span>\n<span class="line">          color: getStyle(&#39;--cui-border-color-translucent&#39;),</span>\n<span class="line">        },</span>\n<span class="line">        ticks: {</span>\n<span class="line">          color: getStyle(&#39;--cui-body-color&#39;),</span>\n<span class="line">        },</span>\n<span class="line">      },</span>\n<span class="line">    },</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cchart" tabindex="-1">CChart <a class="anchor-link" href="#cchart" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CChart <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs/src/CChart&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-tooltips</strong></td><td>Enables custom html based tooltips instead of standard tooltips.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>data</strong></td><td>The data object that is passed into the Chart.js chart (more info).</td><td>ChartData | ((canvas: HTMLCanvasElement) =&gt; ChartData)</td><td>-</td><td>-</td></tr><tr><td><strong>height</strong></td><td>Height attribute applied to the rendered canvas.<br><code>@default</code> 150</td><td>number</td><td>-</td><td>150</td></tr><tr><td><strong>id</strong></td><td>ID attribute applied to the rendered canvas.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>The options object that is passed into the Chart.js chartRef.value.<br><br>{@link https://www.chartjs.org/docs/latest/general/options.html More Info}</td><td>ChartOptions</td><td>-</td><td>-</td></tr><tr><td><strong>plugins</strong></td><td>The plugins array that is passed into the Chart.js chart (more info)<br><br>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}</td><td>Plugin[]</td><td>-</td><td>-</td></tr><tr><td><strong>redraw</strong></td><td>If true, will tear down and redraw chart on all updates.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Chart.js chart type.<br><code>@type</code> &#39;line&#39; | &#39;bar&#39; | &#39;radar&#39; | &#39;doughnut&#39; | &#39;polarArea&#39; | &#39;bubble&#39; | &#39;pie&#39; | &#39;scatter&#39;</td><td>ChartType</td><td>-</td><td>&#39;bar&#39;</td></tr><tr><td><strong>width</strong></td><td>Width attribute applied to the rendered canvas.<br><code>@default</code> 300</td><td>number</td><td>-</td><td>300</td></tr><tr><td><strong>wrapper</strong></td><td>Put the chart into the wrapper div element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>get-dataset-at-event</strong></td><td>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td><td></td></tr><tr><td><strong>get-element-at-event</strong></td><td>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td><td></td></tr><tr><td><strong>get-elements-at-event</strong></td><td>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td><td></td></tr></tbody></table>', 8);
-const _sfc_main = {
-  __name: "chart.html",
-  setup(__props) {
-    const chartLineRef = ref();
-    const chartBarRef = ref();
-    const chartRadarRef = ref();
-    const chartDoughnutRef = ref();
-    const chartPieRef = ref();
-    const chartPolarAreaRef = ref();
-    const chartBubbleRef = ref();
-    const chartScatterRef = ref();
-    onMounted(() => {
-      document.documentElement.addEventListener("ColorSchemeChange", () => {
-        chartLineRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartLineRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
-        chartLineRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
-        chartLineRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
-        chartLineRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
-        chartLineRef.value.chart.update();
-        chartBarRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartBarRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
-        chartBarRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
-        chartBarRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
-        chartBarRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
-        chartBarRef.value.chart.update();
-        chartRadarRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartRadarRef.value.chart.options.scales.r.grid.color = getStyle("--cui-border-color-translucent");
-        chartRadarRef.value.chart.options.scales.r.ticks.color = getStyle("--cui-body-color");
-        chartRadarRef.value.chart.update();
-        chartDoughnutRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartDoughnutRef.value.chart.update();
-        chartPieRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartPieRef.value.chart.update();
-        chartPolarAreaRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartPolarAreaRef.value.chart.options.scales.r.grid.color = getStyle("--cui-border-color-translucent");
-        chartPolarAreaRef.value.chart.update();
-        chartBubbleRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartBubbleRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
-        chartBubbleRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
-        chartBubbleRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
-        chartBubbleRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
-        chartBubbleRef.value.chart.update();
-        chartScatterRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
-        chartScatterRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
-        chartScatterRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
-        chartScatterRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
-        chartScatterRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
-        chartScatterRef.value.chart.update();
-      });
-    });
-    return (_ctx, _cache) => {
-      const _component_CChart = resolveComponent("CChart");
-      return openBlock(), createElementBlock("div", null, [
-        _hoisted_1,
-        createBaseVNode("div", _hoisted_10, [
-          createVNode(_component_CChart, {
-            type: "line",
-            ref_key: "chartLineRef",
-            ref: chartLineRef,
-            wrapper: false,
-            data: {
-              labels: ["January", "February", "March", "April", "May", "June", "July"],
-              datasets: [
-                {
-                  label: "My First dataset",
-                  backgroundColor: "rgba(220, 220, 220, 0.2)",
-                  borderColor: "rgba(220, 220, 220, 1)",
-                  pointBackgroundColor: "rgba(220, 220, 220, 1)",
-                  pointBorderColor: "#fff",
-                  data: [40, 20, 12, 39, 10, 40, 39]
-                },
-                {
-                  label: "My Second dataset",
-                  backgroundColor: "rgba(151, 187, 205, 0.2)",
-                  borderColor: "rgba(151, 187, 205, 1)",
-                  pointBackgroundColor: "rgba(151, 187, 205, 1)",
-                  pointBorderColor: "#fff",
-                  data: [50, 12, 28, 29, 7, 25, 12]
-                }
-              ]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              },
-              scales: {
-                x: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                },
-                y: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              }
-            }
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_11,
-        createBaseVNode("div", _hoisted_14, [
-          createVNode(_component_CChart, {
-            type: "bar",
-            ref_key: "chartBarRef",
-            ref: chartBarRef,
-            data: {
-              labels: ["January", "February", "March", "April", "May", "June", "July"],
-              datasets: [
-                {
-                  label: "GitHub Commits",
-                  backgroundColor: "#f87979",
-                  data: [40, 20, 12, 39, 10, 40, 39, 80, 40]
-                }
-              ]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              },
-              scales: {
-                x: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                },
-                y: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              }
-            },
-            labels: "months"
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_15,
-        createBaseVNode("div", _hoisted_18, [
-          createVNode(_component_CChart, {
-            type: "radar",
-            ref_key: "chartRadarRef",
-            ref: chartRadarRef,
-            data: {
-              labels: [
-                "Eating",
-                "Drinking",
-                "Sleeping",
-                "Designing",
-                "Coding",
-                "Cycling",
-                "Running"
-              ],
-              datasets: [
-                {
-                  label: "My First dataset",
-                  backgroundColor: "rgba(220, 220, 220, 0.2)",
-                  borderColor: "rgba(220, 220, 220, 1)",
-                  pointBackgroundColor: "rgba(220, 220, 220, 1)",
-                  pointBorderColor: "#fff",
-                  pointHighlightFill: "#fff",
-                  pointHighlightStroke: "rgba(220, 220, 220, 1)",
-                  data: [65, 59, 90, 81, 56, 55, 40]
-                },
-                {
-                  label: "My Second dataset",
-                  backgroundColor: "rgba(151, 187, 205, 0.2)",
-                  borderColor: "rgba(151, 187, 205, 1)",
-                  pointBackgroundColor: "rgba(151, 187, 205, 1)",
-                  pointBorderColor: "#fff",
-                  pointHighlightFill: "#fff",
-                  pointHighlightStroke: "rgba(151, 187, 205, 1)",
-                  data: [28, 48, 40, 19, 96, 27, 100]
-                }
-              ]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              },
-              scales: {
-                r: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              }
-            }
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_19,
-        createBaseVNode("div", _hoisted_22, [
-          createVNode(_component_CChart, {
-            type: "doughnut",
-            ref_key: "chartDoughnutRef",
-            ref: chartDoughnutRef,
-            data: {
-              labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
-              datasets: [
-                {
-                  backgroundColor: ["#41B883", "#E46651", "#00D8FF", "#DD1B16"],
-                  data: [40, 20, 80, 10]
-                }
-              ]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              }
-            }
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_23,
-        createBaseVNode("div", _hoisted_24, [
-          createVNode(_component_CChart, {
-            type: "pie",
-            ref_key: "chartPieRef",
-            ref: chartPieRef,
-            data: {
-              labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
-              datasets: [
-                {
-                  backgroundColor: ["#41B883", "#E46651", "#00D8FF", "#DD1B16"],
-                  data: [40, 20, 80, 10]
-                }
-              ]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              }
-            }
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_25,
-        createBaseVNode("div", _hoisted_28, [
-          createVNode(_component_CChart, {
-            type: "polarArea",
-            ref_key: "chartPolarAreaRef",
-            ref: chartPolarAreaRef,
-            data: {
-              labels: ["Red", "Green", "Yellow", "Grey", "Blue"],
-              datasets: [
-                {
-                  data: [11, 16, 7, 3, 14],
-                  backgroundColor: ["#FF6384", "#4BC0C0", "#FFCE56", "#E7E9ED", "#36A2EB"]
-                }
-              ]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              },
-              scales: {
-                r: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color")
-                  }
-                }
-              }
-            }
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_29,
-        createBaseVNode("div", _hoisted_32, [
-          createVNode(_component_CChart, {
-            type: "bubble",
-            ref_key: "chartBubbleRef",
-            ref: chartBubbleRef,
-            data: {
-              datasets: [{
-                label: "First Dataset",
-                data: [{
-                  x: 20,
-                  y: 30,
-                  r: 15
-                }, {
-                  x: 40,
-                  y: 10,
-                  r: 10
-                }],
-                backgroundColor: "rgb(255, 99, 132)"
-              }]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              },
-              scales: {
-                x: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                },
-                y: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              }
-            }
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_33,
-        createBaseVNode("div", _hoisted_36, [
-          createVNode(_component_CChart, {
-            type: "scatter",
-            ref_key: "chartScatterRef",
-            ref: chartScatterRef,
-            data: {
-              datasets: [{
-                label: "Scatter Dataset",
-                data: [{
-                  x: -10,
-                  y: 0
-                }, {
-                  x: 0,
-                  y: 10
-                }, {
-                  x: 10,
-                  y: 5
-                }, {
-                  x: 0.5,
-                  y: 5.5
-                }],
-                backgroundColor: "rgb(255, 99, 132)"
-              }]
-            },
-            options: {
-              plugins: {
-                legend: {
-                  labels: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              },
-              scales: {
-                x: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  position: "bottom",
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  },
-                  type: "linear"
-                },
-                y: {
-                  grid: {
-                    color: unref(getStyle)("--cui-border-color-translucent")
-                  },
-                  ticks: {
-                    color: unref(getStyle)("--cui-body-color")
-                  }
-                }
-              }
-            }
-          }, null, 8, ["options"])
-        ]),
-        _hoisted_37
-      ]);
-    };
-  }
-};
-const chart_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "chart.html.vue"]]);
-const data = JSON.parse('{"path":"/components/chart.html","title":"Vue Chart.js Component","lang":"en-US","frontmatter":{"title":"Vue Chart.js Component","name":"Chart.js","description":"Vue wrapper for Chart.js 3.0, the most popular charting library.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/chart.html"}]]},"headers":[{"level":2,"title":"Installation","slug":"installation","link":"#installation","children":[{"level":3,"title":"Npm","slug":"npm","link":"#npm","children":[]},{"level":3,"title":"Yarn","slug":"yarn","link":"#yarn","children":[]}]},{"level":2,"title":"Chart Types","slug":"chart-types","link":"#chart-types","children":[{"level":3,"title":"Line Chart","slug":"line-chart","link":"#line-chart","children":[]},{"level":3,"title":"Bar Chart","slug":"bar-chart","link":"#bar-chart","children":[]},{"level":3,"title":"Radar Chart","slug":"radar-chart","link":"#radar-chart","children":[]},{"level":3,"title":"Doughnut and Pie Charts","slug":"doughnut-and-pie-charts","link":"#doughnut-and-pie-charts","children":[]},{"level":3,"title":"Polar Area Chart","slug":"polar-area-chart","link":"#polar-area-chart","children":[]},{"level":3,"title":"Bubble Chart","slug":"bubble-chart","link":"#bubble-chart","children":[]},{"level":3,"title":"Scatter Chart","slug":"scatter-chart","link":"#scatter-chart","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CChart","slug":"cchart","link":"#cchart","children":[]}]}],"filePathRelative":"components/chart.md"}');
-export {
-  chart_html as comp,
-  data
-};
diff --git a/vue/docs/assets/chart.html-DY5wyS1U.js b/vue/docs/assets/chart.html-DY5wyS1U.js
new file mode 100644
index 00000000000..dff90425287
--- /dev/null
+++ b/vue/docs/assets/chart.html-DY5wyS1U.js
@@ -0,0 +1,444 @@
+import { _ as _export_sfc, g as ref, k as onMounted, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, w as watch, a as createStaticVNode } from "./app-BoHWg5jI.js";
+var getStyle = function(property, element) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (typeof document === "undefined") {
+    return;
+  }
+  var _element = element !== null && element !== void 0 ? element : document.body;
+  return window.getComputedStyle(_element, null).getPropertyValue(property).replace(/^\s/, "");
+};
+const _sfc_main = {
+  __name: "chart.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const chartLineRef = ref();
+    const chartBarRef = ref();
+    const chartRadarRef = ref();
+    const chartDoughnutRef = ref();
+    const chartPieRef = ref();
+    const chartPolarAreaRef = ref();
+    const chartBubbleRef = ref();
+    const chartScatterRef = ref();
+    onMounted(() => {
+      document.documentElement.addEventListener("ColorSchemeChange", () => {
+        chartLineRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartLineRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
+        chartLineRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
+        chartLineRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
+        chartLineRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
+        chartLineRef.value.chart.update();
+        chartBarRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartBarRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
+        chartBarRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
+        chartBarRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
+        chartBarRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
+        chartBarRef.value.chart.update();
+        chartRadarRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartRadarRef.value.chart.options.scales.r.grid.color = getStyle("--cui-border-color-translucent");
+        chartRadarRef.value.chart.options.scales.r.ticks.color = getStyle("--cui-body-color");
+        chartRadarRef.value.chart.update();
+        chartDoughnutRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartDoughnutRef.value.chart.update();
+        chartPieRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartPieRef.value.chart.update();
+        chartPolarAreaRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartPolarAreaRef.value.chart.options.scales.r.grid.color = getStyle("--cui-border-color-translucent");
+        chartPolarAreaRef.value.chart.update();
+        chartBubbleRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartBubbleRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
+        chartBubbleRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
+        chartBubbleRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
+        chartBubbleRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
+        chartBubbleRef.value.chart.update();
+        chartScatterRef.value.chart.options.plugins.legend.labels.color = getStyle("--cui-body-color");
+        chartScatterRef.value.chart.options.scales.x.grid.color = getStyle("--cui-border-color-translucent");
+        chartScatterRef.value.chart.options.scales.x.ticks.color = getStyle("--cui-body-color");
+        chartScatterRef.value.chart.options.scales.y.grid.color = getStyle("--cui-border-color-translucent");
+        chartScatterRef.value.chart.options.scales.y.ticks.color = getStyle("--cui-body-color");
+        chartScatterRef.value.chart.update();
+      });
+    });
+    const __returned__ = { chartLineRef, chartBarRef, chartRadarRef, chartDoughnutRef, chartPieRef, chartPolarAreaRef, chartBubbleRef, chartScatterRef, onMounted, ref, watch, get getStyle() {
+      return getStyle;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="installation" tabindex="-1">Installation <a class="anchor-link" href="#installation" aria-hidden="true">#</a></h2><p>If you want to use our Chart.js Vue wrapper you have to install an additional package.</p><h3 id="npm" tabindex="-1">Npm <a class="anchor-link" href="#npm" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> @coreui/vue-chartjs</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="yarn" tabindex="-1">Yarn <a class="anchor-link" href="#yarn" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">yarn</span> <span class="token function">add</span> @coreui/vue-chartjs</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="chart-types" tabindex="-1">Chart Types <a class="anchor-link" href="#chart-types" aria-hidden="true">#</a></h2><h3 id="line-chart" tabindex="-1">Line Chart <a class="anchor-link" href="#line-chart" aria-hidden="true">#</a></h3><p>A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. <a href="https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties" target="_blank" rel="noopener noreferrer">Line Chart properties</a></p>', 9);
+const _hoisted_10 = { class: "docs-example rounded-top p-4" };
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:wrapper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My First dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(220, 220, 220, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        data: [40, 20, 12, 39, 10, 40, 39]</span>\n<span class="line">      },</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My Second dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(151, 187, 205, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        data: [50, 12, 28, 29, 7, 25, 12]</span>\n<span class="line">      }</span>\n<span class="line">    ]</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="bar-chart" tabindex="-1">Bar Chart <a class="anchor-link" href="#bar-chart" aria-hidden="true">#</a></h3><p>A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. <a href="https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties" target="_blank" rel="noopener noreferrer">Bar Chart properties</a></p>', 3);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;GitHub Commits&#39;,</span>\n<span class="line">        backgroundColor: &#39;#f87979&#39;,</span>\n<span class="line">        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">labels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>months<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="radar-chart" tabindex="-1">Radar Chart <a class="anchor-link" href="#radar-chart" aria-hidden="true">#</a></h3><p>A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. <a href="https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties" target="_blank" rel="noopener noreferrer">Radar Chart properties</a></p>', 3);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [</span>\n<span class="line">      &#39;Eating&#39;,</span>\n<span class="line">      &#39;Drinking&#39;,</span>\n<span class="line">      &#39;Sleeping&#39;,</span>\n<span class="line">      &#39;Designing&#39;,</span>\n<span class="line">      &#39;Coding&#39;,</span>\n<span class="line">      &#39;Cycling&#39;,</span>\n<span class="line">      &#39;Running&#39;,</span>\n<span class="line">    ],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My First dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(220, 220, 220, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightFill: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightStroke: &#39;rgba(220, 220, 220, 1)&#39;,</span>\n<span class="line">        data: [65, 59, 90, 81, 56, 55, 40],</span>\n<span class="line">      },</span>\n<span class="line">      {</span>\n<span class="line">        label: &#39;My Second dataset&#39;,</span>\n<span class="line">        backgroundColor: &#39;rgba(151, 187, 205, 0.2)&#39;,</span>\n<span class="line">        borderColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBackgroundColor: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        pointBorderColor: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightFill: &#39;#fff&#39;,</span>\n<span class="line">        pointHighlightStroke: &#39;rgba(151, 187, 205, 1)&#39;,</span>\n<span class="line">        data: [28, 48, 40, 19, 96, 27, 100],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="doughnut-and-pie-charts" tabindex="-1">Doughnut and Pie Charts <a class="anchor-link" href="#doughnut-and-pie-charts" aria-hidden="true">#</a></h3><p>Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. <a href="https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties" target="_blank" rel="noopener noreferrer">Doughnut and Pie Charts properties</a></p>', 3);
+const _hoisted_22 = { class: "docs-example rounded-top p-4" };
+const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>doughnut<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;VueJs&#39;, &#39;EmberJs&#39;, &#39;ReactJs&#39;, &#39;AngularJs&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        backgroundColor: [&#39;#41B883&#39;, &#39;#E46651&#39;, &#39;#00D8FF&#39;, &#39;#DD1B16&#39;],</span>\n<span class="line">        data: [40, 20, 80, 10],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_24 = { class: "docs-example rounded-top p-4" };
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pie<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;VueJs&#39;, &#39;EmberJs&#39;, &#39;ReactJs&#39;, &#39;AngularJs&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        backgroundColor: [&#39;#41B883&#39;, &#39;#E46651&#39;, &#39;#00D8FF&#39;, &#39;#DD1B16&#39;],</span>\n<span class="line">        data: [40, 20, 80, 10],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="polar-area-chart" tabindex="-1">Polar Area Chart <a class="anchor-link" href="#polar-area-chart" aria-hidden="true">#</a></h3><p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. <a href="https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties" target="_blank" rel="noopener noreferrer">Polar Area Chart properties</a></p>', 3);
+const _hoisted_28 = { class: "docs-example rounded-top p-4" };
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>polarArea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    labels: [&#39;Red&#39;, &#39;Green&#39;, &#39;Yellow&#39;, &#39;Grey&#39;, &#39;Blue&#39;],</span>\n<span class="line">    datasets: [</span>\n<span class="line">      {</span>\n<span class="line">        data: [11, 16, 7, 3, 14],</span>\n<span class="line">        backgroundColor: [&#39;#FF6384&#39;, &#39;#4BC0C0&#39;, &#39;#FFCE56&#39;, &#39;#E7E9ED&#39;, &#39;#36A2EB&#39;],</span>\n<span class="line">      },</span>\n<span class="line">    ],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="bubble-chart" tabindex="-1">Bubble Chart <a class="anchor-link" href="#bubble-chart" aria-hidden="true">#</a></h3><p>A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. <a href="https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties" target="_blank" rel="noopener noreferrer">Bubble Chart properties</a></p>', 3);
+const _hoisted_32 = { class: "docs-example rounded-top p-4" };
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bubble<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    datasets: [{</span>\n<span class="line">      label: &#39;First Dataset&#39;,</span>\n<span class="line">      data: [{</span>\n<span class="line">        x: 20,</span>\n<span class="line">        y: 30,</span>\n<span class="line">        r: 15</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 40,</span>\n<span class="line">        y: 10,</span>\n<span class="line">        r: 10</span>\n<span class="line">      }],</span>\n<span class="line">      backgroundColor: &#39;rgb(255, 99, 132)&#39;</span>\n<span class="line">    }]</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="scatter-chart" tabindex="-1">Scatter Chart <a class="anchor-link" href="#scatter-chart" aria-hidden="true">#</a></h3><p>A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. <a href="https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties" target="_blank" rel="noopener noreferrer">Scatter Chart properties</a></p>', 3);
+const _hoisted_36 = { class: "docs-example rounded-top p-4" };
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token comment">&lt;!-- use &lt;CChart type=&quot;scatter&quot;&gt; or &lt;CChartScatter&gt; component --&gt;</span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scatter<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    datasets: [{</span>\n<span class="line">      label: &#39;Scatter Dataset&#39;,</span>\n<span class="line">      data: [{</span>\n<span class="line">        x: -10,</span>\n<span class="line">        y: 0</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 0,</span>\n<span class="line">        y: 10</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 10,</span>\n<span class="line">        y: 5</span>\n<span class="line">      }, {</span>\n<span class="line">        x: 0.5,</span>\n<span class="line">        y: 5.5</span>\n<span class="line">      }],</span>\n<span class="line">      backgroundColor: &#39;rgb(255, 99, 132)&#39;</span>\n<span class="line">    }],</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">    plugins: {</span>\n<span class="line">      legend: {</span>\n<span class="line">        labels: {</span>\n<span class="line">          color: getStyle(&#39;--cui-body-color&#39;),</span>\n<span class="line">        }</span>\n<span class="line">      }</span>\n<span class="line">    },</span>\n<span class="line">    scales: {</span>\n<span class="line">      x: {</span>\n<span class="line">        grid: {</span>\n<span class="line">          color: getStyle(&#39;--cui-border-color-translucent&#39;),</span>\n<span class="line">        },</span>\n<span class="line">        position: &#39;bottom&#39;,</span>\n<span class="line">        ticks: {</span>\n<span class="line">          color: getStyle(&#39;--cui-body-color&#39;),</span>\n<span class="line">        },</span>\n<span class="line">        type: &#39;linear&#39;,</span>\n<span class="line">      },</span>\n<span class="line">      y: {</span>\n<span class="line">        grid: {</span>\n<span class="line">          color: getStyle(&#39;--cui-border-color-translucent&#39;),</span>\n<span class="line">        },</span>\n<span class="line">        ticks: {</span>\n<span class="line">          color: getStyle(&#39;--cui-body-color&#39;),</span>\n<span class="line">        },</span>\n<span class="line">      },</span>\n<span class="line">    },</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cchart" tabindex="-1">CChart <a class="anchor-link" href="#cchart" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CChart <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-chartjs/src/CChart&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-tooltips</strong></td><td>Enables custom html based tooltips instead of standard tooltips.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>data</strong></td><td>The data object that is passed into the Chart.js chart (more info).</td><td>ChartData | ((canvas: HTMLCanvasElement) =&gt; ChartData)</td><td>-</td><td>-</td></tr><tr><td><strong>height</strong></td><td>Height attribute applied to the rendered canvas.<br><code>@default</code> 150</td><td>number</td><td>-</td><td>150</td></tr><tr><td><strong>id</strong></td><td>ID attribute applied to the rendered canvas.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>The options object that is passed into the Chart.js chartRef.value.<br><br>{@link https://www.chartjs.org/docs/latest/general/options.html More Info}</td><td>ChartOptions</td><td>-</td><td>-</td></tr><tr><td><strong>plugins</strong></td><td>The plugins array that is passed into the Chart.js chart (more info)<br><br>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}</td><td>Plugin[]</td><td>-</td><td>-</td></tr><tr><td><strong>redraw</strong></td><td>If true, will tear down and redraw chart on all updates.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Chart.js chart type.<br><code>@type</code> &#39;line&#39; | &#39;bar&#39; | &#39;radar&#39; | &#39;doughnut&#39; | &#39;polarArea&#39; | &#39;bubble&#39; | &#39;pie&#39; | &#39;scatter&#39;</td><td>ChartType</td><td>-</td><td>&#39;bar&#39;</td></tr><tr><td><strong>width</strong></td><td>Width attribute applied to the rendered canvas.<br><code>@default</code> 300</td><td>number</td><td>-</td><td>300</td></tr><tr><td><strong>wrapper</strong></td><td>Put the chart into the wrapper div element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>get-dataset-at-event</strong></td><td>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td><td></td></tr><tr><td><strong>get-element-at-event</strong></td><td>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td><td></td></tr><tr><td><strong>get-elements-at-event</strong></td><td>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td><td></td></tr></tbody></table>', 8);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CChart = resolveComponent("CChart");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_10, [
+      createVNode(_component_CChart, {
+        type: "line",
+        ref: "chartLineRef",
+        wrapper: false,
+        data: {
+          labels: ["January", "February", "March", "April", "May", "June", "July"],
+          datasets: [
+            {
+              label: "My First dataset",
+              backgroundColor: "rgba(220, 220, 220, 0.2)",
+              borderColor: "rgba(220, 220, 220, 1)",
+              pointBackgroundColor: "rgba(220, 220, 220, 1)",
+              pointBorderColor: "#fff",
+              data: [40, 20, 12, 39, 10, 40, 39]
+            },
+            {
+              label: "My Second dataset",
+              backgroundColor: "rgba(151, 187, 205, 0.2)",
+              borderColor: "rgba(151, 187, 205, 1)",
+              pointBackgroundColor: "rgba(151, 187, 205, 1)",
+              pointBorderColor: "#fff",
+              data: [50, 12, 28, 29, 7, 25, 12]
+            }
+          ]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          },
+          scales: {
+            x: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            },
+            y: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          }
+        }
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_11,
+    createBaseVNode("div", _hoisted_14, [
+      createVNode(_component_CChart, {
+        type: "bar",
+        ref: "chartBarRef",
+        data: {
+          labels: ["January", "February", "March", "April", "May", "June", "July"],
+          datasets: [
+            {
+              label: "GitHub Commits",
+              backgroundColor: "#f87979",
+              data: [40, 20, 12, 39, 10, 40, 39, 80, 40]
+            }
+          ]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          },
+          scales: {
+            x: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            },
+            y: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          }
+        },
+        labels: "months"
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_15,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CChart, {
+        type: "radar",
+        ref: "chartRadarRef",
+        data: {
+          labels: [
+            "Eating",
+            "Drinking",
+            "Sleeping",
+            "Designing",
+            "Coding",
+            "Cycling",
+            "Running"
+          ],
+          datasets: [
+            {
+              label: "My First dataset",
+              backgroundColor: "rgba(220, 220, 220, 0.2)",
+              borderColor: "rgba(220, 220, 220, 1)",
+              pointBackgroundColor: "rgba(220, 220, 220, 1)",
+              pointBorderColor: "#fff",
+              pointHighlightFill: "#fff",
+              pointHighlightStroke: "rgba(220, 220, 220, 1)",
+              data: [65, 59, 90, 81, 56, 55, 40]
+            },
+            {
+              label: "My Second dataset",
+              backgroundColor: "rgba(151, 187, 205, 0.2)",
+              borderColor: "rgba(151, 187, 205, 1)",
+              pointBackgroundColor: "rgba(151, 187, 205, 1)",
+              pointBorderColor: "#fff",
+              pointHighlightFill: "#fff",
+              pointHighlightStroke: "rgba(151, 187, 205, 1)",
+              data: [28, 48, 40, 19, 96, 27, 100]
+            }
+          ]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          },
+          scales: {
+            r: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          }
+        }
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_22, [
+      createVNode(_component_CChart, {
+        type: "doughnut",
+        ref: "chartDoughnutRef",
+        data: {
+          labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
+          datasets: [
+            {
+              backgroundColor: ["#41B883", "#E46651", "#00D8FF", "#DD1B16"],
+              data: [40, 20, 80, 10]
+            }
+          ]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          }
+        }
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_23,
+    createBaseVNode("div", _hoisted_24, [
+      createVNode(_component_CChart, {
+        type: "pie",
+        ref: "chartPieRef",
+        data: {
+          labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
+          datasets: [
+            {
+              backgroundColor: ["#41B883", "#E46651", "#00D8FF", "#DD1B16"],
+              data: [40, 20, 80, 10]
+            }
+          ]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          }
+        }
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_25,
+    createBaseVNode("div", _hoisted_28, [
+      createVNode(_component_CChart, {
+        type: "polarArea",
+        ref: "chartPolarAreaRef",
+        data: {
+          labels: ["Red", "Green", "Yellow", "Grey", "Blue"],
+          datasets: [
+            {
+              data: [11, 16, 7, 3, 14],
+              backgroundColor: ["#FF6384", "#4BC0C0", "#FFCE56", "#E7E9ED", "#36A2EB"]
+            }
+          ]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          },
+          scales: {
+            r: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color")
+              }
+            }
+          }
+        }
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_29,
+    createBaseVNode("div", _hoisted_32, [
+      createVNode(_component_CChart, {
+        type: "bubble",
+        ref: "chartBubbleRef",
+        data: {
+          datasets: [{
+            label: "First Dataset",
+            data: [{
+              x: 20,
+              y: 30,
+              r: 15
+            }, {
+              x: 40,
+              y: 10,
+              r: 10
+            }],
+            backgroundColor: "rgb(255, 99, 132)"
+          }]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          },
+          scales: {
+            x: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            },
+            y: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          }
+        }
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_33,
+    createBaseVNode("div", _hoisted_36, [
+      createVNode(_component_CChart, {
+        type: "scatter",
+        ref: "chartScatterRef",
+        data: {
+          datasets: [{
+            label: "Scatter Dataset",
+            data: [{
+              x: -10,
+              y: 0
+            }, {
+              x: 0,
+              y: 10
+            }, {
+              x: 10,
+              y: 5
+            }, {
+              x: 0.5,
+              y: 5.5
+            }],
+            backgroundColor: "rgb(255, 99, 132)"
+          }]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          },
+          scales: {
+            x: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              position: "bottom",
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              },
+              type: "linear"
+            },
+            y: {
+              grid: {
+                color: $setup.getStyle("--cui-border-color-translucent")
+              },
+              ticks: {
+                color: $setup.getStyle("--cui-body-color")
+              }
+            }
+          }
+        }
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_37
+  ]);
+}
+const chart_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "chart.html.vue"]]);
+const data = JSON.parse('{"path":"/components/chart.html","title":"Vue Chart.js Component","lang":"en-US","frontmatter":{"title":"Vue Chart.js Component","name":"Chart.js","description":"Vue wrapper for Chart.js 3.0, the most popular charting library.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/chart.html"}]]},"headers":[{"level":2,"title":"Installation","slug":"installation","link":"#installation","children":[{"level":3,"title":"Npm","slug":"npm","link":"#npm","children":[]},{"level":3,"title":"Yarn","slug":"yarn","link":"#yarn","children":[]}]},{"level":2,"title":"Chart Types","slug":"chart-types","link":"#chart-types","children":[{"level":3,"title":"Line Chart","slug":"line-chart","link":"#line-chart","children":[]},{"level":3,"title":"Bar Chart","slug":"bar-chart","link":"#bar-chart","children":[]},{"level":3,"title":"Radar Chart","slug":"radar-chart","link":"#radar-chart","children":[]},{"level":3,"title":"Doughnut and Pie Charts","slug":"doughnut-and-pie-charts","link":"#doughnut-and-pie-charts","children":[]},{"level":3,"title":"Polar Area Chart","slug":"polar-area-chart","link":"#polar-area-chart","children":[]},{"level":3,"title":"Bubble Chart","slug":"bubble-chart","link":"#bubble-chart","children":[]},{"level":3,"title":"Scatter Chart","slug":"scatter-chart","link":"#scatter-chart","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CChart","slug":"cchart","link":"#cchart","children":[]}]}],"filePathRelative":"components/chart.md"}');
+export {
+  chart_html as comp,
+  data
+};
diff --git a/vue/docs/assets/checkbox.html-BL-hSbtE.js b/vue/docs/assets/checkbox.html-BL-hSbtE.js
new file mode 100644
index 00000000000..ad56fa89f87
--- /dev/null
+++ b/vue/docs/assets/checkbox.html-BL-hSbtE.js
@@ -0,0 +1,255 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, t as toDisplayString, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  setup() {
+    const checked = ref(true);
+    const checkedNames = ref(["Andrew"]);
+    return {
+      checked,
+      checkedNames
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "approach",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Approach "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#approach",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("Browser default checkboxes are replaced with the help of "),
+  /* @__PURE__ */ createBaseVNode("code", null, "<CFormCheck>"),
+  /* @__PURE__ */ createTextVNode(". Checkboxes are for selecting one or several options in a list.")
+], -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "checks",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Checks "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#checks",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_4 = { class: "docs-example rounded-top p-4" };
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3><p>Single checkbox, boolean value.</p>', 3);
+const _hoisted_8 = { class: "docs-example rounded-top p-4" };
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckDefaultVModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checked<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Checked: {{checked}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> checked <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        checked</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>We can also bind multiple checkboxes to the same array.</p>', 2);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lucas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Lucas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Lucas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedNames<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>andrew<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Andrew<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Andrew<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedNames<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>anna<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Anna<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Anna<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedNames<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Checked names: {{checkedNames}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> checkedNames <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Andrew&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        checkedNames</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="indeterminate" tabindex="-1">Indeterminate <a class="anchor-link" href="#indeterminate" aria-hidden="true">#</a></h2><p>Checkboxes can utilize the <code>:indeterminate</code> pseudo-class when manually set via <code>indeterminate</code> property.</p>', 3);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckIndeterminate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Indeterminate checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">indeterminate</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h3><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 3);
+const _hoisted_19 = { class: "docs-example rounded-top p-4" };
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="default-stacked" tabindex="-1">Default (stacked) <a class="anchor-link" href="#default-stacked" aria-hidden="true">#</a></h2><p>By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.</p>', 3);
+const _hoisted_23 = { class: "docs-example rounded-top p-4" };
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline" tabindex="-1">Inline <a class="anchor-link" href="#inline" aria-hidden="true">#</a></h2><p>Group checkboxes on the same horizontal row by adding <code>inline</code> boolean property to any <code>&lt;CFormCheck&gt;</code>.</p>', 3);
+const _hoisted_27 = { class: "docs-example rounded-top p-4" };
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reverse" tabindex="-1">Reverse <a class="anchor-link" href="#reverse" aria-hidden="true">#</a></h2><p>Put your checkboxes on the opposite side by adding <code>reverse</code> boolean property.</p>', 3);
+const _hoisted_31 = { class: "docs-example rounded-top p-4" };
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reverse checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled reverse checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="without-labels" tabindex="-1">Without labels <a class="anchor-link" href="#without-labels" aria-hidden="true">#</a></h2><p>Remember to still provide some form of accessible name for assistive technologies (for instance, using <code>aria-label</code>).</p>', 3);
+const _hoisted_35 = { class: "docs-example rounded-top p-4" };
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="toggle-buttons" tabindex="-1">Toggle buttons <a class="anchor-link" href="#toggle-buttons" aria-hidden="true">#</a></h2><p>Create button-like checkboxes buttons by using <code>button</code> boolean property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can further be grouped in a button group if needed.</p>', 3);
+const _hoisted_39 = { class: "docs-example rounded-top p-4" };
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>', 1);
+const _hoisted_41 = { class: "docs-example rounded-top p-4" };
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>', 1);
+const _hoisted_43 = { class: "docs-example rounded-top p-4" };
+const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h3><p>Different variants of button, such at the various outlined styles, are supported.</p>', 3);
+const _hoisted_47 = { class: "docs-example rounded-top p-4" };
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CFormCheck = resolveComponent("CFormCheck");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    _hoisted_3,
+    createBaseVNode("div", _hoisted_4, [
+      createVNode(_component_CFormCheck, {
+        id: "flexCheckDefault",
+        label: "Default checkbox"
+      }),
+      createVNode(_component_CFormCheck, {
+        id: "flexCheckChecked",
+        label: "Checked checkbox",
+        checked: ""
+      })
+    ]),
+    _hoisted_5,
+    createBaseVNode("div", _hoisted_8, [
+      createVNode(_component_CFormCheck, {
+        id: "flexCheckDefaultVModel",
+        label: "Default checkbox",
+        modelValue: $setup.checked,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.checked = $event)
+      }, null, 8, ["modelValue"]),
+      createBaseVNode("div", null, "Checked: " + toDisplayString($setup.checked), 1)
+    ]),
+    _hoisted_9,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CFormCheck, {
+        id: "lucas",
+        value: "Lucas",
+        label: "Lucas",
+        modelValue: $setup.checkedNames,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.checkedNames = $event)
+      }, null, 8, ["modelValue"]),
+      createVNode(_component_CFormCheck, {
+        id: "andrew",
+        value: "Andrew",
+        label: "Andrew",
+        modelValue: $setup.checkedNames,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.checkedNames = $event)
+      }, null, 8, ["modelValue"]),
+      createVNode(_component_CFormCheck, {
+        id: "anna",
+        value: "Anna",
+        label: "Anna",
+        modelValue: $setup.checkedNames,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.checkedNames = $event)
+      }, null, 8, ["modelValue"]),
+      createBaseVNode("div", null, "Checked names: " + toDisplayString($setup.checkedNames), 1)
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_15, [
+      createVNode(_component_CFormCheck, {
+        id: "flexCheckIndeterminate",
+        label: "Indeterminate checkbox",
+        indeterminate: ""
+      })
+    ]),
+    _hoisted_16,
+    createBaseVNode("div", _hoisted_19, [
+      createVNode(_component_CFormCheck, {
+        label: "Disabled checkbox",
+        disabled: ""
+      }),
+      createVNode(_component_CFormCheck, {
+        label: "Disabled checked checkbox",
+        checked: "",
+        disabled: ""
+      })
+    ]),
+    _hoisted_20,
+    createBaseVNode("div", _hoisted_23, [
+      createVNode(_component_CFormCheck, {
+        id: "defaultCheck1",
+        label: "Default checkbox"
+      }),
+      createVNode(_component_CFormCheck, {
+        id: "defaultCheck2",
+        label: "Disabled checkbox",
+        disabled: ""
+      })
+    ]),
+    _hoisted_24,
+    createBaseVNode("div", _hoisted_27, [
+      createVNode(_component_CFormCheck, {
+        inline: "",
+        id: "inlineCheckbox1",
+        value: "option1",
+        label: "1"
+      }),
+      createVNode(_component_CFormCheck, {
+        inline: "",
+        id: "inlineCheckbox2",
+        value: "option2",
+        label: "2"
+      }),
+      createVNode(_component_CFormCheck, {
+        inline: "",
+        id: "inlineCheckbox3",
+        value: "option3",
+        label: "3 (disabled)",
+        disabled: ""
+      })
+    ]),
+    _hoisted_28,
+    createBaseVNode("div", _hoisted_31, [
+      createVNode(_component_CFormCheck, {
+        reverse: "",
+        id: "reverseCheckbox1",
+        value: "option1",
+        label: "Reverse checkbox"
+      }),
+      createVNode(_component_CFormCheck, {
+        reverse: "",
+        id: "reverseCheckbox2",
+        value: "option2",
+        label: "Disabled reverse checkbox",
+        disabled: ""
+      })
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_35, [
+      createVNode(_component_CFormCheck, {
+        id: "checkboxNoLabel",
+        value: "",
+        "aria-label": "..."
+      })
+    ]),
+    _hoisted_36,
+    createBaseVNode("div", _hoisted_39, [
+      createVNode(_component_CFormCheck, {
+        button: { color: "primary" },
+        id: "btn-check",
+        autocomplete: "off",
+        label: "Single toggle"
+      })
+    ]),
+    _hoisted_40,
+    createBaseVNode("div", _hoisted_41, [
+      createVNode(_component_CFormCheck, {
+        button: { color: "primary" },
+        id: "btn-check-2",
+        autocomplete: "off",
+        label: "Checked",
+        checked: ""
+      })
+    ]),
+    _hoisted_42,
+    createBaseVNode("div", _hoisted_43, [
+      createVNode(_component_CFormCheck, {
+        button: { color: "primary" },
+        id: "btn-check-3",
+        autocomplete: "off",
+        label: "Disabled",
+        disabled: ""
+      })
+    ]),
+    _hoisted_44,
+    createBaseVNode("div", _hoisted_47, [
+      createVNode(_component_CFormCheck, {
+        button: { color: "primary", variant: "outline" },
+        id: "btn-check-outlined",
+        autocomplete: "off",
+        label: "Single toggle"
+      }),
+      createVNode(_component_CFormCheck, {
+        button: { color: "secondary", variant: "outline" },
+        id: "btn-check-2-outlined",
+        autocomplete: "off",
+        label: "Checked",
+        checked: ""
+      })
+    ]),
+    _hoisted_48,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-check-variables"
+    }),
+    _hoisted_51
+  ]);
+}
+const checkbox_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "checkbox.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/checkbox.html","title":"Vue Checkbox Component","lang":"en-US","frontmatter":{"title":"Vue Checkbox Component","name":"Checkbox","description":"Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components.","other_frameworks":"checkbox","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/checkbox.html"}]]},"headers":[{"level":2,"title":"Approach","slug":"approach","link":"#approach","children":[]},{"level":2,"title":"Checks","slug":"checks","link":"#checks","children":[{"level":3,"title":"vModel","slug":"vmodel","link":"#vmodel","children":[]}]},{"level":2,"title":"Indeterminate","slug":"indeterminate","link":"#indeterminate","children":[{"level":3,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]}]},{"level":2,"title":"Default (stacked)","slug":"default-stacked","link":"#default-stacked","children":[]},{"level":2,"title":"Inline","slug":"inline","link":"#inline","children":[]},{"level":2,"title":"Reverse","slug":"reverse","link":"#reverse","children":[]},{"level":2,"title":"Without labels","slug":"without-labels","link":"#without-labels","children":[]},{"level":2,"title":"Toggle buttons","slug":"toggle-buttons","link":"#toggle-buttons","children":[{"level":3,"title":"Outlined styles","slug":"outlined-styles","link":"#outlined-styles","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CFormCheck","slug":"cformcheck","link":"#cformcheck","children":[]}]}],"filePathRelative":"forms/checkbox.md"}');
+export {
+  checkbox_html as comp,
+  data
+};
diff --git a/vue/docs/assets/checkbox.html-BmOd7XOD.js b/vue/docs/assets/checkbox.html-BmOd7XOD.js
deleted file mode 100644
index 4f5ad1afc49..00000000000
--- a/vue/docs/assets/checkbox.html-BmOd7XOD.js
+++ /dev/null
@@ -1,255 +0,0 @@
-import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, t as toDisplayString, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  setup() {
-    const checked = ref(true);
-    const checkedNames = ref(["Andrew"]);
-    return {
-      checked,
-      checkedNames
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "approach",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Approach "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#approach",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("Browser default checkboxes are replaced with the help of "),
-  /* @__PURE__ */ createBaseVNode("code", null, "<CFormCheck>"),
-  /* @__PURE__ */ createTextVNode(". Checkboxes are for selecting one or several options in a list.")
-], -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "checks",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Checks "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#checks",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3><p>Single checkbox, boolean value.</p>', 3);
-const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckDefaultVModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checked<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Checked: {{checked}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> checked <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        checked</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>We can also bind multiple checkboxes to the same array.</p>', 2);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lucas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Lucas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Lucas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedNames<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>andrew<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Andrew<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Andrew<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedNames<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>anna<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Anna<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Anna<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedNames<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Checked names: {{checkedNames}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> checkedNames <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Andrew&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        checkedNames</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="indeterminate" tabindex="-1">Indeterminate <a class="anchor-link" href="#indeterminate" aria-hidden="true">#</a></h2><p>Checkboxes can utilize the <code>:indeterminate</code> pseudo-class when manually set via <code>indeterminate</code> property.</p>', 3);
-const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckIndeterminate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Indeterminate checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">indeterminate</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h3><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 3);
-const _hoisted_19 = { class: "docs-example rounded-top p-4" };
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="default-stacked" tabindex="-1">Default (stacked) <a class="anchor-link" href="#default-stacked" aria-hidden="true">#</a></h2><p>By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.</p>', 3);
-const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline" tabindex="-1">Inline <a class="anchor-link" href="#inline" aria-hidden="true">#</a></h2><p>Group checkboxes on the same horizontal row by adding <code>inline</code> boolean property to any <code>&lt;CFormCheck&gt;</code>.</p>', 3);
-const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reverse" tabindex="-1">Reverse <a class="anchor-link" href="#reverse" aria-hidden="true">#</a></h2><p>Put your checkboxes on the opposite side by adding <code>reverse</code> boolean property.</p>', 3);
-const _hoisted_31 = { class: "docs-example rounded-top p-4" };
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reverse checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled reverse checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="without-labels" tabindex="-1">Without labels <a class="anchor-link" href="#without-labels" aria-hidden="true">#</a></h2><p>Remember to still provide some form of accessible name for assistive technologies (for instance, using <code>aria-label</code>).</p>', 3);
-const _hoisted_35 = { class: "docs-example rounded-top p-4" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="toggle-buttons" tabindex="-1">Toggle buttons <a class="anchor-link" href="#toggle-buttons" aria-hidden="true">#</a></h2><p>Create button-like checkboxes buttons by using <code>button</code> boolean property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can further be grouped in a button group if needed.</p>', 3);
-const _hoisted_39 = { class: "docs-example rounded-top p-4" };
-const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>', 1);
-const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>', 1);
-const _hoisted_43 = { class: "docs-example rounded-top p-4" };
-const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h3><p>Different variants of button, such at the various outlined styles, are supported.</p>', 3);
-const _hoisted_47 = { class: "docs-example rounded-top p-4" };
-const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CFormCheck = resolveComponent("CFormCheck");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    createBaseVNode("div", _hoisted_4, [
-      createVNode(_component_CFormCheck, {
-        id: "flexCheckDefault",
-        label: "Default checkbox"
-      }),
-      createVNode(_component_CFormCheck, {
-        id: "flexCheckChecked",
-        label: "Checked checkbox",
-        checked: ""
-      })
-    ]),
-    _hoisted_5,
-    createBaseVNode("div", _hoisted_8, [
-      createVNode(_component_CFormCheck, {
-        id: "flexCheckDefaultVModel",
-        label: "Default checkbox",
-        modelValue: $setup.checked,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.checked = $event)
-      }, null, 8, ["modelValue"]),
-      createBaseVNode("div", null, "Checked: " + toDisplayString($setup.checked), 1)
-    ]),
-    _hoisted_9,
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CFormCheck, {
-        id: "lucas",
-        value: "Lucas",
-        label: "Lucas",
-        modelValue: $setup.checkedNames,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.checkedNames = $event)
-      }, null, 8, ["modelValue"]),
-      createVNode(_component_CFormCheck, {
-        id: "andrew",
-        value: "Andrew",
-        label: "Andrew",
-        modelValue: $setup.checkedNames,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.checkedNames = $event)
-      }, null, 8, ["modelValue"]),
-      createVNode(_component_CFormCheck, {
-        id: "anna",
-        value: "Anna",
-        label: "Anna",
-        modelValue: $setup.checkedNames,
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.checkedNames = $event)
-      }, null, 8, ["modelValue"]),
-      createBaseVNode("div", null, "Checked names: " + toDisplayString($setup.checkedNames), 1)
-    ]),
-    _hoisted_12,
-    createBaseVNode("div", _hoisted_15, [
-      createVNode(_component_CFormCheck, {
-        id: "flexCheckIndeterminate",
-        label: "Indeterminate checkbox",
-        indeterminate: ""
-      })
-    ]),
-    _hoisted_16,
-    createBaseVNode("div", _hoisted_19, [
-      createVNode(_component_CFormCheck, {
-        label: "Disabled checkbox",
-        disabled: ""
-      }),
-      createVNode(_component_CFormCheck, {
-        label: "Disabled checked checkbox",
-        checked: "",
-        disabled: ""
-      })
-    ]),
-    _hoisted_20,
-    createBaseVNode("div", _hoisted_23, [
-      createVNode(_component_CFormCheck, {
-        id: "defaultCheck1",
-        label: "Default checkbox"
-      }),
-      createVNode(_component_CFormCheck, {
-        id: "defaultCheck2",
-        label: "Disabled checkbox",
-        disabled: ""
-      })
-    ]),
-    _hoisted_24,
-    createBaseVNode("div", _hoisted_27, [
-      createVNode(_component_CFormCheck, {
-        inline: "",
-        id: "inlineCheckbox1",
-        value: "option1",
-        label: "1"
-      }),
-      createVNode(_component_CFormCheck, {
-        inline: "",
-        id: "inlineCheckbox2",
-        value: "option2",
-        label: "2"
-      }),
-      createVNode(_component_CFormCheck, {
-        inline: "",
-        id: "inlineCheckbox3",
-        value: "option3",
-        label: "3 (disabled)",
-        disabled: ""
-      })
-    ]),
-    _hoisted_28,
-    createBaseVNode("div", _hoisted_31, [
-      createVNode(_component_CFormCheck, {
-        reverse: "",
-        id: "reverseCheckbox1",
-        value: "option1",
-        label: "Reverse checkbox"
-      }),
-      createVNode(_component_CFormCheck, {
-        reverse: "",
-        id: "reverseCheckbox2",
-        value: "option2",
-        label: "Disabled reverse checkbox",
-        disabled: ""
-      })
-    ]),
-    _hoisted_32,
-    createBaseVNode("div", _hoisted_35, [
-      createVNode(_component_CFormCheck, {
-        id: "checkboxNoLabel",
-        value: "",
-        "aria-label": "..."
-      })
-    ]),
-    _hoisted_36,
-    createBaseVNode("div", _hoisted_39, [
-      createVNode(_component_CFormCheck, {
-        button: { color: "primary" },
-        id: "btn-check",
-        autocomplete: "off",
-        label: "Single toggle"
-      })
-    ]),
-    _hoisted_40,
-    createBaseVNode("div", _hoisted_41, [
-      createVNode(_component_CFormCheck, {
-        button: { color: "primary" },
-        id: "btn-check-2",
-        autocomplete: "off",
-        label: "Checked",
-        checked: ""
-      })
-    ]),
-    _hoisted_42,
-    createBaseVNode("div", _hoisted_43, [
-      createVNode(_component_CFormCheck, {
-        button: { color: "primary" },
-        id: "btn-check-3",
-        autocomplete: "off",
-        label: "Disabled",
-        disabled: ""
-      })
-    ]),
-    _hoisted_44,
-    createBaseVNode("div", _hoisted_47, [
-      createVNode(_component_CFormCheck, {
-        button: { color: "primary", variant: "outline" },
-        id: "btn-check-outlined",
-        autocomplete: "off",
-        label: "Single toggle"
-      }),
-      createVNode(_component_CFormCheck, {
-        button: { color: "secondary", variant: "outline" },
-        id: "btn-check-2-outlined",
-        autocomplete: "off",
-        label: "Checked",
-        checked: ""
-      })
-    ]),
-    _hoisted_48,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-check-variables"
-    }),
-    _hoisted_51
-  ]);
-}
-const checkbox_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "checkbox.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/checkbox.html","title":"Vue Checkbox Component","lang":"en-US","frontmatter":{"title":"Vue Checkbox Component","name":"Checkbox","description":"Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components.","other_frameworks":"checkbox","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/checkbox.html"}]]},"headers":[{"level":2,"title":"Approach","slug":"approach","link":"#approach","children":[]},{"level":2,"title":"Checks","slug":"checks","link":"#checks","children":[{"level":3,"title":"vModel","slug":"vmodel","link":"#vmodel","children":[]}]},{"level":2,"title":"Indeterminate","slug":"indeterminate","link":"#indeterminate","children":[{"level":3,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]}]},{"level":2,"title":"Default (stacked)","slug":"default-stacked","link":"#default-stacked","children":[]},{"level":2,"title":"Inline","slug":"inline","link":"#inline","children":[]},{"level":2,"title":"Reverse","slug":"reverse","link":"#reverse","children":[]},{"level":2,"title":"Without labels","slug":"without-labels","link":"#without-labels","children":[]},{"level":2,"title":"Toggle buttons","slug":"toggle-buttons","link":"#toggle-buttons","children":[{"level":3,"title":"Outlined styles","slug":"outlined-styles","link":"#outlined-styles","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CFormCheck","slug":"cformcheck","link":"#cformcheck","children":[]}]}],"filePathRelative":"forms/checkbox.md"}');
-export {
-  checkbox_html as comp,
-  data
-};
diff --git a/vue/docs/assets/checks-radios.html-BKOw9HTt.js b/vue/docs/assets/checks-radios.html-kyGivGpt.js
similarity index 50%
rename from vue/docs/assets/checks-radios.html-BKOw9HTt.js
rename to vue/docs/assets/checks-radios.html-kyGivGpt.js
index 948042795ed..0b733c3bf6f 100644
--- a/vue/docs/assets/checks-radios.html-BKOw9HTt.js
+++ b/vue/docs/assets/checks-radios.html-kyGivGpt.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "approach",
@@ -28,39 +28,39 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
   }, "#")
 ], -1);
 const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="indeterminate" tabindex="-1">Indeterminate <a class="anchor-link" href="#indeterminate" aria-hidden="true">#</a></h2><p>Checkboxes can utilize the <code>:indeterminate</code> pseudo-class when manually set via <code>indeterminate</code> property.</p>', 3);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="indeterminate" tabindex="-1">Indeterminate <a class="anchor-link" href="#indeterminate" aria-hidden="true">#</a></h2><p>Checkboxes can utilize the <code>:indeterminate</code> pseudo-class when manually set via <code>indeterminate</code> property.</p>', 3);
 const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckIndeterminate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Indeterminate checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">indeterminate</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h3><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 3);
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexCheckIndeterminate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Indeterminate checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">indeterminate</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h3><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 3);
 const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="radios" tabindex="-1">Radios <a class="anchor-link" href="#radios" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="radios" tabindex="-1">Radios <a class="anchor-link" href="#radios" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 3);
 const _hoisted_16 = { class: "docs-example rounded-top p-4" };
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="disabled-1" tabindex="-1">Disabled <a class="anchor-link" href="#disabled-1" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="disabled-1" tabindex="-1">Disabled <a class="anchor-link" href="#disabled-1" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_19 = { class: "docs-example rounded-top p-4" };
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="switches" tabindex="-1">Switches <a class="anchor-link" href="#switches" aria-hidden="true">#</a></h2><p>A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean properly to render a toggle switch. Switches also support the <code>disabled</code> attribute.</p>', 3);
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="switches" tabindex="-1">Switches <a class="anchor-link" href="#switches" aria-hidden="true">#</a></h2><p>A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean properly to render a toggle switch. Switches also support the <code>disabled</code> attribute.</p>', 3);
 const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sizes" tabindex="-1">Sizes <a class="anchor-link" href="#sizes" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sizes" tabindex="-1">Sizes <a class="anchor-link" href="#sizes" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_26 = { class: "docs-example rounded-top p-4" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Extra large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultXL<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="default-stacked" tabindex="-1">Default (stacked) <a class="anchor-link" href="#default-stacked" aria-hidden="true">#</a></h2><p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.</p>', 3);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Extra large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultXL<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="default-stacked" tabindex="-1">Default (stacked) <a class="anchor-link" href="#default-stacked" aria-hidden="true">#</a></h2><p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.</p>', 3);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
-const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultCheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline" tabindex="-1">Inline <a class="anchor-link" href="#inline" aria-hidden="true">#</a></h2><p>Group checkboxes or radios on the same horizontal row by adding <code>inline</code> boolean property to any <code>&lt;CFormCheck&gt;</code>.</p>', 3);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline" tabindex="-1">Inline <a class="anchor-link" href="#inline" aria-hidden="true">#</a></h2><p>Group checkboxes or radios on the same horizontal row by adding <code>inline</code> boolean property to any <code>&lt;CFormCheck&gt;</code>.</p>', 3);
 const _hoisted_36 = { class: "docs-example rounded-top p-4" };
-const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="without-labels" tabindex="-1">Without labels <a class="anchor-link" href="#without-labels" aria-hidden="true">#</a></h2><p>Remember to still provide some form of accessible name for assistive technologies (for instance, using <code>aria-label</code>).</p>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="without-labels" tabindex="-1">Without labels <a class="anchor-link" href="#without-labels" aria-hidden="true">#</a></h2><p>Remember to still provide some form of accessible name for assistive technologies (for instance, using <code>aria-label</code>).</p>', 3);
 const _hoisted_42 = { class: "docs-example rounded-top p-4" };
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="toggle-buttons" tabindex="-1">Toggle buttons <a class="anchor-link" href="#toggle-buttons" aria-hidden="true">#</a></h2><p>Create button-like checkboxes and radio buttons by using <code>button</code> boolean property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can further be grouped in a button group if needed.</p><h3 id="checkbox-toggle-buttons" tabindex="-1">Checkbox toggle buttons <a class="anchor-link" href="#checkbox-toggle-buttons" aria-hidden="true">#</a></h3>', 4);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="toggle-buttons" tabindex="-1">Toggle buttons <a class="anchor-link" href="#toggle-buttons" aria-hidden="true">#</a></h2><p>Create button-like checkboxes and radio buttons by using <code>button</code> boolean property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can further be grouped in a button group if needed.</p><h3 id="checkbox-toggle-buttons" tabindex="-1">Checkbox toggle buttons <a class="anchor-link" href="#checkbox-toggle-buttons" aria-hidden="true">#</a></h3>', 4);
 const _hoisted_47 = { class: "docs-example rounded-top p-4" };
-const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>', 1);
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>', 1);
 const _hoisted_49 = { class: "docs-example rounded-top p-4" };
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>', 1);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>', 1);
 const _hoisted_51 = { class: "docs-example rounded-top p-4" };
-const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="radio-toggle-buttons" tabindex="-1">Radio toggle buttons <a class="anchor-link" href="#radio-toggle-buttons" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="radio-toggle-buttons" tabindex="-1">Radio toggle buttons <a class="anchor-link" href="#radio-toggle-buttons" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_54 = { class: "docs-example rounded-top p-4" };
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h3><p>Different variants of button, such at the various outlined styles, are supported.</p>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h3><p>Different variants of button, such at the various outlined styles, are supported.</p>', 3);
 const _hoisted_58 = { class: "docs-example rounded-top p-4" };
-const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;success&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table><h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSwitch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSwitch <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSwitch&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component large or extra large. Works only with <code>switch</code>.</td><td>string</td><td><code>&#39;lg&#39; | &#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 14);
+const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;primary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Single toggle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-check-2-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;success&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table><h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSwitch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSwitch <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSwitch&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component large or extra large. Works only with <code>switch</code>.</td><td>string</td><td><code>&#39;lg&#39; | &#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 14);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormCheck = resolveComponent("CFormCheck");
   const _component_CFormSwitch = resolveComponent("CFormSwitch");
diff --git a/vue/docs/assets/close-button.html-CSQ13MAD.js b/vue/docs/assets/close-button.html-BS4-GrP8.js
similarity index 66%
rename from vue/docs/assets/close-button.html-CSQ13MAD.js
rename to vue/docs/assets/close-button.html-BS4-GrP8.js
index 7f197dc6a5b..5f471b31c53 100644
--- a/vue/docs/assets/close-button.html-CSQ13MAD.js
+++ b/vue/docs/assets/close-button.html-BS4-GrP8.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -19,11 +19,11 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(".")
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="disabled-state" tabindex="-1">Disabled state <a class="anchor-link" href="#disabled-state" aria-hidden="true">#</a></h2><p>Disabled close buttons change their <code>opacity</code>. We&#39;ve also applied <code>pointer-events: none</code> and <code>user-select: none</code> to preventing hover and active states from triggering.</p>', 3);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="disabled-state" tabindex="-1">Disabled state <a class="anchor-link" href="#disabled-state" aria-hidden="true">#</a></h2><p>Disabled close buttons change their <code>opacity</code>. We&#39;ve also applied <code>pointer-events: none</code> and <code>user-select: none</code> to preventing hover and active states from triggering.</p>', 3);
 const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="dark-variant" tabindex="-1">Dark variant <a class="anchor-link" href="#dark-variant" aria-hidden="true">#</a></h2><p>Add <code>dark</code> boolean property to the <code>&lt;CCloseButton&gt;</code>, to invert the close button. This uses the filter property to invert the background-image without overriding its value.</p>', 3);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="dark-variant" tabindex="-1">Dark variant <a class="anchor-link" href="#dark-variant" aria-hidden="true">#</a></h2><p>Add <code>dark</code> boolean property to the <code>&lt;CCloseButton&gt;</code>, to invert the close button. This uses the filter property to invert the background-image without overriding its value.</p>', 3);
 const _hoisted_11 = { class: "docs-example rounded-top p-4 bg-dark" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">dark</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">dark</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCloseButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCloseButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/close-button/CCloseButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>dark</strong></td><td>Invert the default color.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>white</strong></td><td>Change the default color to white.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the component.</td><td></td></tr></tbody></table>', 8);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">dark</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">dark</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCloseButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCloseButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/close-button/CCloseButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>dark</strong></td><td>Invert the default color.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>white</strong></td><td>Change the default color to white.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on the component.</td><td></td></tr></tbody></table>', 8);
 function _sfc_render(_ctx, _cache) {
   const _component_CCloseButton = resolveComponent("CCloseButton");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/collapse.html-COalO-Qi.js b/vue/docs/assets/collapse.html-COalO-Qi.js
deleted file mode 100644
index ef0f73b883d..00000000000
--- a/vue/docs/assets/collapse.html-COalO-Qi.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, l as withModifiers, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  data() {
-    return {
-      visible: false,
-      visibleHorizontal: false,
-      visibleA: false,
-      visibleB: false
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p><h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>You can use a link or a button component.</p>', 4);
-const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson</span>\n<span class="line">        ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt</span>\n<span class="line">        sapiente ea proident.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal" tabindex="-1">Horizontal <a class="anchor-link" href="#horizontal" aria-hidden="true">#</a></h2><p>The collapse plugin also supports horizontal collapsing. Add the <code>horizontal</code> property to transition the <code>width</code> instead of <code>height</code> and set a <code>width</code> on the immediate child element.</p>', 3);
-const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = { style: { "min-height": "120px" } };
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>collapseWidthExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleHorizontal = !visibleHorizontal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">min-height</span><span class="token punctuation">:</span> 120px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">horizontal</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleHorizontal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          This is some placeholder content for a horizontal collapse. It&#39;s hidden by default and shown when triggered.</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleHorizontal</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-targets" tabindex="-1">Multiple targets <a class="anchor-link" href="#multiple-targets" aria-hidden="true">#</a></h2><p>A <code>&lt;CButton&gt;</code> can show and hide multiple elements.</p>', 3);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleA = !visibleA<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle first element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleB = !visibleB<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle second element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {</span>\n<span class="line">    visibleA = !visibleA</span>\n<span class="line">    visibleB = !visibleB</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Toggle both elements</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleA<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</span>\n<span class="line">            richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson</span>\n<span class="line">            cred nesciunt sapiente ea proident.</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleB<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</span>\n<span class="line">            richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson</span>\n<span class="line">            cred nesciunt sapiente ea proident.</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleA</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">visibleB</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCollapse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCollapse <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/collapse/CCollapse&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>horizontal</strong></td><td>Set horizontal collapsing to transition the width instead of height.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 8);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CCardBody = resolveComponent("CCardBody");
-  const _component_CCard = resolveComponent("CCard");
-  const _component_CCollapse = resolveComponent("CCollapse");
-  const _component_CCol = resolveComponent("CCol");
-  const _component_CRow = resolveComponent("CRow");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_5, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        href: "#",
-        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => $data.visible = !$data.visible, ["prevent"]))
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Link")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[1] || (_cache[1] = ($event) => $data.visible = !$data.visible)
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Button")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CCollapse, { visible: $data.visible }, {
-        default: withCtx(() => [
-          createVNode(_component_CCard, { class: "mt-3" }, {
-            default: withCtx(() => [
-              createVNode(_component_CCardBody, null, {
-                default: withCtx(() => [
-                  createTextVNode(" Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_6,
-    createBaseVNode("div", _hoisted_9, [
-      createVNode(_component_CButton, {
-        class: "mb-3",
-        color: "primary",
-        "aria-expanded": "{visible}",
-        "aria-controls": "collapseWidthExample",
-        onClick: _cache[2] || (_cache[2] = ($event) => $data.visibleHorizontal = !$data.visibleHorizontal)
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Button")
-        ]),
-        _: 1
-      }),
-      createBaseVNode("div", _hoisted_10, [
-        createVNode(_component_CCollapse, {
-          horizontal: "",
-          visible: $data.visibleHorizontal
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_CCard, { style: { "width": "300px" } }, {
-              default: withCtx(() => [
-                createVNode(_component_CCardBody, null, {
-                  default: withCtx(() => [
-                    createTextVNode(" This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. ")
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["visible"])
-      ])
-    ]),
-    _hoisted_11,
-    createBaseVNode("div", _hoisted_14, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[3] || (_cache[3] = ($event) => $data.visibleA = !$data.visibleA)
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle first element")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[4] || (_cache[4] = ($event) => $data.visibleB = !$data.visibleB)
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle second element")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[5] || (_cache[5] = () => {
-          $data.visibleA = !$data.visibleA;
-          $data.visibleB = !$data.visibleB;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode(" Toggle both elements ")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CRow, null, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, { xs: "6" }, {
-            default: withCtx(() => [
-              createVNode(_component_CCollapse, { visible: $data.visibleA }, {
-                default: withCtx(() => [
-                  createVNode(_component_CCard, { class: "mt-3" }, {
-                    default: withCtx(() => [
-                      createVNode(_component_CCardBody, null, {
-                        default: withCtx(() => [
-                          createTextVNode(" Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ")
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["visible"])
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "6" }, {
-            default: withCtx(() => [
-              createVNode(_component_CCollapse, { visible: $data.visibleB }, {
-                default: withCtx(() => [
-                  createVNode(_component_CCard, { class: "mt-3" }, {
-                    default: withCtx(() => [
-                      createVNode(_component_CCardBody, null, {
-                        default: withCtx(() => [
-                          createTextVNode(" Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ")
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["visible"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_15
-  ]);
-}
-const collapse_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "collapse.html.vue"]]);
-const data = JSON.parse('{"path":"/components/collapse.html","title":"Vue Collapse Component","lang":"en-US","frontmatter":{"title":"Vue Collapse Component","name":"Collapse","description":"Vue collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.","other_frameworks":"collapse","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/collapse.html"}]]},"headers":[{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Horizontal","slug":"horizontal","link":"#horizontal","children":[]},{"level":2,"title":"Multiple targets","slug":"multiple-targets","link":"#multiple-targets","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CCollapse","slug":"ccollapse","link":"#ccollapse","children":[]}]}],"filePathRelative":"components/collapse.md"}');
-export {
-  collapse_html as comp,
-  data
-};
diff --git a/vue/docs/assets/collapse.html-CuA1iHpy.js b/vue/docs/assets/collapse.html-CuA1iHpy.js
new file mode 100644
index 00000000000..1908034bf83
--- /dev/null
+++ b/vue/docs/assets/collapse.html-CuA1iHpy.js
@@ -0,0 +1,190 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, l as withModifiers, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  data() {
+    return {
+      visible: false,
+      visibleHorizontal: false,
+      visibleA: false,
+      visibleB: false
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p><h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>You can use a link or a button component.</p>', 4);
+const _hoisted_5 = { class: "docs-example rounded-top p-4" };
+const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson</span>\n<span class="line">        ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt</span>\n<span class="line">        sapiente ea proident.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal" tabindex="-1">Horizontal <a class="anchor-link" href="#horizontal" aria-hidden="true">#</a></h2><p>The collapse plugin also supports horizontal collapsing. Add the <code>horizontal</code> property to transition the <code>width</code> instead of <code>height</code> and set a <code>width</code> on the immediate child element.</p>', 3);
+const _hoisted_9 = { class: "docs-example rounded-top p-4" };
+const _hoisted_10 = { style: { "min-height": "120px" } };
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>collapseWidthExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleHorizontal = !visibleHorizontal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">min-height</span><span class="token punctuation">:</span> 120px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">horizontal</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleHorizontal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          This is some placeholder content for a horizontal collapse. It&#39;s hidden by default and shown when triggered.</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleHorizontal</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-targets" tabindex="-1">Multiple targets <a class="anchor-link" href="#multiple-targets" aria-hidden="true">#</a></h2><p>A <code>&lt;CButton&gt;</code> can show and hide multiple elements.</p>', 3);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleA = !visibleA<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle first element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleB = !visibleB<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle second element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {</span>\n<span class="line">    visibleA = !visibleA</span>\n<span class="line">    visibleB = !visibleB</span>\n<span class="line">  }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Toggle both elements</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleA<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</span>\n<span class="line">            richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson</span>\n<span class="line">            cred nesciunt sapiente ea proident.</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleB<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</span>\n<span class="line">            richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson</span>\n<span class="line">            cred nesciunt sapiente ea proident.</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleA</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">visibleB</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCollapse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCollapse <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/collapse/CCollapse&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>horizontal</strong></td><td>Set horizontal collapsing to transition the width instead of height.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 8);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CCardBody = resolveComponent("CCardBody");
+  const _component_CCard = resolveComponent("CCard");
+  const _component_CCollapse = resolveComponent("CCollapse");
+  const _component_CCol = resolveComponent("CCol");
+  const _component_CRow = resolveComponent("CRow");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_5, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        href: "#",
+        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => $data.visible = !$data.visible, ["prevent"]))
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Link")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[1] || (_cache[1] = ($event) => $data.visible = !$data.visible)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Button")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CCollapse, { visible: $data.visible }, {
+        default: withCtx(() => [
+          createVNode(_component_CCard, { class: "mt-3" }, {
+            default: withCtx(() => [
+              createVNode(_component_CCardBody, null, {
+                default: withCtx(() => [
+                  createTextVNode(" Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_6,
+    createBaseVNode("div", _hoisted_9, [
+      createVNode(_component_CButton, {
+        class: "mb-3",
+        color: "primary",
+        "aria-expanded": "{visible}",
+        "aria-controls": "collapseWidthExample",
+        onClick: _cache[2] || (_cache[2] = ($event) => $data.visibleHorizontal = !$data.visibleHorizontal)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Button")
+        ]),
+        _: 1
+      }),
+      createBaseVNode("div", _hoisted_10, [
+        createVNode(_component_CCollapse, {
+          horizontal: "",
+          visible: $data.visibleHorizontal
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_CCard, { style: { "width": "300px" } }, {
+              default: withCtx(() => [
+                createVNode(_component_CCardBody, null, {
+                  default: withCtx(() => [
+                    createTextVNode(" This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. ")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["visible"])
+      ])
+    ]),
+    _hoisted_11,
+    createBaseVNode("div", _hoisted_14, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[3] || (_cache[3] = ($event) => $data.visibleA = !$data.visibleA)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle first element")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[4] || (_cache[4] = ($event) => $data.visibleB = !$data.visibleB)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle second element")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[5] || (_cache[5] = () => {
+          $data.visibleA = !$data.visibleA;
+          $data.visibleB = !$data.visibleB;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode(" Toggle both elements ")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CRow, null, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { xs: "6" }, {
+            default: withCtx(() => [
+              createVNode(_component_CCollapse, { visible: $data.visibleA }, {
+                default: withCtx(() => [
+                  createVNode(_component_CCard, { class: "mt-3" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_CCardBody, null, {
+                        default: withCtx(() => [
+                          createTextVNode(" Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ")
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["visible"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "6" }, {
+            default: withCtx(() => [
+              createVNode(_component_CCollapse, { visible: $data.visibleB }, {
+                default: withCtx(() => [
+                  createVNode(_component_CCard, { class: "mt-3" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_CCardBody, null, {
+                        default: withCtx(() => [
+                          createTextVNode(" Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ")
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["visible"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_15
+  ]);
+}
+const collapse_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "collapse.html.vue"]]);
+const data = JSON.parse('{"path":"/components/collapse.html","title":"Vue Collapse Component","lang":"en-US","frontmatter":{"title":"Vue Collapse Component","name":"Collapse","description":"Vue collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.","other_frameworks":"collapse","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/collapse.html"}]]},"headers":[{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Horizontal","slug":"horizontal","link":"#horizontal","children":[]},{"level":2,"title":"Multiple targets","slug":"multiple-targets","link":"#multiple-targets","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CCollapse","slug":"ccollapse","link":"#ccollapse","children":[]}]}],"filePathRelative":"components/collapse.md"}');
+export {
+  collapse_html as comp,
+  data
+};
diff --git a/vue/docs/assets/columns.html-DINIOXPp.js b/vue/docs/assets/columns.html-c_8p-0J4.js
similarity index 58%
rename from vue/docs/assets/columns.html-DINIOXPp.js
rename to vue/docs/assets/columns.html-c_8p-0J4.js
index d07b18df52a..c38661be270 100644
--- a/vue/docs/assets/columns.html-DINIOXPp.js
+++ b/vue/docs/assets/columns.html-c_8p-0J4.js
@@ -1,45 +1,45 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-they-work" tabindex="-1">How they work <a class="anchor-link" href="#how-they-work" aria-hidden="true">#</a></h2><ul><li><p><strong>Columns build on the grid&#39;s flexbox architecture.</strong> Flexbox means we have options for changing individual columns and <a href="./../grid#row-columns">modifying groups of columns at the row level</a>. You choose how columns grow, shrink, or otherwise change.</p></li><li><p><strong>When building grid layouts, all content goes in columns.</strong> The hierarchy of CoreUI&#39;s grid goes from <a href="./../containers">container</a> to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.</p></li><li><p><strong>CoreUI for Vue.js includes predefined components for creating fast, responsive layouts.</strong> With <a href="./../breakpoints">six breakpoints</a> and a dozen columns at each grid tier, we have dozens of components already built for you to create your desired layouts. This can be disabled via Sass if you wish.</p></li></ul><h2 id="alignment" tabindex="-1">Alignment <a class="anchor-link" href="#alignment" aria-hidden="true">#</a></h2><p>Use flexbox alignment utilities to vertically and horizontally align columns.</p><h3 id="vertical-alignment" tabindex="-1">Vertical alignment <a class="anchor-link" href="#vertical-alignment" aria-hidden="true">#</a></h3>', 5);
 const _hoisted_6 = { class: "docs-example rounded-top p-4" };
 const _hoisted_7 = { class: "docs-example-row docs-example-row-flex-cols" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
 const _hoisted_10 = { class: "docs-example-row docs-example-row-flex-cols" };
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-self-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-self-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-self-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="horizontal-alignment" tabindex="-1">Horizontal alignment <a class="anchor-link" href="#horizontal-alignment" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-self-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-self-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-self-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="horizontal-alignment" tabindex="-1">Horizontal alignment <a class="anchor-link" href="#horizontal-alignment" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_13 = { class: "docs-example rounded-top p-4" };
 const _hoisted_14 = { class: "docs-example-row" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-around<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-evenly<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="column-wrapping" tabindex="-1">Column wrapping <a class="anchor-link" href="#column-wrapping" aria-hidden="true">#</a></h3><p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>', 3);
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-around<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-evenly<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of two columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="column-wrapping" tabindex="-1">Column wrapping <a class="anchor-link" href="#column-wrapping" aria-hidden="true">#</a></h3><p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>', 3);
 const _hoisted_18 = { class: "docs-example rounded-top p-4" };
 const _hoisted_19 = { class: "docs-example-row" };
 const _hoisted_20 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
 const _hoisted_21 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-9<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>Since 9 + 4 = 13 <span class="token entity named-entity" title="&gt;">&amp;gt;</span> 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>Subsequent columns continue along the new line.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="column-breaks" tabindex="-1">Column breaks <a class="anchor-link" href="#column-breaks" aria-hidden="true">#</a></h3><p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code>width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <code>&lt;CRow&gt;</code>s, but not every implementation method can account for this.</p>', 3);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-9<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>Since 9 + 4 = 13 <span class="token entity named-entity" title="&gt;">&amp;gt;</span> 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>Subsequent columns continue along the new line.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="column-breaks" tabindex="-1">Column breaks <a class="anchor-link" href="#column-breaks" aria-hidden="true">#</a></h3><p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code>width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <code>&lt;CRow&gt;</code>s, but not every implementation method can account for this.</p>', 3);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
 const _hoisted_26 = { class: "docs-example-row" };
 const _hoisted_27 = /* @__PURE__ */ createBaseVNode("div", { class: "w-100" }, null, -1);
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You may also apply this break at specific breakpoints with our <a href="https://coreui.io/docs/utilities/display" target="_blank" rel="noopener noreferrer">responsive display utilities</a>.</p>', 2);
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You may also apply this break at specific breakpoints with our <a href="https://coreui.io/docs/utilities/display" target="_blank" rel="noopener noreferrer">responsive display utilities</a>.</p>', 2);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
 const _hoisted_31 = { class: "docs-example-row" };
 const _hoisted_32 = /* @__PURE__ */ createBaseVNode("div", { class: "w-100 d-none d-md-block" }, null, -1);
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-100 d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reordering" tabindex="-1">Reordering <a class="anchor-link" href="#reordering" aria-hidden="true">#</a></h2><h3 id="order-props" tabindex="-1">Order props <a class="anchor-link" href="#order-props" aria-hidden="true">#</a></h3><p>Use <code>xs|sm|md|lg|xl|xxl=&quot;{ order: 1-5 }&quot;</code> props for controlling the <strong>visual order</strong> of your content. These props are responsive, so you can set the <code>order</code> by breakpoint (e.g., <code>xs=&quot;{ order: 1}&quot; md=&quot;{ order: 2}&quot;</code>). Includes support for <code>1</code> through <code>5</code> across all six grid tiers.</p>', 4);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-100 d-none d-md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reordering" tabindex="-1">Reordering <a class="anchor-link" href="#reordering" aria-hidden="true">#</a></h2><h3 id="order-props" tabindex="-1">Order props <a class="anchor-link" href="#order-props" aria-hidden="true">#</a></h3><p>Use <code>xs|sm|md|lg|xl|xxl=&quot;{ order: 1-5 }&quot;</code> props for controlling the <strong>visual order</strong> of your content. These props are responsive, so you can set the <code>order</code> by breakpoint (e.g., <code>xs=&quot;{ order: 1}&quot; md=&quot;{ order: 2}&quot;</code>). Includes support for <code>1</code> through <code>5</code> across all six grid tiers.</p>', 4);
 const _hoisted_37 = { class: "docs-example rounded-top p-4" };
 const _hoisted_38 = { class: "docs-example-row" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      First in DOM, no order applied</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Second in DOM, with a larger order</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: 1 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Third in DOM, with an order of 1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>There are also responsive <code>xs|sm|md|lg|xl|xxl=&quot;{ order: &#39;first&#39; }&quot;</code> and <code>xs|sm|md|lg|xl|xxl=&quot;{ order: &#39;last&#39; }&quot;</code> props that change the <code>order</code> of an element by applying <code>order: -1</code> and <code>order: 6</code>, respectively. These values can also be intermixed with the numbered <code>xs|sm|md|lg|xl|xxl=&quot;{ order: 1-5 }&quot;</code> values as needed.</p>', 2);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      First in DOM, no order applied</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Second in DOM, with a larger order</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: 1 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Third in DOM, with an order of 1</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>There are also responsive <code>xs|sm|md|lg|xl|xxl=&quot;{ order: &#39;first&#39; }&quot;</code> and <code>xs|sm|md|lg|xl|xxl=&quot;{ order: &#39;last&#39; }&quot;</code> props that change the <code>order</code> of an element by applying <code>order: -1</code> and <code>order: 6</code>, respectively. These values can also be intermixed with the numbered <code>xs|sm|md|lg|xl|xxl=&quot;{ order: 1-5 }&quot;</code> values as needed.</p>', 2);
 const _hoisted_41 = { class: "docs-example rounded-top p-4" };
 const _hoisted_42 = { class: "docs-example-row" };
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: &#39;last&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      First in DOM, ordered last</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Second in DOM, unordered</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: &#39;first&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Third in DOM, ordered first</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="offsetting-columns" tabindex="-1">Offsetting columns <a class="anchor-link" href="#offsetting-columns" aria-hidden="true">#</a></h3><p>You can offset grid columns in two ways: our responsive <code>xs|sm|md|lg|xl|xxl=&quot;{ offset: 0-12 }&quot;</code> grid props and our <a href="https://coreui.io/docs/utilities/spacing" target="_blank" rel="noopener noreferrer">margin utilities</a>. Grid props are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.</p><h4 id="offset-prop" tabindex="-1">Offset prop <a class="anchor-link" href="#offset-prop" aria-hidden="true">#</a></h4><p>Move columns to the right using <code>md=&quot;{ offset: * }&quot;</code> props. These props increase the left margin of a column by <code>*</code> columns. For example, <code>md=&quot;{ offset: 4 }&quot;</code> moves <code>.col-md-4</code> over four columns.</p>', 5);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: &#39;last&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      First in DOM, ordered last</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Second in DOM, unordered</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: true, order: &#39;first&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Third in DOM, ordered first</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="offsetting-columns" tabindex="-1">Offsetting columns <a class="anchor-link" href="#offsetting-columns" aria-hidden="true">#</a></h3><p>You can offset grid columns in two ways: our responsive <code>xs|sm|md|lg|xl|xxl=&quot;{ offset: 0-12 }&quot;</code> grid props and our <a href="https://coreui.io/docs/utilities/spacing" target="_blank" rel="noopener noreferrer">margin utilities</a>. Grid props are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.</p><h4 id="offset-prop" tabindex="-1">Offset prop <a class="anchor-link" href="#offset-prop" aria-hidden="true">#</a></h4><p>Move columns to the right using <code>md=&quot;{ offset: * }&quot;</code> props. These props increase the left margin of a column by <code>*</code> columns. For example, <code>md=&quot;{ offset: 4 }&quot;</code> moves <code>.col-md-4</code> over four columns.</p>', 5);
 const _hoisted_48 = { class: "docs-example rounded-top p-4" };
 const _hoisted_49 = { class: "docs-example-row" };
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 4, offset: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4 .offset-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 3, offset: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .offset-md-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 3, offset: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .offset-md-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6, offset: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-6 .offset-md-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 4, offset: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4 .offset-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 3, offset: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .offset-md-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 3, offset: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .offset-md-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6, offset: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-6 .offset-md-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_51 = { class: "docs-example rounded-top p-4" };
 const _hoisted_52 = { class: "docs-example-row" };
-const _hoisted_53 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-5 .col-md-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 5, offset: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6, offset: 0 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-6 .col-md-5 .col-lg-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 5, offset: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6, offset: 0 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="margin-utilities" tabindex="-1">Margin utilities <a class="anchor-link" href="#margin-utilities" aria-hidden="true">#</a></h4><p>You can use margin utilities like <code>.me-auto</code> to force sibling columns away from one another.</p>', 3);
+const _hoisted_53 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-5 .col-md-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 5, offset: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6, offset: 0 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-6 .col-md-5 .col-lg-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 5, offset: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6, offset: 0 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="margin-utilities" tabindex="-1">Margin utilities <a class="anchor-link" href="#margin-utilities" aria-hidden="true">#</a></h4><p>You can use margin utilities like <code>.me-auto</code> to force sibling columns away from one another.</p>', 3);
 const _hoisted_56 = { class: "docs-example rounded-top p-4" };
 const _hoisted_57 = { class: "docs-example-row" };
-const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4 .ms-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-md-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .ms-md-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-md-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .ms-md-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-auto .me-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="standalone-column-component" tabindex="-1">Standalone column component <a class="anchor-link" href="#standalone-column-component" aria-hidden="true">#</a></h2><p>The <code>&lt;CCol&gt;</code> component can also be used outside a <code>&lt;CRow&gt;</code> to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted.</p>', 3);
+const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-4 .ms-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-md-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .ms-md-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-md-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-3 .ms-md-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-auto .me-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="standalone-column-component" tabindex="-1">Standalone column component <a class="anchor-link" href="#standalone-column-component" aria-hidden="true">#</a></h2><p>The <code>&lt;CCol&gt;</code> component can also be used outside a <code>&lt;CRow&gt;</code> to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted.</p>', 3);
 const _hoisted_61 = { class: "docs-example rounded-top p-4" };
-const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light p-3 border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  .col-3: width of 25%</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>9<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light p-3 border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  .col-sm-9: width of 75% above sm breakpoint</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 6);
+const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light p-3 border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  .col-3: width of 25%</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>9<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light p-3 border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  .col-sm-9: width of 75% above sm breakpoint</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 6);
 function _sfc_render(_ctx, _cache) {
   const _component_CCol = resolveComponent("CCol");
   const _component_CRow = resolveComponent("CRow");
diff --git a/vue/docs/assets/containers.html-rXe4Oyfr.js b/vue/docs/assets/containers.html-DC6_LN_j.js
similarity index 66%
rename from vue/docs/assets/containers.html-rXe4Oyfr.js
rename to vue/docs/assets/containers.html-DC6_LN_j.js
index b43eaf16876..3187eae7a20 100644
--- a/vue/docs/assets/containers.html-rXe4Oyfr.js
+++ b/vue/docs/assets/containers.html-DC6_LN_j.js
@@ -1,12 +1,12 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-they-work" tabindex="-1">How they work <a class="anchor-link" href="#how-they-work" aria-hidden="true">#</a></h2><p>Containers are the most basic layout element in CoreUI for Vue.js and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p><p>CoreUI for Vue.js comes with three different containers:</p><ul><li><code>&lt;CContainer&gt;</code>, which sets a <code>max-width</code> at each responsive breakpoint</li><li><code>&lt;CContainer fluid&gt;</code>, which is <code>width: 100%</code> at all breakpoints</li><li><code>&lt;CContainer {sm|md|lg|xl|xxl}&gt;</code>, which is <code>width: 100%</code> until the specified breakpoint</li></ul><p>The table below illustrates how each container&#39;s <code>max-width</code> compares to the original <code>&lt;CContainer&gt;</code> and <code>&lt;CContainer fluid&gt;</code> across each breakpoint.</p><table class="table"><thead><tr><td class="border-dark"></td><th scope="col"> Extra small<br><span class="fw-normal">&lt;576px</span></th><th scope="col"> Small<br><span class="fw-normal">≥576px</span></th><th scope="col"> Medium<br><span class="fw-normal">≥768px</span></th><th scope="col"> Large<br><span class="fw-normal">≥992px</span></th><th scope="col"> X-Large<br><span class="fw-normal">≥1200px</span></th><th scope="col"> XX-Large<br><span class="fw-normal">≥1400px</span></th></tr></thead><tbody><tr><th scope="row" class="fw-normal"><code>&lt;CContainer&gt;</code></th><td class="text-body-secondary">100%</td><td>540px</td><td>720px</td><td>960px</td><td>1140px</td><td>1320px</td></tr><tr><th scope="row" class="fw-normal"><code>&lt;CContainer sm&gt;</code></th><td class="text-body-secondary">100%</td><td>540px</td><td>720px</td><td>960px</td><td>1140px</td><td>1320px</td></tr><tr><th scope="row" class="fw-normal"><code>&lt;CContainer md&gt;</code></th><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td>720px</td><td>960px</td><td>1140px</td><td>1320px</td></tr><tr><th scope="row" class="fw-normal"><code>&lt;CContainer lg&gt;</code></th><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td>960px</td><td>1140px</td><td>1320px</td></tr><tr><th scope="row" class="fw-normal"><code>&lt;CContainer xl&gt;</code></th><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td>1140px</td><td>1320px</td></tr><tr><th scope="row" class="fw-normal"><code>&lt;CContainer xxl&gt;</code></th><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td>1320px</td></tr><tr><th scope="row" class="fw-normal"><code>&lt;CContainer fluid&gt;</code></th><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td><td class="text-body-secondary">100%</td></tr></tbody></table><h2 id="default-container" tabindex="-1">Default container <a class="anchor-link" href="#default-container" aria-hidden="true">#</a></h2><p>Our default <code>&lt;CContainer&gt;</code> class is a responsive, fixed-width container, meaning its <code>max-width</code> changes at each breakpoint.</p>', 8);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Content here</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-containers" tabindex="-1">Responsive containers <a class="anchor-link" href="#responsive-containers" aria-hidden="true">#</a></h2><p>Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply <code>max-width</code>s for each of the higher breakpoints. For example, <code>&lt;CContainer sm&gt;</code> is 100% wide to start until the <code>sm</code> breakpoint is reached, where it will scale up with <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>.</p>', 3);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Content here</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-containers" tabindex="-1">Responsive containers <a class="anchor-link" href="#responsive-containers" aria-hidden="true">#</a></h2><p>Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply <code>max-width</code>s for each of the higher breakpoints. For example, <code>&lt;CContainer sm&gt;</code> is 100% wide to start until the <code>sm</code> breakpoint is reached, where it will scale up with <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>.</p>', 3);
 const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>100% wide until small breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">md</span><span class="token punctuation">&gt;</span></span>100% wide until medium breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">lg</span><span class="token punctuation">&gt;</span></span>100% wide until large breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">xl</span><span class="token punctuation">&gt;</span></span>100% wide until extra large breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">xxl</span><span class="token punctuation">&gt;</span></span>100% wide until extra extra large breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="fluid-containers" tabindex="-1">Fluid containers <a class="anchor-link" href="#fluid-containers" aria-hidden="true">#</a></h2><p>Use <code>&lt;CContainer fluid&gt;</code> for a full width container, spanning the entire width of the viewport.</p>', 3);
+const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>100% wide until small breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">md</span><span class="token punctuation">&gt;</span></span>100% wide until medium breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">lg</span><span class="token punctuation">&gt;</span></span>100% wide until large breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">xl</span><span class="token punctuation">&gt;</span></span>100% wide until extra large breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">xxl</span><span class="token punctuation">&gt;</span></span>100% wide until extra extra large breakpoint<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="fluid-containers" tabindex="-1">Fluid containers <a class="anchor-link" href="#fluid-containers" aria-hidden="true">#</a></h2><p>Use <code>&lt;CContainer fluid&gt;</code> for a full width container, spanning the entire width of the viewport.</p>', 3);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Content here</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 6);
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Content here</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 6);
 function _sfc_render(_ctx, _cache) {
   const _component_CContainer = resolveComponent("CContainer");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/contents.html-CKe33LGP.js b/vue/docs/assets/contents.html-CKe33LGP.js
new file mode 100644
index 00000000000..1cd681421c9
--- /dev/null
+++ b/vue/docs/assets/contents.html-CKe33LGP.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="project-structure" tabindex="-1">Project structure <a class="anchor-link" href="#project-structure" aria-hidden="true">#</a></h2><p>Once downloaded, unzip the compressed folder and you&#39;ll see something like this:</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">coreui-vue-admin-template/</span>\n<span class="line">├── public/</span>\n<span class="line">├── src/</span>\n<span class="line">│   ├── assets/</span>\n<span class="line">│   │   ├── brand/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── images/</span>\n<span class="line">│   ├── components/</span>\n<span class="line">│   ├── layout/</span>\n<span class="line">│   ├── router/</span>\n<span class="line">│   ├── styles/</span>\n<span class="line">│   ├── views/</span>\n<span class="line">│   │   ├── base/</span>\n<span class="line">│   │   ├── buttons/</span>\n<span class="line">│   │   ├── css/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── notifications/</span>\n<span class="line">│   ├── App.vue</span>\n<span class="line">│   ├── _nav.js</span>\n<span class="line">│   └── main.js</span>\n<span class="line">├── tests/</span>\n<span class="line">├── ...</span>\n<span class="line">├── babel.config.js</span>\n<span class="line">├── cypress.json</span>\n<span class="line">├── jest.config.js</span>\n<span class="line">├── jsconfig.json</span>\n<span class="line">├── package.json</span>\n<span class="line">└── vue.config.js</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>TypeScript based project</strong></p><p>TypeScript project is available only in PRO version.</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">coreui-vue-admin-template/</span>\n<span class="line">├── public/</span>\n<span class="line">├── src/</span>\n<span class="line">│   ├── assets/</span>\n<span class="line">│   │   ├── brand/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── images/</span>\n<span class="line">│   ├── components/</span>\n<span class="line">│   ├── layout/</span>\n<span class="line">│   ├── router/</span>\n<span class="line">│   ├── styles/</span>\n<span class="line">│   ├── views/</span>\n<span class="line">│   │   ├── base/</span>\n<span class="line">│   │   ├── buttons/</span>\n<span class="line">│   │   ├── css/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── notifications/</span>\n<span class="line">│   ├── App.vue</span>\n<span class="line">│   ├── _nav.ts</span>\n<span class="line">│   ├── main.ts</span>\n<span class="line">│   └── shims-vue.d.ts</span>\n<span class="line">├── tests/</span>\n<span class="line">├── ...</span>\n<span class="line">├── babel.config.js</span>\n<span class="line">├── cypress.json</span>\n<span class="line">├── jest.config.js</span>\n<span class="line">├── package.json</span>\n<span class="line">├── tsconfig.json</span>\n<span class="line">└── vue.config.js</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>This is the most basic form of CoreUI Vue Admin Templates.</p>', 7);
+const _hoisted_8 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_8);
+}
+const contents_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "contents.html.vue"]]);
+const data = JSON.parse(`{"path":"/templates/contents.html","title":"Vue templates contents","lang":"en-US","frontmatter":{"title":"Vue templates contents","name":"Vue templates contents","description":"Discover what's included in CoreUI Vue Admin Template, including our precompiled and source code flavors.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/contents.html"}]]},"headers":[{"level":2,"title":"Project structure","slug":"project-structure","link":"#project-structure","children":[]}],"filePathRelative":"templates/contents.md"}`);
+export {
+  contents_html as comp,
+  data
+};
diff --git a/vue/docs/assets/contents.html-vtL6Xk2K.js b/vue/docs/assets/contents.html-vtL6Xk2K.js
deleted file mode 100644
index 4135024ae5d..00000000000
--- a/vue/docs/assets/contents.html-vtL6Xk2K.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="project-structure" tabindex="-1">Project structure <a class="anchor-link" href="#project-structure" aria-hidden="true">#</a></h2><p>Once downloaded, unzip the compressed folder and you&#39;ll see something like this:</p><div class="language-text line-numbers-mode" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">coreui-vue-admin-template/</span>\n<span class="line">├── public/</span>\n<span class="line">├── src/</span>\n<span class="line">│   ├── assets/</span>\n<span class="line">│   │   ├── brand/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── images/</span>\n<span class="line">│   ├── components/</span>\n<span class="line">│   ├── layout/</span>\n<span class="line">│   ├── router/</span>\n<span class="line">│   ├── styles/</span>\n<span class="line">│   ├── views/</span>\n<span class="line">│   │   ├── base/</span>\n<span class="line">│   │   ├── buttons/</span>\n<span class="line">│   │   ├── css/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── notifications/</span>\n<span class="line">│   ├── App.vue</span>\n<span class="line">│   ├── _nav.js</span>\n<span class="line">│   └── main.js</span>\n<span class="line">├── tests/</span>\n<span class="line">├── ...</span>\n<span class="line">├── babel.config.js</span>\n<span class="line">├── cypress.json</span>\n<span class="line">├── jest.config.js</span>\n<span class="line">├── jsconfig.json</span>\n<span class="line">├── package.json</span>\n<span class="line">└── vue.config.js</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>TypeScript based project</strong></p><p>TypeScript project is available only in PRO version.</p><div class="language-text line-numbers-mode" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">coreui-vue-admin-template/</span>\n<span class="line">├── public/</span>\n<span class="line">├── src/</span>\n<span class="line">│   ├── assets/</span>\n<span class="line">│   │   ├── brand/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── images/</span>\n<span class="line">│   ├── components/</span>\n<span class="line">│   ├── layout/</span>\n<span class="line">│   ├── router/</span>\n<span class="line">│   ├── styles/</span>\n<span class="line">│   ├── views/</span>\n<span class="line">│   │   ├── base/</span>\n<span class="line">│   │   ├── buttons/</span>\n<span class="line">│   │   ├── css/</span>\n<span class="line">│   │   ├── icons/</span>\n<span class="line">│   │   └── notifications/</span>\n<span class="line">│   ├── App.vue</span>\n<span class="line">│   ├── _nav.ts</span>\n<span class="line">│   ├── main.ts</span>\n<span class="line">│   └── shims-vue.d.ts</span>\n<span class="line">├── tests/</span>\n<span class="line">├── ...</span>\n<span class="line">├── babel.config.js</span>\n<span class="line">├── cypress.json</span>\n<span class="line">├── jest.config.js</span>\n<span class="line">├── package.json</span>\n<span class="line">├── tsconfig.json</span>\n<span class="line">└── vue.config.js</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>This is the most basic form of CoreUI Vue Admin Templates.</p>', 7);
-const _hoisted_8 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_8);
-}
-const contents_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "contents.html.vue"]]);
-const data = JSON.parse(`{"path":"/templates/contents.html","title":"Vue templates contents","lang":"en-US","frontmatter":{"title":"Vue templates contents","name":"Vue templates contents","description":"Discover what's included in CoreUI Vue Admin Template, including our precompiled and source code flavors.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/contents.html"}]]},"headers":[{"level":2,"title":"Project structure","slug":"project-structure","link":"#project-structure","children":[]}],"filePathRelative":"templates/contents.md"}`);
-export {
-  contents_html as comp,
-  data
-};
diff --git a/vue/docs/assets/css-variables.html-D6oXr2T8.js b/vue/docs/assets/css-variables.html-D6oXr2T8.js
deleted file mode 100644
index 516ac6648eb..00000000000
--- a/vue/docs/assets/css-variables.html-D6oXr2T8.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>CoreUI includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank" rel="noopener noreferrer">CSS custom properties (variables)</a> in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser&#39;s inspector, a code sandbox, or general prototyping.</p><p><strong>All our custom properties are prefixed with <code>cui-</code></strong> to avoid conflicts with third party CSS.</p><h2 id="root-variables" tabindex="-1">Root variables <a class="anchor-link" href="#root-variables" aria-hidden="true">#</a></h2><p>Here are the variables we include (note that the <code>:root</code> is required) that can be accessed anywhere CoreUI&#39;s CSS is loaded. They&#39;re located in our <code>_root.scss</code> file and included in our compiled dist files.</p><div class="language-css line-numbers-mode" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">:root</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">--cui-blue</span><span class="token punctuation">:</span> #0d6efd<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-indigo</span><span class="token punctuation">:</span> #6610f2<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-purple</span><span class="token punctuation">:</span> #6f42c1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-pink</span><span class="token punctuation">:</span> #d63384<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-red</span><span class="token punctuation">:</span> #dc3545<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-orange</span><span class="token punctuation">:</span> #fd7e14<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-yellow</span><span class="token punctuation">:</span> #ffc107<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-green</span><span class="token punctuation">:</span> #198754<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-teal</span><span class="token punctuation">:</span> #20c997<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-cyan</span><span class="token punctuation">:</span> #0dcaf0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-black</span><span class="token punctuation">:</span> #000015<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-white</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray</span><span class="token punctuation">:</span> #8a93a2<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-dark</span><span class="token punctuation">:</span> #636f83<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-100</span><span class="token punctuation">:</span> #ebedef<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-200</span><span class="token punctuation">:</span> #d8dbe0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-300</span><span class="token punctuation">:</span> #c4c9d0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-400</span><span class="token punctuation">:</span> #b1b7c1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-500</span><span class="token punctuation">:</span> #9da5b1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-600</span><span class="token punctuation">:</span> #8a93a2<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-700</span><span class="token punctuation">:</span> #768192<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-800</span><span class="token punctuation">:</span> #636f83<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-900</span><span class="token punctuation">:</span> #4f5d73<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-primary</span><span class="token punctuation">:</span> #321fdb<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-secondary</span><span class="token punctuation">:</span> #9da5b1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-success</span><span class="token punctuation">:</span> #2eb85c<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-info</span><span class="token punctuation">:</span> #39f<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-warning</span><span class="token punctuation">:</span> #f9b115<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-danger</span><span class="token punctuation">:</span> #e55353<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-light</span><span class="token punctuation">:</span> #ebedef<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-dark</span><span class="token punctuation">:</span> #4f5d73<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-primary-rgb</span><span class="token punctuation">:</span> 50<span class="token punctuation">,</span> 31<span class="token punctuation">,</span> 219<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-secondary-rgb</span><span class="token punctuation">:</span> 157<span class="token punctuation">,</span> 165<span class="token punctuation">,</span> 177<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-success-rgb</span><span class="token punctuation">:</span> 46<span class="token punctuation">,</span> 184<span class="token punctuation">,</span> 92<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-info-rgb</span><span class="token punctuation">:</span> 51<span class="token punctuation">,</span> 153<span class="token punctuation">,</span> 255<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-warning-rgb</span><span class="token punctuation">:</span> 249<span class="token punctuation">,</span> 177<span class="token punctuation">,</span> 21<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-danger-rgb</span><span class="token punctuation">:</span> 229<span class="token punctuation">,</span> 83<span class="token punctuation">,</span> 83<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-light-rgb</span><span class="token punctuation">:</span> 235<span class="token punctuation">,</span> 237<span class="token punctuation">,</span> 239<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-dark-rgb</span><span class="token punctuation">:</span> 79<span class="token punctuation">,</span> 93<span class="token punctuation">,</span> 115<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-white-rgb</span><span class="token punctuation">:</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-black-rgb</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 21<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-color-rgb</span><span class="token punctuation">:</span> 44<span class="token punctuation">,</span> 56<span class="token punctuation">,</span> 74<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-bg-rgb</span><span class="token punctuation">:</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-font-sans-serif</span><span class="token punctuation">:</span> system-ui<span class="token punctuation">,</span> -apple-system<span class="token punctuation">,</span> <span class="token string">&quot;Segoe UI&quot;</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> <span class="token string">&quot;Helvetica Neue&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Noto Sans&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Liberation Sans&quot;</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">,</span> <span class="token string">&quot;Apple Color Emoji&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Segoe UI Emoji&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Segoe UI Symbol&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Noto Color Emoji&quot;</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-font-monospace</span><span class="token punctuation">:</span> SFMono-Regular<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> Consolas<span class="token punctuation">,</span> <span class="token string">&quot;Liberation Mono&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Courier New&quot;</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gradient</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>180deg<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.15<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--cui-font-sans-serif<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>44<span class="token punctuation">,</span> 56<span class="token punctuation">,</span> 74<span class="token punctuation">,</span> 0.95<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-color</span><span class="token punctuation">:</span> #d8dbe0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-color-translucent</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 21<span class="token punctuation">,</span> 0.175<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius</span><span class="token punctuation">:</span> 0.375rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-sm</span><span class="token punctuation">:</span> 0.25rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-lg</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-xl</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-2xl</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-pill</span><span class="token punctuation">:</span> 50rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-heading-color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-link-color</span><span class="token punctuation">:</span> #321fdb<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-link-hover-color</span><span class="token punctuation">:</span> #2819af<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-code-color</span><span class="token punctuation">:</span> #d63384<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-highlight-bg</span><span class="token punctuation">:</span> #fff3cd<span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="component-variables" tabindex="-1">Component variables <a class="anchor-link" href="#component-variables" aria-hidden="true">#</a></h2><p>CoreUI is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren&#39;t inherited in places like nested tables, and allow some basic restyling and extending of CoreUI components after Sass compilation.</p><p>Whenever possible, we&#39;ll assign CSS variables at the base component level (e.g., <code>.navbar</code> for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.</p><h2 id="prefix" tabindex="-1">Prefix <a class="anchor-link" href="#prefix" aria-hidden="true">#</a></h2><p>Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the <code>--</code> that&#39;s required on every CSS variable.</p><p>Customize the prefix via the <code>$prefix</code> Sass variable. By default, it&#39;s set to <code>cui-</code> (note the trailing dash).</p><h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples" aria-hidden="true">#</a></h2><p>CSS variables offer similar flexibility to Sass&#39;s variables, but without the need for compilation before being served to the browser. For example, here we&#39;re resetting our page&#39;s font and link styles with CSS variables.</p><div class="language-css line-numbers-mode" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">body</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">font</span><span class="token punctuation">:</span> 1rem/1.5 <span class="token function">var</span><span class="token punctuation">(</span>--cui-font-sans-serif<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token selector">a</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--cui-blue<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="grid-breakpoints" tabindex="-1">Grid breakpoints <a class="anchor-link" href="#grid-breakpoints" aria-hidden="true">#</a></h2><p>While we include our grid breakpoints as CSS variables (except for <code>xs</code>), be aware that <strong>CSS variables do not work in media queries</strong>. This is by design in the CSS spec for variables, but may change in coming years with support for <code>env()</code> variables. Check out <a href="https://stackoverflow.com/a/47212942" target="_blank" rel="noopener noreferrer">this Stack Overflow answer</a> for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.</p>', 16);
-const _hoisted_17 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_17);
-}
-const cssVariables_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "css-variables.html.vue"]]);
-const data = JSON.parse(`{"path":"/customize/css-variables.html","title":"CSS variables","lang":"en-US","frontmatter":{"title":"CSS variables","name":"CSS variables","description":"Use CoreUI's CSS custom properties for fast and forward-looking design and development.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/customize/css-variables.html"}]]},"headers":[{"level":2,"title":"Root variables","slug":"root-variables","link":"#root-variables","children":[]},{"level":2,"title":"Component variables","slug":"component-variables","link":"#component-variables","children":[]},{"level":2,"title":"Prefix","slug":"prefix","link":"#prefix","children":[]},{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[]},{"level":2,"title":"Grid breakpoints","slug":"grid-breakpoints","link":"#grid-breakpoints","children":[]}],"filePathRelative":"customize/css-variables.md"}`);
-export {
-  cssVariables_html as comp,
-  data
-};
diff --git a/vue/docs/assets/css-variables.html-UJYgUBzW.js b/vue/docs/assets/css-variables.html-UJYgUBzW.js
new file mode 100644
index 00000000000..1c772c630f7
--- /dev/null
+++ b/vue/docs/assets/css-variables.html-UJYgUBzW.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>CoreUI includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank" rel="noopener noreferrer">CSS custom properties (variables)</a> in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser&#39;s inspector, a code sandbox, or general prototyping.</p><p><strong>All our custom properties are prefixed with <code>cui-</code></strong> to avoid conflicts with third party CSS.</p><h2 id="root-variables" tabindex="-1">Root variables <a class="anchor-link" href="#root-variables" aria-hidden="true">#</a></h2><p>Here are the variables we include (note that the <code>:root</code> is required) that can be accessed anywhere CoreUI&#39;s CSS is loaded. They&#39;re located in our <code>_root.scss</code> file and included in our compiled dist files.</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">:root</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">--cui-blue</span><span class="token punctuation">:</span> #0d6efd<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-indigo</span><span class="token punctuation">:</span> #6610f2<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-purple</span><span class="token punctuation">:</span> #6f42c1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-pink</span><span class="token punctuation">:</span> #d63384<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-red</span><span class="token punctuation">:</span> #dc3545<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-orange</span><span class="token punctuation">:</span> #fd7e14<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-yellow</span><span class="token punctuation">:</span> #ffc107<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-green</span><span class="token punctuation">:</span> #198754<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-teal</span><span class="token punctuation">:</span> #20c997<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-cyan</span><span class="token punctuation">:</span> #0dcaf0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-black</span><span class="token punctuation">:</span> #000015<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-white</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray</span><span class="token punctuation">:</span> #8a93a2<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-dark</span><span class="token punctuation">:</span> #636f83<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-100</span><span class="token punctuation">:</span> #ebedef<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-200</span><span class="token punctuation">:</span> #d8dbe0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-300</span><span class="token punctuation">:</span> #c4c9d0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-400</span><span class="token punctuation">:</span> #b1b7c1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-500</span><span class="token punctuation">:</span> #9da5b1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-600</span><span class="token punctuation">:</span> #8a93a2<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-700</span><span class="token punctuation">:</span> #768192<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-800</span><span class="token punctuation">:</span> #636f83<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gray-900</span><span class="token punctuation">:</span> #4f5d73<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-primary</span><span class="token punctuation">:</span> #321fdb<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-secondary</span><span class="token punctuation">:</span> #9da5b1<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-success</span><span class="token punctuation">:</span> #2eb85c<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-info</span><span class="token punctuation">:</span> #39f<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-warning</span><span class="token punctuation">:</span> #f9b115<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-danger</span><span class="token punctuation">:</span> #e55353<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-light</span><span class="token punctuation">:</span> #ebedef<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-dark</span><span class="token punctuation">:</span> #4f5d73<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-primary-rgb</span><span class="token punctuation">:</span> 50<span class="token punctuation">,</span> 31<span class="token punctuation">,</span> 219<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-secondary-rgb</span><span class="token punctuation">:</span> 157<span class="token punctuation">,</span> 165<span class="token punctuation">,</span> 177<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-success-rgb</span><span class="token punctuation">:</span> 46<span class="token punctuation">,</span> 184<span class="token punctuation">,</span> 92<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-info-rgb</span><span class="token punctuation">:</span> 51<span class="token punctuation">,</span> 153<span class="token punctuation">,</span> 255<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-warning-rgb</span><span class="token punctuation">:</span> 249<span class="token punctuation">,</span> 177<span class="token punctuation">,</span> 21<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-danger-rgb</span><span class="token punctuation">:</span> 229<span class="token punctuation">,</span> 83<span class="token punctuation">,</span> 83<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-light-rgb</span><span class="token punctuation">:</span> 235<span class="token punctuation">,</span> 237<span class="token punctuation">,</span> 239<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-dark-rgb</span><span class="token punctuation">:</span> 79<span class="token punctuation">,</span> 93<span class="token punctuation">,</span> 115<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-white-rgb</span><span class="token punctuation">:</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-black-rgb</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 21<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-color-rgb</span><span class="token punctuation">:</span> 44<span class="token punctuation">,</span> 56<span class="token punctuation">,</span> 74<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-bg-rgb</span><span class="token punctuation">:</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-font-sans-serif</span><span class="token punctuation">:</span> system-ui<span class="token punctuation">,</span> -apple-system<span class="token punctuation">,</span> <span class="token string">&quot;Segoe UI&quot;</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> <span class="token string">&quot;Helvetica Neue&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Noto Sans&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Liberation Sans&quot;</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">,</span> <span class="token string">&quot;Apple Color Emoji&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Segoe UI Emoji&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Segoe UI Symbol&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Noto Color Emoji&quot;</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-font-monospace</span><span class="token punctuation">:</span> SFMono-Regular<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> Consolas<span class="token punctuation">,</span> <span class="token string">&quot;Liberation Mono&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Courier New&quot;</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-gradient</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>180deg<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.15<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--cui-font-sans-serif<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>44<span class="token punctuation">,</span> 56<span class="token punctuation">,</span> 74<span class="token punctuation">,</span> 0.95<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-body-bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-color</span><span class="token punctuation">:</span> #d8dbe0<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-color-translucent</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 21<span class="token punctuation">,</span> 0.175<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius</span><span class="token punctuation">:</span> 0.375rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-sm</span><span class="token punctuation">:</span> 0.25rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-lg</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-xl</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-2xl</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-border-radius-pill</span><span class="token punctuation">:</span> 50rem<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-heading-color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-link-color</span><span class="token punctuation">:</span> #321fdb<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-link-hover-color</span><span class="token punctuation">:</span> #2819af<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-code-color</span><span class="token punctuation">:</span> #d63384<span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">--cui-highlight-bg</span><span class="token punctuation">:</span> #fff3cd<span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="component-variables" tabindex="-1">Component variables <a class="anchor-link" href="#component-variables" aria-hidden="true">#</a></h2><p>CoreUI is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren&#39;t inherited in places like nested tables, and allow some basic restyling and extending of CoreUI components after Sass compilation.</p><p>Whenever possible, we&#39;ll assign CSS variables at the base component level (e.g., <code>.navbar</code> for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.</p><h2 id="prefix" tabindex="-1">Prefix <a class="anchor-link" href="#prefix" aria-hidden="true">#</a></h2><p>Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the <code>--</code> that&#39;s required on every CSS variable.</p><p>Customize the prefix via the <code>$prefix</code> Sass variable. By default, it&#39;s set to <code>cui-</code> (note the trailing dash).</p><h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples" aria-hidden="true">#</a></h2><p>CSS variables offer similar flexibility to Sass&#39;s variables, but without the need for compilation before being served to the browser. For example, here we&#39;re resetting our page&#39;s font and link styles with CSS variables.</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">body</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">font</span><span class="token punctuation">:</span> 1rem/1.5 <span class="token function">var</span><span class="token punctuation">(</span>--cui-font-sans-serif<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token selector">a</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--cui-blue<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="grid-breakpoints" tabindex="-1">Grid breakpoints <a class="anchor-link" href="#grid-breakpoints" aria-hidden="true">#</a></h2><p>While we include our grid breakpoints as CSS variables (except for <code>xs</code>), be aware that <strong>CSS variables do not work in media queries</strong>. This is by design in the CSS spec for variables, but may change in coming years with support for <code>env()</code> variables. Check out <a href="https://stackoverflow.com/a/47212942" target="_blank" rel="noopener noreferrer">this Stack Overflow answer</a> for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.</p>', 16);
+const _hoisted_17 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_17);
+}
+const cssVariables_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "css-variables.html.vue"]]);
+const data = JSON.parse(`{"path":"/customize/css-variables.html","title":"CSS variables","lang":"en-US","frontmatter":{"title":"CSS variables","name":"CSS variables","description":"Use CoreUI's CSS custom properties for fast and forward-looking design and development.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/customize/css-variables.html"}]]},"headers":[{"level":2,"title":"Root variables","slug":"root-variables","link":"#root-variables","children":[]},{"level":2,"title":"Component variables","slug":"component-variables","link":"#component-variables","children":[]},{"level":2,"title":"Prefix","slug":"prefix","link":"#prefix","children":[]},{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[]},{"level":2,"title":"Grid breakpoints","slug":"grid-breakpoints","link":"#grid-breakpoints","children":[]}],"filePathRelative":"customize/css-variables.md"}`);
+export {
+  cssVariables_html as comp,
+  data
+};
diff --git a/vue/docs/assets/customize.html-Dzo1Iup1.js b/vue/docs/assets/customize.html-CNlse-Z8.js
similarity index 60%
rename from vue/docs/assets/customize.html-Dzo1Iup1.js
rename to vue/docs/assets/customize.html-CNlse-Z8.js
index c0d02de6a66..ec0b807f095 100644
--- a/vue/docs/assets/customize.html-Dzo1Iup1.js
+++ b/vue/docs/assets/customize.html-CNlse-Z8.js
@@ -1,11 +1,11 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, e as createTextVNode, b as createVNode, d as withCtx, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, f as createTextVNode, b as createVNode, d as withCtx, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>There are multiple ways to customize CoreUI for Vue. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for Vue you&#39;re using, browser support, and more.</p><p>Our two preferred methods are:</p><ol><li>You can extend our source files.</li><li>You can override CoreUI’s styles.</li></ol><h2 id="file-structure" tabindex="-1">File structure <a class="anchor-link" href="#file-structure" aria-hidden="true">#</a></h2><p>Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.</p><p>Whenever possible, avoid modifying CoreUI&#39;s core files. For Sass, that means creating your own stylesheet that imports CoreUI for Vue so you can modify and extend it. Assuming you&#39;re using a package manager like npm, you&#39;ll have a file structure that looks like this:</p><div class="language-text line-numbers-mode" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── ...</span>\n<span class="line">├── node_modules/</span>\n<span class="line">│   ├── @coreui/coreui</span>\n<span class="line">│   │   ├── scss</span>\n<span class="line">│   │   └── ...</span>\n<span class="line">│   └── @coreui/vue</span>\n<span class="line">│       └── ...</span>\n<span class="line">├── src</span>\n<span class="line">│   └── scss</span>\n<span class="line">│       ├── _custom.scss</span>\n<span class="line">│       ├── ...</span>\n<span class="line">│       ├── _variables.scss</span>\n<span class="line">│       └── ...</span>\n<span class="line">└── ...</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you use CoreUI PRO version.</p><div class="language-text line-numbers-mode" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── ...</span>\n<span class="line">├── node_modules/</span>\n<span class="line">│   ├── @coreui/coreui-pro </span>\n<span class="line">│   │   ├── scss</span>\n<span class="line">│   │   └── ...</span>\n<span class="line">│   └── @coreui/vue-pro</span>\n<span class="line">│       └── ...</span>\n<span class="line">├── src</span>\n<span class="line">│   └── scss</span>\n<span class="line">│       ├── _custom.scss</span>\n<span class="line">│       ├── ...</span>\n<span class="line">│       ├── _variables.scss</span>\n<span class="line">│       └── ...</span>\n<span class="line">└── ...</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="variable-defaults" tabindex="-1">Variable defaults <a class="anchor-link" href="#variable-defaults" aria-hidden="true">#</a></h2><p>Every Sass variable in CoreUI for Vue includes the <code>!default</code> flag allowing you to override the variable&#39;s default value in your own Sass without modifying CoreUI&#39;s source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won&#39;t be re-assigned by the default values in CoreUI.</p>', 12);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>There are multiple ways to customize CoreUI for Vue. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for Vue you&#39;re using, browser support, and more.</p><p>Our two preferred methods are:</p><ol><li>You can extend our source files.</li><li>You can override CoreUI’s styles.</li></ol><h2 id="file-structure" tabindex="-1">File structure <a class="anchor-link" href="#file-structure" aria-hidden="true">#</a></h2><p>Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.</p><p>Whenever possible, avoid modifying CoreUI&#39;s core files. For Sass, that means creating your own stylesheet that imports CoreUI for Vue so you can modify and extend it. Assuming you&#39;re using a package manager like npm, you&#39;ll have a file structure that looks like this:</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── ...</span>\n<span class="line">├── node_modules/</span>\n<span class="line">│   ├── @coreui/coreui</span>\n<span class="line">│   │   ├── scss</span>\n<span class="line">│   │   └── ...</span>\n<span class="line">│   └── @coreui/vue</span>\n<span class="line">│       └── ...</span>\n<span class="line">├── src</span>\n<span class="line">│   └── scss</span>\n<span class="line">│       ├── _custom.scss</span>\n<span class="line">│       ├── ...</span>\n<span class="line">│       ├── _variables.scss</span>\n<span class="line">│       └── ...</span>\n<span class="line">└── ...</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you use CoreUI PRO version.</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── ...</span>\n<span class="line">├── node_modules/</span>\n<span class="line">│   ├── @coreui/coreui-pro </span>\n<span class="line">│   │   ├── scss</span>\n<span class="line">│   │   └── ...</span>\n<span class="line">│   └── @coreui/vue-pro</span>\n<span class="line">│       └── ...</span>\n<span class="line">├── src</span>\n<span class="line">│   └── scss</span>\n<span class="line">│       ├── _custom.scss</span>\n<span class="line">│       ├── ...</span>\n<span class="line">│       ├── _variables.scss</span>\n<span class="line">│       └── ...</span>\n<span class="line">└── ...</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="variable-defaults" tabindex="-1">Variable defaults <a class="anchor-link" href="#variable-defaults" aria-hidden="true">#</a></h2><p>Every Sass variable in CoreUI for Vue includes the <code>!default</code> flag allowing you to override the variable&#39;s default value in your own Sass without modifying CoreUI&#39;s source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won&#39;t be re-assigned by the default values in CoreUI.</p>', 12);
 const _hoisted_13 = /* @__PURE__ */ createBaseVNode("code", null, "node_modules/@coreui/coreui/scss/_variables.scss", -1);
 const _hoisted_14 = /* @__PURE__ */ createBaseVNode("code", null, "node_modules/@coreui/coreui-pro/scss/_variables.scss", -1);
 const _hoisted_15 = /* @__PURE__ */ createBaseVNode("code", null, "null", -1);
 const _hoisted_16 = /* @__PURE__ */ createBaseVNode("strong", null, "Customizing", -1);
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<p>Here&#39;s an example that changes the <code>background-color</code> and <code>color</code> for the <code>&lt;body&gt;</code> when importing and compiling CoreUI for Vue via npm:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// _variables.scss</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Default variable overrides</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-bg</span></span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-color</span></span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-styles-and-overrides" tabindex="-1">Custom styles and overrides <a class="anchor-link" href="#custom-styles-and-overrides" aria-hidden="true">#</a></h2><p>In your <code>custom.scss</code>, you can put custom code for CoreUI&#39;s components or your own styles.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// _custom.scss</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Additional custom code here</span></span>\n<span class="line"><span class="token selector">.custom-component </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #222<span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 5);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<p>Here&#39;s an example that changes the <code>background-color</code> and <code>color</code> for the <code>&lt;body&gt;</code> when importing and compiling CoreUI for Vue via npm:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// _variables.scss</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Default variable overrides</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-bg</span></span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-color</span></span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-styles-and-overrides" tabindex="-1">Custom styles and overrides <a class="anchor-link" href="#custom-styles-and-overrides" aria-hidden="true">#</a></h2><p>In your <code>custom.scss</code>, you can put custom code for CoreUI&#39;s components or your own styles.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// _custom.scss</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Additional custom code here</span></span>\n<span class="line"><span class="token selector">.custom-component </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #222<span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 5);
 function _sfc_render(_ctx, _cache) {
   const _component_RouteLink = resolveComponent("RouteLink");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/date-picker.html-BgpVpDIS.js b/vue/docs/assets/date-picker.html-BgpVpDIS.js
deleted file mode 100644
index 7a2224aea1d..00000000000
--- a/vue/docs/assets/date-picker.html-BgpVpDIS.js
+++ /dev/null
@@ -1,478 +0,0 @@
-import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, t as toDisplayString, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
-import { f as format, p as parse, e as es } from "./es-C71wN8BW.js";
-const _sfc_main = {
-  setup() {
-    const vDate = ref(new Date(2022, 2, 1));
-    const options = {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      weekday: "long"
-    };
-    const calendarDate = new Date(2022, 2, 1);
-    const disabledDates = [
-      [new Date(2022, 2, 4), new Date(2022, 2, 7)],
-      new Date(2022, 2, 16),
-      new Date(2022, 3, 16),
-      [new Date(2022, 4, 2), new Date(2022, 4, 8)]
-    ];
-    const maxDate = new Date(2022, 5, 0);
-    const minDate = new Date(2022, 1, 1);
-    return {
-      format,
-      parse,
-      es,
-      vDate,
-      options,
-      calendarDate,
-      disabledDates,
-      maxDate,
-      minDate
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about" aria-hidden="true">#</a></h2><p>This component, provided by CoreUI for Vue.js, offers a user-friendly interface and various customization options to ensure an excellent user experience.</p><p>With its responsive design and support for all modern browsers, the Vue Date Picker Component can be easily integrated into any application. The component comes with an array of styling options, including color, size, and shape, that can be easily adjusted to fit the application&#39;s design.</p><p>The Vue Date Picker Component is also fully customizable, allowing developers to tailor the component to their specific needs. With its set of APIs, developers can control the default value, visibility, and date range of the component.</p><p>One of the standout features of the Vue Date Picker Component is its accessibility. CoreUI has ensured that the component is fully compliant with the Web Content Accessibility Guidelines (WCAG), making it accessible to all users. The component supports keyboard navigation and screen readers, ensuring that users with disabilities can also benefit from its functionality.</p><h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Below is an example of a basic Vue DatePicker.</p><h3 id="days" tabindex="-1">Days <a class="anchor-link" href="#days" aria-hidden="true">#</a></h3><p>Basic examples demonstrating how to pick dates using the Vue Date Picker Component.</p>', 9);
-const _hoisted_10 = { class: "docs-example rounded-top p-4" };
-const _hoisted_11 = { class: "row" };
-const _hoisted_12 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
-const _hoisted_13 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/2/16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h4><p>By default, <code>&lt;CDatPicker&gt;</code> returns <code>date</code> as a <code>Date</code> object. If no date is selected, <code>&lt;CDatPicker&gt;</code> returns <code>null</code>.</p>', 3);
-const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = { class: "row mb-3" };
-const _hoisted_19 = { class: "col-lg-6" };
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-model:</span>date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vDate<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{ vDate &amp;&amp; vDate.toLocaleDateString([], options) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> vDate <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">month</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">day</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">weekday</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        vDate<span class="token punctuation">,</span></span>\n<span class="line">        options</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker" aria-hidden="true">#</a></h4><p>In addition to supporting date selection, our Vue DatePicker component also includes a TimePicker feature that allows users to select a specific time of day. Vue TimePicker can be enabled by passing a <code>timepicker</code> prop to the <code>&lt;CDatePicker/&gt;</code> component</p>', 3);
-const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = { class: "row" };
-const _hoisted_25 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
-const _hoisted_26 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2023/03/15 02:22:13 PM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-footer" tabindex="-1">With footer <a class="anchor-link" href="#with-footer" aria-hidden="true">#</a></h4><p>Here is an example with the additional footer. The footer can be useful for displaying additional information or actions related to the selected date, such as &quot;Today&quot; or &quot;Clear&quot; buttons. The footer component is fully customizable and can be styled to match the rest of the application.</p>', 3);
-const _hoisted_30 = { class: "docs-example rounded-top p-4" };
-const _hoisted_31 = { class: "row" };
-const _hoisted_32 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
-const _hoisted_33 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/2/16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="weeks" tabindex="-1">Weeks <a class="anchor-link" href="#weeks" aria-hidden="true">#</a></h3><p>Illustration of week selection using the Vue Date Picker, including week number display.</p>', 3);
-const _hoisted_37 = { class: "docs-example rounded-top p-4" };
-const _hoisted_38 = { class: "row" };
-const _hoisted_39 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
-const _hoisted_40 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Week Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span> <span class="token attr-name">showWeekNumber</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2025W07<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Week Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span> <span class="token attr-name">showWeekNumber</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="months" tabindex="-1">Months <a class="anchor-link" href="#months" aria-hidden="true">#</a></h3><p>Selecting whole months with the Vue Date Picker Component.</p>', 3);
-const _hoisted_44 = { class: "docs-example rounded-top p-4" };
-const _hoisted_45 = { class: "row" };
-const _hoisted_46 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
-const _hoisted_47 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Month Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022-8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Month Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="years" tabindex="-1">Years <a class="anchor-link" href="#years" aria-hidden="true">#</a></h3><p>Picking years using the Vue Date Picker.</p>', 3);
-const _hoisted_51 = { class: "docs-example rounded-top p-4" };
-const _hoisted_52 = { class: "row" };
-const _hoisted_53 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
-const _hoisted_54 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Year Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Year Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
-const _hoisted_58 = { class: "docs-example rounded-top p-4" };
-const _hoisted_59 = { class: "row" };
-const _hoisted_60 = { class: "col-lg-6 mb3" };
-const _hoisted_61 = { class: "row" };
-const _hoisted_62 = { class: "col-lg-4" };
-const _hoisted_63 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
-const _hoisted_66 = { class: "docs-example rounded-top p-4" };
-const _hoisted_67 = { class: "row" };
-const _hoisted_68 = { class: "col-lg-4" };
-const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">disabled</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>inputReadOnly</code> boolean attribute to prevent modification of the input&#39;s value.</p>', 3);
-const _hoisted_72 = { class: "docs-example rounded-top p-4" };
-const _hoisted_73 = { class: "row" };
-const _hoisted_74 = { class: "col-lg-4" };
-const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">inputReadOnly</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="disabled-dates" tabindex="-1">Disabled dates <a class="anchor-link" href="#disabled-dates" aria-hidden="true">#</a></h2><p>CoreUI Vue DatePicker component includes a feature that allows you to disable certain dates, such as weekends or holidays. This can be accomplished by passing an array to <code>disabledDate</code> prop to the component, which determines which dates should be disabled based on custom logic.</p>', 3);
-const _hoisted_78 = { class: "docs-example rounded-top p-4" };
-const _hoisted_79 = { class: "row" };
-const _hoisted_80 = { class: "col-lg-4" };
-const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">    <span class="token attr-name">:calendarDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>calendarDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:disabledDates</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledDates<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:maxDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>maxDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:minDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>minDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> calendarDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> disabledDates <span class="token operator">=</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token keyword">const</span> maxDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> minDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        calendarDate<span class="token punctuation">,</span></span>\n<span class="line">        disabledDates<span class="token punctuation">,</span></span>\n<span class="line">        maxDate<span class="token punctuation">,</span></span>\n<span class="line">        minDate<span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="non-english-locale" tabindex="-1">Non-english locale <a class="anchor-link" href="#non-english-locale" aria-hidden="true">#</a></h2><p>CoreUI Vue Date Picker allows users to display dates and times in a non-English locale. This is useful for applications that have international users or need to support multiple languages.</p><h3 id="auto" tabindex="-1">Auto <a class="anchor-link" href="#auto" aria-hidden="true">#</a></h3><p>By default, the DatePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can simply pass the desired language code as a prop to the DatePicker component. This feature enables to create more inclusive and accessible applications that cater to a diverse audience.</p>', 5);
-const _hoisted_86 = { class: "docs-example rounded-top p-4" };
-const _hoisted_87 = { class: "row" };
-const _hoisted_88 = { class: "col-lg-4" };
-const _hoisted_89 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="chinese" tabindex="-1">Chinese <a class="anchor-link" href="#chinese" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Picker with Chinese locales.</p>', 3);
-const _hoisted_92 = { class: "docs-example rounded-top p-4" };
-const _hoisted_93 = { class: "row" };
-const _hoisted_94 = { class: "col-lg-4" };
-const _hoisted_95 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>入住日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="japanese" tabindex="-1">Japanese <a class="anchor-link" href="#japanese" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Picker with Japanese locales.</p>', 3);
-const _hoisted_98 = { class: "docs-example rounded-top p-4" };
-const _hoisted_99 = { class: "row" };
-const _hoisted_100 = { class: "col-lg-4" };
-const _hoisted_101 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>日付を選択<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ja<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="korean" tabindex="-1">Korean <a class="anchor-link" href="#korean" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Picker with Korean locales.</p>', 3);
-const _hoisted_104 = { class: "docs-example rounded-top p-4" };
-const _hoisted_105 = { class: "row" };
-const _hoisted_106 = { class: "col-lg-4" };
-const _hoisted_107 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>날짜 선택<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ko<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="right-to-left-support" tabindex="-1">Right to left support <a class="anchor-link" href="#right-to-left-support" aria-hidden="true">#</a></h2><p>RTL support is built-in and can be explicitly controlled through the <code>$enable-rtl</code> variables in scss.</p><h3 id="hebrew" tabindex="-1">Hebrew <a class="anchor-link" href="#hebrew" aria-hidden="true">#</a></h3>', 4);
-const _hoisted_111 = { class: "docs-example rounded-top p-4" };
-const _hoisted_112 = {
-  class: "row",
-  dir: "rtl"
-};
-const _hoisted_113 = { class: "col-lg-4" };
-const _hoisted_114 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>בחר תאריך<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>he-IL<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="persian" tabindex="-1">Persian <a class="anchor-link" href="#persian" aria-hidden="true">#</a></h3>', 2);
-const _hoisted_116 = { class: "docs-example rounded-top p-4" };
-const _hoisted_117 = {
-  class: "row",
-  dir: "rtl"
-};
-const _hoisted_118 = { class: "col-lg-4" };
-const _hoisted_119 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>تاریخ شروع<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa-IR<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="custom-formats" tabindex="-1">Custom formats <a class="anchor-link" href="#custom-formats" aria-hidden="true">#</a></h2>', 2);
-const _hoisted_121 = /* @__PURE__ */ createBaseVNode("code", null, "format", -1);
-const _hoisted_122 = /* @__PURE__ */ createBaseVNode("code", null, "<CDatePicker>", -1);
-const _hoisted_123 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateFormat", -1);
-const _hoisted_124 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateParse", -1);
-const _hoisted_125 = /* @__PURE__ */ createStaticVNode('<p>The provided code demonstrates how to use the <code>inputDateFormat</code> and <code>inputDateParse</code> properties. In this example, the <code>format</code> and <code>parse</code> functions from <code>date-fns</code> are employed to tailor the date presentation and interpretation.</p><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> format<span class="token punctuation">,</span> parse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns&#39;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> es <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns/locale&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
-const _hoisted_127 = { class: "docs-example rounded-top p-4" };
-const _hoisted_128 = { class: "row" };
-const _hoisted_129 = { class: "col-lg-4" };
-const _hoisted_130 = { class: "col-lg-4" };
-const _hoisted_131 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date picker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMMM dd, yyyy&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM dd, yyyy&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Selector de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Seleccionar fecha<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMMM dd&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMMM dd&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker-1" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker-1" aria-hidden="true">#</a></h4><p>This example demonstrates how to integrate a timepicker into a date picker using the <code>timepicker</code> property.</p>', 3);
-const _hoisted_134 = { class: "docs-example rounded-top p-4" };
-const _hoisted_135 = { class: "row" };
-const _hoisted_136 = { class: "col-lg-5" };
-const _hoisted_137 = { class: "col-lg-5" };
-const _hoisted_138 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date picker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMM dd, yyyy h:mm:ss a&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMM dd, yyyy h:mm:ss a&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Selector de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Seleccionar fecha<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMM dd h:mm:ss a&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMM dd h:mm:ss a&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue date pickers use local CSS variables on <code>.date-picker</code> and <code>.calendar</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_142 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CDatePicker <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CDatePicker<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_145 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDatePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-picker/CDatePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.<br><br>The name attribute for the input element is generated based on the <code>id</code> property:<br>- {id}-date</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select date&#39;</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-change</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:date</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 7);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CDatePicker = resolveComponent("CDatePicker");
-  const _component_Callout = resolveComponent("Callout");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_10, [
-      createBaseVNode("div", _hoisted_11, [
-        createBaseVNode("div", _hoisted_12, [
-          createVNode(_component_CDatePicker, {
-            label: "Date",
-            locale: "en-US"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_13, [
-          createVNode(_component_CDatePicker, {
-            date: "2022/2/16",
-            label: "Date",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_14,
-    createBaseVNode("div", _hoisted_17, [
-      createBaseVNode("div", _hoisted_18, [
-        createBaseVNode("div", _hoisted_19, [
-          createVNode(_component_CDatePicker, {
-            label: "Date",
-            locale: "en-US",
-            date: $setup.vDate,
-            "onUpdate:date": _cache[0] || (_cache[0] = ($event) => $setup.vDate = $event)
-          }, null, 8, ["date"])
-        ])
-      ]),
-      createBaseVNode("div", null, toDisplayString($setup.vDate && $setup.vDate.toLocaleDateString([], $setup.options)), 1)
-    ]),
-    _hoisted_20,
-    createBaseVNode("div", _hoisted_23, [
-      createBaseVNode("div", _hoisted_24, [
-        createBaseVNode("div", _hoisted_25, [
-          createVNode(_component_CDatePicker, {
-            locale: "en-US",
-            timepicker: ""
-          })
-        ]),
-        createBaseVNode("div", _hoisted_26, [
-          createVNode(_component_CDatePicker, {
-            date: "2023/03/15 02:22:13 PM",
-            locale: "en-US",
-            timepicker: ""
-          })
-        ])
-      ])
-    ]),
-    _hoisted_27,
-    createBaseVNode("div", _hoisted_30, [
-      createBaseVNode("div", _hoisted_31, [
-        createBaseVNode("div", _hoisted_32, [
-          createVNode(_component_CDatePicker, {
-            footer: "",
-            locale: "en-US"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_33, [
-          createVNode(_component_CDatePicker, {
-            date: "2022/2/16",
-            footer: "",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_34,
-    createBaseVNode("div", _hoisted_37, [
-      createBaseVNode("div", _hoisted_38, [
-        createBaseVNode("div", _hoisted_39, [
-          createVNode(_component_CDatePicker, {
-            label: "Week Picker",
-            locale: "en-US",
-            selectionType: "week",
-            showWeekNumber: ""
-          })
-        ]),
-        createBaseVNode("div", _hoisted_40, [
-          createVNode(_component_CDatePicker, {
-            date: "2025W07",
-            label: "Week Picker",
-            locale: "en-US",
-            selectionType: "week",
-            showWeekNumber: ""
-          })
-        ])
-      ])
-    ]),
-    _hoisted_41,
-    createBaseVNode("div", _hoisted_44, [
-      createBaseVNode("div", _hoisted_45, [
-        createBaseVNode("div", _hoisted_46, [
-          createVNode(_component_CDatePicker, {
-            label: "Month Picker",
-            locale: "en-US",
-            selectionType: "month"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_47, [
-          createVNode(_component_CDatePicker, {
-            date: "2022-8",
-            label: "Month Picker",
-            locale: "en-US",
-            selectionType: "month"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_48,
-    createBaseVNode("div", _hoisted_51, [
-      createBaseVNode("div", _hoisted_52, [
-        createBaseVNode("div", _hoisted_53, [
-          createVNode(_component_CDatePicker, {
-            label: "Year Picker",
-            locale: "en-US",
-            selectionType: "year"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_54, [
-          createVNode(_component_CDatePicker, {
-            date: "2022",
-            label: "Year Picker",
-            locale: "en-US",
-            selectionType: "year"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_55,
-    createBaseVNode("div", _hoisted_58, [
-      createBaseVNode("div", _hoisted_59, [
-        createBaseVNode("div", _hoisted_60, [
-          createVNode(_component_CDatePicker, {
-            locale: "en-US",
-            size: "lg"
-          })
-        ])
-      ]),
-      createBaseVNode("div", _hoisted_61, [
-        createBaseVNode("div", _hoisted_62, [
-          createVNode(_component_CDatePicker, {
-            locale: "en-US",
-            size: "sm"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_63,
-    createBaseVNode("div", _hoisted_66, [
-      createBaseVNode("div", _hoisted_67, [
-        createBaseVNode("div", _hoisted_68, [
-          createVNode(_component_CDatePicker, {
-            disabled: "",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_69,
-    createBaseVNode("div", _hoisted_72, [
-      createBaseVNode("div", _hoisted_73, [
-        createBaseVNode("div", _hoisted_74, [
-          createVNode(_component_CDatePicker, {
-            inputReadOnly: "",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_75,
-    createBaseVNode("div", _hoisted_78, [
-      createBaseVNode("div", _hoisted_79, [
-        createBaseVNode("div", _hoisted_80, [
-          createVNode(_component_CDatePicker, {
-            calendarDate: $setup.calendarDate,
-            disabledDates: $setup.disabledDates,
-            locale: "en-US",
-            maxDate: $setup.maxDate,
-            minDate: $setup.minDate
-          }, null, 8, ["calendarDate", "disabledDates", "maxDate", "minDate"])
-        ])
-      ])
-    ]),
-    _hoisted_81,
-    createBaseVNode("div", _hoisted_86, [
-      createBaseVNode("div", _hoisted_87, [
-        createBaseVNode("div", _hoisted_88, [
-          createVNode(_component_CDatePicker)
-        ])
-      ])
-    ]),
-    _hoisted_89,
-    createBaseVNode("div", _hoisted_92, [
-      createBaseVNode("div", _hoisted_93, [
-        createBaseVNode("div", _hoisted_94, [
-          createVNode(_component_CDatePicker, {
-            placeholder: "入住日期",
-            locale: "zh-CN"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_95,
-    createBaseVNode("div", _hoisted_98, [
-      createBaseVNode("div", _hoisted_99, [
-        createBaseVNode("div", _hoisted_100, [
-          createVNode(_component_CDatePicker, {
-            placeholder: "日付を選択",
-            locale: "ja"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_101,
-    createBaseVNode("div", _hoisted_104, [
-      createBaseVNode("div", _hoisted_105, [
-        createBaseVNode("div", _hoisted_106, [
-          createVNode(_component_CDatePicker, {
-            placeholder: "날짜 선택",
-            locale: "ko"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_107,
-    createBaseVNode("div", _hoisted_111, [
-      createBaseVNode("div", _hoisted_112, [
-        createBaseVNode("div", _hoisted_113, [
-          createVNode(_component_CDatePicker, {
-            placeholder: "בחר תאריך",
-            locale: "he-IL"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_114,
-    createBaseVNode("div", _hoisted_116, [
-      createBaseVNode("div", _hoisted_117, [
-        createBaseVNode("div", _hoisted_118, [
-          createVNode(_component_CDatePicker, {
-            placeholder: "تاریخ شروع",
-            locale: "fa-IR"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_119,
-    createVNode(_component_Callout, { color: "info" }, {
-      default: withCtx(() => [
-        createTextVNode(" Heads up! As of v5.0.0, the "),
-        _hoisted_121,
-        createTextVNode(" property is removed in "),
-        _hoisted_122,
-        createTextVNode(". Instead, utilize the "),
-        _hoisted_123,
-        createTextVNode(" to format dates into custom strings and "),
-        _hoisted_124,
-        createTextVNode(" to parse custom strings into Date objects. ")
-      ]),
-      _: 1
-    }),
-    _hoisted_125,
-    createBaseVNode("div", _hoisted_127, [
-      createBaseVNode("div", _hoisted_128, [
-        createBaseVNode("div", _hoisted_129, [
-          createVNode(_component_CDatePicker, {
-            date: "2022/08/17",
-            label: "Date picker",
-            locale: "en-US",
-            inputDateParse: (date) => $setup.parse(date, "MMMM dd, yyyy", /* @__PURE__ */ new Date()),
-            inputDateFormat: (date) => $setup.format(new Date(date), "MMMM dd, yyyy")
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ]),
-        createBaseVNode("div", _hoisted_130, [
-          createVNode(_component_CDatePicker, {
-            date: "2022/08/17",
-            label: "Selector de fechas",
-            locale: "es-ES",
-            placeholder: "Seleccionar fecha",
-            inputDateParse: (date) => $setup.parse(date, "yyyy MMMM dd", /* @__PURE__ */ new Date(), { locale: $setup.es }),
-            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMMM dd", { locale: $setup.es })
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ])
-      ])
-    ]),
-    _hoisted_131,
-    createBaseVNode("div", _hoisted_134, [
-      createBaseVNode("div", _hoisted_135, [
-        createBaseVNode("div", _hoisted_136, [
-          createVNode(_component_CDatePicker, {
-            date: "2022/08/03 02:34:17 AM",
-            label: "Date picker",
-            locale: "en-US",
-            timepicker: "",
-            inputDateParse: (date) => $setup.parse(date, "MMM dd, yyyy h:mm:ss a", /* @__PURE__ */ new Date()),
-            inputDateFormat: (date) => $setup.format(new Date(date), "MMM dd, yyyy h:mm:ss a")
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ]),
-        createBaseVNode("div", _hoisted_137, [
-          createVNode(_component_CDatePicker, {
-            date: "2022/08/03 02:34:17 AM",
-            label: "Selector de fechas",
-            locale: "es-ES",
-            placeholder: "Seleccionar fecha",
-            timepicker: "",
-            inputDateParse: (date) => $setup.parse(date, "yyyy MMM dd h:mm:ss a", /* @__PURE__ */ new Date(), { locale: $setup.es }),
-            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMM dd h:mm:ss a", { locale: $setup.es })
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ])
-      ])
-    ]),
-    _hoisted_138,
-    createVNode(_component_ScssDocs, {
-      file: "_date-picker.scss",
-      capture: "date-picker-css-vars"
-    }),
-    createVNode(_component_ScssDocs, {
-      file: "_calendar.scss",
-      capture: "calendar-css-vars"
-    }),
-    _hoisted_142,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "date-picker-variables"
-    }),
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "calendar-variables"
-    }),
-    _hoisted_145
-  ]);
-}
-const datePicker_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "date-picker.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/date-picker.html","title":"Vue Date Picker Component","lang":"en-US","frontmatter":{"title":"Vue Date Picker Component","name":"Date Picker","description":"The Vue Date Picker Component is an essential tool for any Vue-based application that requires date selection functionality.","other_frameworks":"date-picker","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/date-picker.html"}]]},"headers":[{"level":2,"title":"About","slug":"about","link":"#about","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Days","slug":"days","link":"#days","children":[]},{"level":3,"title":"Weeks","slug":"weeks","link":"#weeks","children":[]},{"level":3,"title":"Months","slug":"months","link":"#months","children":[]},{"level":3,"title":"Years","slug":"years","link":"#years","children":[]}]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Readonly","slug":"readonly","link":"#readonly","children":[]},{"level":2,"title":"Disabled dates","slug":"disabled-dates","link":"#disabled-dates","children":[]},{"level":2,"title":"Non-english locale","slug":"non-english-locale","link":"#non-english-locale","children":[{"level":3,"title":"Auto","slug":"auto","link":"#auto","children":[]},{"level":3,"title":"Chinese","slug":"chinese","link":"#chinese","children":[]},{"level":3,"title":"Japanese","slug":"japanese","link":"#japanese","children":[]},{"level":3,"title":"Korean","slug":"korean","link":"#korean","children":[]}]},{"level":2,"title":"Right to left support","slug":"right-to-left-support","link":"#right-to-left-support","children":[{"level":3,"title":"Hebrew","slug":"hebrew","link":"#hebrew","children":[]},{"level":3,"title":"Persian","slug":"persian","link":"#persian","children":[]}]},{"level":2,"title":"Custom formats","slug":"custom-formats","link":"#custom-formats","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CDatePicker","slug":"cdatepicker","link":"#cdatepicker","children":[]}]}],"filePathRelative":"forms/date-picker.md"}');
-export {
-  datePicker_html as comp,
-  data
-};
diff --git a/vue/docs/assets/date-picker.html-DXrgyOW0.js b/vue/docs/assets/date-picker.html-DXrgyOW0.js
new file mode 100644
index 00000000000..11e562b87ac
--- /dev/null
+++ b/vue/docs/assets/date-picker.html-DXrgyOW0.js
@@ -0,0 +1,478 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, t as toDisplayString, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
+import { f as format, p as parse, e as es } from "./es-DXofg4kJ.js";
+const _sfc_main = {
+  setup() {
+    const vDate = ref(new Date(2022, 2, 1));
+    const options = {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      weekday: "long"
+    };
+    const calendarDate = new Date(2022, 2, 1);
+    const disabledDates = [
+      [new Date(2022, 2, 4), new Date(2022, 2, 7)],
+      new Date(2022, 2, 16),
+      new Date(2022, 3, 16),
+      [new Date(2022, 4, 2), new Date(2022, 4, 8)]
+    ];
+    const maxDate = new Date(2022, 5, 0);
+    const minDate = new Date(2022, 1, 1);
+    return {
+      format,
+      parse,
+      es,
+      vDate,
+      options,
+      calendarDate,
+      disabledDates,
+      maxDate,
+      minDate
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about" aria-hidden="true">#</a></h2><p>This component, provided by CoreUI for Vue.js, offers a user-friendly interface and various customization options to ensure an excellent user experience.</p><p>With its responsive design and support for all modern browsers, the Vue Date Picker Component can be easily integrated into any application. The component comes with an array of styling options, including color, size, and shape, that can be easily adjusted to fit the application&#39;s design.</p><p>The Vue Date Picker Component is also fully customizable, allowing developers to tailor the component to their specific needs. With its set of APIs, developers can control the default value, visibility, and date range of the component.</p><p>One of the standout features of the Vue Date Picker Component is its accessibility. CoreUI has ensured that the component is fully compliant with the Web Content Accessibility Guidelines (WCAG), making it accessible to all users. The component supports keyboard navigation and screen readers, ensuring that users with disabilities can also benefit from its functionality.</p><h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Below is an example of a basic Vue DatePicker.</p><h3 id="days" tabindex="-1">Days <a class="anchor-link" href="#days" aria-hidden="true">#</a></h3><p>Basic examples demonstrating how to pick dates using the Vue Date Picker Component.</p>', 9);
+const _hoisted_10 = { class: "docs-example rounded-top p-4" };
+const _hoisted_11 = { class: "row" };
+const _hoisted_12 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
+const _hoisted_13 = { class: "col-sm-6 col-lg-5" };
+const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/2/16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h4><p>By default, <code>&lt;CDatPicker&gt;</code> returns <code>date</code> as a <code>Date</code> object. If no date is selected, <code>&lt;CDatPicker&gt;</code> returns <code>null</code>.</p>', 3);
+const _hoisted_17 = { class: "docs-example rounded-top p-4" };
+const _hoisted_18 = { class: "row mb-3" };
+const _hoisted_19 = { class: "col-lg-6" };
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-model:</span>date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vDate<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{ vDate &amp;&amp; vDate.toLocaleDateString([], options) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> vDate <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">month</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">day</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">weekday</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        vDate<span class="token punctuation">,</span></span>\n<span class="line">        options</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker" aria-hidden="true">#</a></h4><p>In addition to supporting date selection, our Vue DatePicker component also includes a TimePicker feature that allows users to select a specific time of day. Vue TimePicker can be enabled by passing a <code>timepicker</code> prop to the <code>&lt;CDatePicker/&gt;</code> component</p>', 3);
+const _hoisted_23 = { class: "docs-example rounded-top p-4" };
+const _hoisted_24 = { class: "row" };
+const _hoisted_25 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
+const _hoisted_26 = { class: "col-sm-6 col-lg-5" };
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2023/03/15 02:22:13 PM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-footer" tabindex="-1">With footer <a class="anchor-link" href="#with-footer" aria-hidden="true">#</a></h4><p>Here is an example with the additional footer. The footer can be useful for displaying additional information or actions related to the selected date, such as &quot;Today&quot; or &quot;Clear&quot; buttons. The footer component is fully customizable and can be styled to match the rest of the application.</p>', 3);
+const _hoisted_30 = { class: "docs-example rounded-top p-4" };
+const _hoisted_31 = { class: "row" };
+const _hoisted_32 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
+const _hoisted_33 = { class: "col-sm-6 col-lg-5" };
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/2/16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="weeks" tabindex="-1">Weeks <a class="anchor-link" href="#weeks" aria-hidden="true">#</a></h3><p>Illustration of week selection using the Vue Date Picker, including week number display.</p>', 3);
+const _hoisted_37 = { class: "docs-example rounded-top p-4" };
+const _hoisted_38 = { class: "row" };
+const _hoisted_39 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
+const _hoisted_40 = { class: "col-sm-6 col-lg-5" };
+const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Week Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span> <span class="token attr-name">showWeekNumber</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2025W07<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Week Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span> <span class="token attr-name">showWeekNumber</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="months" tabindex="-1">Months <a class="anchor-link" href="#months" aria-hidden="true">#</a></h3><p>Selecting whole months with the Vue Date Picker Component.</p>', 3);
+const _hoisted_44 = { class: "docs-example rounded-top p-4" };
+const _hoisted_45 = { class: "row" };
+const _hoisted_46 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
+const _hoisted_47 = { class: "col-sm-6 col-lg-5" };
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Month Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022-8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Month Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="years" tabindex="-1">Years <a class="anchor-link" href="#years" aria-hidden="true">#</a></h3><p>Picking years using the Vue Date Picker.</p>', 3);
+const _hoisted_51 = { class: "docs-example rounded-top p-4" };
+const _hoisted_52 = { class: "row" };
+const _hoisted_53 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
+const _hoisted_54 = { class: "col-sm-6 col-lg-5" };
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Year Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Year Picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
+const _hoisted_58 = { class: "docs-example rounded-top p-4" };
+const _hoisted_59 = { class: "row" };
+const _hoisted_60 = { class: "col-lg-6 mb3" };
+const _hoisted_61 = { class: "row" };
+const _hoisted_62 = { class: "col-lg-4" };
+const _hoisted_63 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
+const _hoisted_66 = { class: "docs-example rounded-top p-4" };
+const _hoisted_67 = { class: "row" };
+const _hoisted_68 = { class: "col-lg-4" };
+const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">disabled</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>inputReadOnly</code> boolean attribute to prevent modification of the input&#39;s value.</p>', 3);
+const _hoisted_72 = { class: "docs-example rounded-top p-4" };
+const _hoisted_73 = { class: "row" };
+const _hoisted_74 = { class: "col-lg-4" };
+const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">inputReadOnly</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="disabled-dates" tabindex="-1">Disabled dates <a class="anchor-link" href="#disabled-dates" aria-hidden="true">#</a></h2><p>CoreUI Vue DatePicker component includes a feature that allows you to disable certain dates, such as weekends or holidays. This can be accomplished by passing an array to <code>disabledDate</code> prop to the component, which determines which dates should be disabled based on custom logic.</p>', 3);
+const _hoisted_78 = { class: "docs-example rounded-top p-4" };
+const _hoisted_79 = { class: "row" };
+const _hoisted_80 = { class: "col-lg-4" };
+const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">    <span class="token attr-name">:calendarDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>calendarDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:disabledDates</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledDates<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:maxDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>maxDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:minDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>minDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> calendarDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> disabledDates <span class="token operator">=</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token keyword">const</span> maxDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> minDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        calendarDate<span class="token punctuation">,</span></span>\n<span class="line">        disabledDates<span class="token punctuation">,</span></span>\n<span class="line">        maxDate<span class="token punctuation">,</span></span>\n<span class="line">        minDate<span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="non-english-locale" tabindex="-1">Non-english locale <a class="anchor-link" href="#non-english-locale" aria-hidden="true">#</a></h2><p>CoreUI Vue Date Picker allows users to display dates and times in a non-English locale. This is useful for applications that have international users or need to support multiple languages.</p><h3 id="auto" tabindex="-1">Auto <a class="anchor-link" href="#auto" aria-hidden="true">#</a></h3><p>By default, the DatePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can simply pass the desired language code as a prop to the DatePicker component. This feature enables to create more inclusive and accessible applications that cater to a diverse audience.</p>', 5);
+const _hoisted_86 = { class: "docs-example rounded-top p-4" };
+const _hoisted_87 = { class: "row" };
+const _hoisted_88 = { class: "col-lg-4" };
+const _hoisted_89 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="chinese" tabindex="-1">Chinese <a class="anchor-link" href="#chinese" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Picker with Chinese locales.</p>', 3);
+const _hoisted_92 = { class: "docs-example rounded-top p-4" };
+const _hoisted_93 = { class: "row" };
+const _hoisted_94 = { class: "col-lg-4" };
+const _hoisted_95 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>入住日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="japanese" tabindex="-1">Japanese <a class="anchor-link" href="#japanese" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Picker with Japanese locales.</p>', 3);
+const _hoisted_98 = { class: "docs-example rounded-top p-4" };
+const _hoisted_99 = { class: "row" };
+const _hoisted_100 = { class: "col-lg-4" };
+const _hoisted_101 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>日付を選択<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ja<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="korean" tabindex="-1">Korean <a class="anchor-link" href="#korean" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Picker with Korean locales.</p>', 3);
+const _hoisted_104 = { class: "docs-example rounded-top p-4" };
+const _hoisted_105 = { class: "row" };
+const _hoisted_106 = { class: "col-lg-4" };
+const _hoisted_107 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>날짜 선택<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ko<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="right-to-left-support" tabindex="-1">Right to left support <a class="anchor-link" href="#right-to-left-support" aria-hidden="true">#</a></h2><p>RTL support is built-in and can be explicitly controlled through the <code>$enable-rtl</code> variables in scss.</p><h3 id="hebrew" tabindex="-1">Hebrew <a class="anchor-link" href="#hebrew" aria-hidden="true">#</a></h3>', 4);
+const _hoisted_111 = { class: "docs-example rounded-top p-4" };
+const _hoisted_112 = {
+  class: "row",
+  dir: "rtl"
+};
+const _hoisted_113 = { class: "col-lg-4" };
+const _hoisted_114 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>בחר תאריך<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>he-IL<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="persian" tabindex="-1">Persian <a class="anchor-link" href="#persian" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_116 = { class: "docs-example rounded-top p-4" };
+const _hoisted_117 = {
+  class: "row",
+  dir: "rtl"
+};
+const _hoisted_118 = { class: "col-lg-4" };
+const _hoisted_119 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>تاریخ شروع<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa-IR<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="custom-formats" tabindex="-1">Custom formats <a class="anchor-link" href="#custom-formats" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_121 = /* @__PURE__ */ createBaseVNode("code", null, "format", -1);
+const _hoisted_122 = /* @__PURE__ */ createBaseVNode("code", null, "<CDatePicker>", -1);
+const _hoisted_123 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateFormat", -1);
+const _hoisted_124 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateParse", -1);
+const _hoisted_125 = /* @__PURE__ */ createStaticVNode('<p>The provided code demonstrates how to use the <code>inputDateFormat</code> and <code>inputDateParse</code> properties. In this example, the <code>format</code> and <code>parse</code> functions from <code>date-fns</code> are employed to tailor the date presentation and interpretation.</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> format<span class="token punctuation">,</span> parse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns&#39;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> es <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns/locale&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_127 = { class: "docs-example rounded-top p-4" };
+const _hoisted_128 = { class: "row" };
+const _hoisted_129 = { class: "col-lg-4" };
+const _hoisted_130 = { class: "col-lg-4" };
+const _hoisted_131 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date picker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMMM dd, yyyy&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM dd, yyyy&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Selector de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Seleccionar fecha<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMMM dd&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMMM dd&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker-1" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker-1" aria-hidden="true">#</a></h4><p>This example demonstrates how to integrate a timepicker into a date picker using the <code>timepicker</code> property.</p>', 3);
+const _hoisted_134 = { class: "docs-example rounded-top p-4" };
+const _hoisted_135 = { class: "row" };
+const _hoisted_136 = { class: "col-lg-5" };
+const _hoisted_137 = { class: "col-lg-5" };
+const _hoisted_138 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date picker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMM dd, yyyy h:mm:ss a&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMM dd, yyyy h:mm:ss a&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span></span>\n<span class="line">      <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Selector de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Seleccionar fecha<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMM dd h:mm:ss a&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMM dd h:mm:ss a&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue date pickers use local CSS variables on <code>.date-picker</code> and <code>.calendar</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_142 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CDatePicker <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CDatePicker<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_145 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDatePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-picker/CDatePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.<br><br><strong>[Deprecated since v5.3.0]</strong> The name attributes for input element is generated based on this property until you define name prop ex.:<br>- {id}-date</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>The name attribute for the input element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select date&#39;</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>date-change</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:date</strong></td><td>Callback fired when the date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CDatePicker = resolveComponent("CDatePicker");
+  const _component_Callout = resolveComponent("Callout");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_10, [
+      createBaseVNode("div", _hoisted_11, [
+        createBaseVNode("div", _hoisted_12, [
+          createVNode(_component_CDatePicker, {
+            label: "Date",
+            locale: "en-US"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_13, [
+          createVNode(_component_CDatePicker, {
+            date: "2022/2/16",
+            label: "Date",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_14,
+    createBaseVNode("div", _hoisted_17, [
+      createBaseVNode("div", _hoisted_18, [
+        createBaseVNode("div", _hoisted_19, [
+          createVNode(_component_CDatePicker, {
+            label: "Date",
+            locale: "en-US",
+            date: $setup.vDate,
+            "onUpdate:date": _cache[0] || (_cache[0] = ($event) => $setup.vDate = $event)
+          }, null, 8, ["date"])
+        ])
+      ]),
+      createBaseVNode("div", null, toDisplayString($setup.vDate && $setup.vDate.toLocaleDateString([], $setup.options)), 1)
+    ]),
+    _hoisted_20,
+    createBaseVNode("div", _hoisted_23, [
+      createBaseVNode("div", _hoisted_24, [
+        createBaseVNode("div", _hoisted_25, [
+          createVNode(_component_CDatePicker, {
+            locale: "en-US",
+            timepicker: ""
+          })
+        ]),
+        createBaseVNode("div", _hoisted_26, [
+          createVNode(_component_CDatePicker, {
+            date: "2023/03/15 02:22:13 PM",
+            locale: "en-US",
+            timepicker: ""
+          })
+        ])
+      ])
+    ]),
+    _hoisted_27,
+    createBaseVNode("div", _hoisted_30, [
+      createBaseVNode("div", _hoisted_31, [
+        createBaseVNode("div", _hoisted_32, [
+          createVNode(_component_CDatePicker, {
+            footer: "",
+            locale: "en-US"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_33, [
+          createVNode(_component_CDatePicker, {
+            date: "2022/2/16",
+            footer: "",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_34,
+    createBaseVNode("div", _hoisted_37, [
+      createBaseVNode("div", _hoisted_38, [
+        createBaseVNode("div", _hoisted_39, [
+          createVNode(_component_CDatePicker, {
+            label: "Week Picker",
+            locale: "en-US",
+            selectionType: "week",
+            showWeekNumber: ""
+          })
+        ]),
+        createBaseVNode("div", _hoisted_40, [
+          createVNode(_component_CDatePicker, {
+            date: "2025W07",
+            label: "Week Picker",
+            locale: "en-US",
+            selectionType: "week",
+            showWeekNumber: ""
+          })
+        ])
+      ])
+    ]),
+    _hoisted_41,
+    createBaseVNode("div", _hoisted_44, [
+      createBaseVNode("div", _hoisted_45, [
+        createBaseVNode("div", _hoisted_46, [
+          createVNode(_component_CDatePicker, {
+            label: "Month Picker",
+            locale: "en-US",
+            selectionType: "month"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_47, [
+          createVNode(_component_CDatePicker, {
+            date: "2022-8",
+            label: "Month Picker",
+            locale: "en-US",
+            selectionType: "month"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_48,
+    createBaseVNode("div", _hoisted_51, [
+      createBaseVNode("div", _hoisted_52, [
+        createBaseVNode("div", _hoisted_53, [
+          createVNode(_component_CDatePicker, {
+            label: "Year Picker",
+            locale: "en-US",
+            selectionType: "year"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_54, [
+          createVNode(_component_CDatePicker, {
+            date: "2022",
+            label: "Year Picker",
+            locale: "en-US",
+            selectionType: "year"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_55,
+    createBaseVNode("div", _hoisted_58, [
+      createBaseVNode("div", _hoisted_59, [
+        createBaseVNode("div", _hoisted_60, [
+          createVNode(_component_CDatePicker, {
+            locale: "en-US",
+            size: "lg"
+          })
+        ])
+      ]),
+      createBaseVNode("div", _hoisted_61, [
+        createBaseVNode("div", _hoisted_62, [
+          createVNode(_component_CDatePicker, {
+            locale: "en-US",
+            size: "sm"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_63,
+    createBaseVNode("div", _hoisted_66, [
+      createBaseVNode("div", _hoisted_67, [
+        createBaseVNode("div", _hoisted_68, [
+          createVNode(_component_CDatePicker, {
+            disabled: "",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_69,
+    createBaseVNode("div", _hoisted_72, [
+      createBaseVNode("div", _hoisted_73, [
+        createBaseVNode("div", _hoisted_74, [
+          createVNode(_component_CDatePicker, {
+            inputReadOnly: "",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_75,
+    createBaseVNode("div", _hoisted_78, [
+      createBaseVNode("div", _hoisted_79, [
+        createBaseVNode("div", _hoisted_80, [
+          createVNode(_component_CDatePicker, {
+            calendarDate: $setup.calendarDate,
+            disabledDates: $setup.disabledDates,
+            locale: "en-US",
+            maxDate: $setup.maxDate,
+            minDate: $setup.minDate
+          }, null, 8, ["calendarDate", "disabledDates", "maxDate", "minDate"])
+        ])
+      ])
+    ]),
+    _hoisted_81,
+    createBaseVNode("div", _hoisted_86, [
+      createBaseVNode("div", _hoisted_87, [
+        createBaseVNode("div", _hoisted_88, [
+          createVNode(_component_CDatePicker)
+        ])
+      ])
+    ]),
+    _hoisted_89,
+    createBaseVNode("div", _hoisted_92, [
+      createBaseVNode("div", _hoisted_93, [
+        createBaseVNode("div", _hoisted_94, [
+          createVNode(_component_CDatePicker, {
+            placeholder: "入住日期",
+            locale: "zh-CN"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_95,
+    createBaseVNode("div", _hoisted_98, [
+      createBaseVNode("div", _hoisted_99, [
+        createBaseVNode("div", _hoisted_100, [
+          createVNode(_component_CDatePicker, {
+            placeholder: "日付を選択",
+            locale: "ja"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_101,
+    createBaseVNode("div", _hoisted_104, [
+      createBaseVNode("div", _hoisted_105, [
+        createBaseVNode("div", _hoisted_106, [
+          createVNode(_component_CDatePicker, {
+            placeholder: "날짜 선택",
+            locale: "ko"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_107,
+    createBaseVNode("div", _hoisted_111, [
+      createBaseVNode("div", _hoisted_112, [
+        createBaseVNode("div", _hoisted_113, [
+          createVNode(_component_CDatePicker, {
+            placeholder: "בחר תאריך",
+            locale: "he-IL"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_114,
+    createBaseVNode("div", _hoisted_116, [
+      createBaseVNode("div", _hoisted_117, [
+        createBaseVNode("div", _hoisted_118, [
+          createVNode(_component_CDatePicker, {
+            placeholder: "تاریخ شروع",
+            locale: "fa-IR"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_119,
+    createVNode(_component_Callout, { color: "info" }, {
+      default: withCtx(() => [
+        createTextVNode(" Heads up! As of v5.0.0, the "),
+        _hoisted_121,
+        createTextVNode(" property is removed in "),
+        _hoisted_122,
+        createTextVNode(". Instead, utilize the "),
+        _hoisted_123,
+        createTextVNode(" to format dates into custom strings and "),
+        _hoisted_124,
+        createTextVNode(" to parse custom strings into Date objects. ")
+      ]),
+      _: 1
+    }),
+    _hoisted_125,
+    createBaseVNode("div", _hoisted_127, [
+      createBaseVNode("div", _hoisted_128, [
+        createBaseVNode("div", _hoisted_129, [
+          createVNode(_component_CDatePicker, {
+            date: "2022/08/17",
+            label: "Date picker",
+            locale: "en-US",
+            inputDateParse: (date) => $setup.parse(date, "MMMM dd, yyyy", /* @__PURE__ */ new Date()),
+            inputDateFormat: (date) => $setup.format(new Date(date), "MMMM dd, yyyy")
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ]),
+        createBaseVNode("div", _hoisted_130, [
+          createVNode(_component_CDatePicker, {
+            date: "2022/08/17",
+            label: "Selector de fechas",
+            locale: "es-ES",
+            placeholder: "Seleccionar fecha",
+            inputDateParse: (date) => $setup.parse(date, "yyyy MMMM dd", /* @__PURE__ */ new Date(), { locale: $setup.es }),
+            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMMM dd", { locale: $setup.es })
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ])
+      ])
+    ]),
+    _hoisted_131,
+    createBaseVNode("div", _hoisted_134, [
+      createBaseVNode("div", _hoisted_135, [
+        createBaseVNode("div", _hoisted_136, [
+          createVNode(_component_CDatePicker, {
+            date: "2022/08/03 02:34:17 AM",
+            label: "Date picker",
+            locale: "en-US",
+            timepicker: "",
+            inputDateParse: (date) => $setup.parse(date, "MMM dd, yyyy h:mm:ss a", /* @__PURE__ */ new Date()),
+            inputDateFormat: (date) => $setup.format(new Date(date), "MMM dd, yyyy h:mm:ss a")
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ]),
+        createBaseVNode("div", _hoisted_137, [
+          createVNode(_component_CDatePicker, {
+            date: "2022/08/03 02:34:17 AM",
+            label: "Selector de fechas",
+            locale: "es-ES",
+            placeholder: "Seleccionar fecha",
+            timepicker: "",
+            inputDateParse: (date) => $setup.parse(date, "yyyy MMM dd h:mm:ss a", /* @__PURE__ */ new Date(), { locale: $setup.es }),
+            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMM dd h:mm:ss a", { locale: $setup.es })
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ])
+      ])
+    ]),
+    _hoisted_138,
+    createVNode(_component_ScssDocs, {
+      file: "_date-picker.scss",
+      capture: "date-picker-css-vars"
+    }),
+    createVNode(_component_ScssDocs, {
+      file: "_calendar.scss",
+      capture: "calendar-css-vars"
+    }),
+    _hoisted_142,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "date-picker-variables"
+    }),
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "calendar-variables"
+    }),
+    _hoisted_145
+  ]);
+}
+const datePicker_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "date-picker.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/date-picker.html","title":"Vue Date Picker Component","lang":"en-US","frontmatter":{"title":"Vue Date Picker Component","name":"Date Picker","description":"The Vue Date Picker Component is an essential tool for any Vue-based application that requires date selection functionality.","other_frameworks":"date-picker","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/date-picker.html"}]]},"headers":[{"level":2,"title":"About","slug":"about","link":"#about","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Days","slug":"days","link":"#days","children":[]},{"level":3,"title":"Weeks","slug":"weeks","link":"#weeks","children":[]},{"level":3,"title":"Months","slug":"months","link":"#months","children":[]},{"level":3,"title":"Years","slug":"years","link":"#years","children":[]}]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Readonly","slug":"readonly","link":"#readonly","children":[]},{"level":2,"title":"Disabled dates","slug":"disabled-dates","link":"#disabled-dates","children":[]},{"level":2,"title":"Non-english locale","slug":"non-english-locale","link":"#non-english-locale","children":[{"level":3,"title":"Auto","slug":"auto","link":"#auto","children":[]},{"level":3,"title":"Chinese","slug":"chinese","link":"#chinese","children":[]},{"level":3,"title":"Japanese","slug":"japanese","link":"#japanese","children":[]},{"level":3,"title":"Korean","slug":"korean","link":"#korean","children":[]}]},{"level":2,"title":"Right to left support","slug":"right-to-left-support","link":"#right-to-left-support","children":[{"level":3,"title":"Hebrew","slug":"hebrew","link":"#hebrew","children":[]},{"level":3,"title":"Persian","slug":"persian","link":"#persian","children":[]}]},{"level":2,"title":"Custom formats","slug":"custom-formats","link":"#custom-formats","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CDatePicker","slug":"cdatepicker","link":"#cdatepicker","children":[]}]}],"filePathRelative":"forms/date-picker.md"}');
+export {
+  datePicker_html as comp,
+  data
+};
diff --git a/vue/docs/assets/date-range-picker.html-CNgPdL07.js b/vue/docs/assets/date-range-picker.html-CNgPdL07.js
deleted file mode 100644
index 11faf9e4b9c..00000000000
--- a/vue/docs/assets/date-range-picker.html-CNgPdL07.js
+++ /dev/null
@@ -1,554 +0,0 @@
-import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, t as toDisplayString, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-import { f as format, p as parse, e as es } from "./es-C71wN8BW.js";
-const _sfc_main = {
-  setup() {
-    const vStartDate = ref(new Date(2022, 2, 1));
-    const vEndDate = ref(new Date(2022, 2, 7));
-    const options = {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      weekday: "long"
-    };
-    const calendarDate = new Date(2022, 2, 1);
-    const disabledDates = [
-      [new Date(2022, 2, 4), new Date(2022, 2, 7)],
-      new Date(2022, 2, 16),
-      new Date(2022, 3, 16),
-      [new Date(2022, 4, 2), new Date(2022, 4, 8)]
-    ];
-    const maxDate = new Date(2022, 5, 0);
-    const minDate = new Date(2022, 1, 1);
-    const customRanges = {
-      Today: [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()],
-      Yesterday: [
-        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)),
-        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1))
-      ],
-      "Last 7 Days": [
-        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 6)),
-        new Date(/* @__PURE__ */ new Date())
-      ],
-      "Last 30 Days": [
-        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 29)),
-        new Date(/* @__PURE__ */ new Date())
-      ],
-      "This Month": [
-        new Date((/* @__PURE__ */ new Date()).setDate(1)),
-        new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() + 1, 0)
-      ],
-      "Last Month": [
-        new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() - 1, 1),
-        new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 0)
-      ]
-    };
-    return {
-      format,
-      parse,
-      es,
-      vStartDate,
-      vEndDate,
-      options,
-      calendarDate,
-      disabledDates,
-      maxDate,
-      minDate,
-      customRanges
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "example",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Example "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Explore basic usage of the Vue Date Range Picker through sample code snippets that demonstrate its core functionality.", -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "days",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Days "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#days",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, "Select date ranges by day with examples including basic usage, as well as variants featuring time pickers and footers for enhanced functionality.", -1);
-const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = { class: "row" };
-const _hoisted_7 = { class: "col-sm-6 mb-3 mb-sm-0" };
-const _hoisted_8 = { class: "col-sm-6" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h4><p>By default, <code>&lt;CDateRangePicker&gt;</code> returns <code>start-date</code> and <code>end-date</code> as a <code>Date</code> objects. If no date is selected, <code>&lt;CDateRangePicker&gt;</code> returns <code>null</code>.</p>', 3);
-const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = { class: "row mb-3" };
-const _hoisted_14 = { class: "col-lg-6" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name"><span class="token namespace">v-model:</span>start-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vStartDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name"><span class="token namespace">v-model:</span>end-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vEndDate<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    {{ vStartDate &amp;&amp; vStartDate.toLocaleDateString([], options) }}</span>\n<span class="line">    -</span>\n<span class="line">    {{ vEndDate &amp;&amp; vEndDate.toLocaleDateString([], options) }}</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> vStartDate <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> vEndDate <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">month</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">day</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">weekday</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        vStartDate<span class="token punctuation">,</span></span>\n<span class="line">        vEndDate<span class="token punctuation">,</span></span>\n<span class="line">        options</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker" aria-hidden="true">#</a></h4><p>Our Vue DateRangePicker component not only supports date selection but also includes a time picker feature for selecting a specific time of day. Enable the Vue TimePicker by passing a <code>timepicker</code> prop to the <code>&lt;CDatePicker/&gt;</code> component.</p>', 3);
-const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = { class: "row" };
-const _hoisted_20 = { class: "col-lg-7 mb-3" };
-const _hoisted_21 = { class: "col-lg-7" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/09/17 11:29:41 PM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-footer" tabindex="-1">With footer <a class="anchor-link" href="#with-footer" aria-hidden="true">#</a></h4><p>Here&#39;s an example with an additional footer. The footer is useful for displaying extra information or actions related to the selected date, such as &quot;Today&quot; or &quot;Clear&quot; buttons. The footer component is fully customizable and can be styled to match the rest of the application.</p>', 3);
-const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = { class: "row" };
-const _hoisted_27 = { class: "col-sm-6 mb-3 mb-sm-0" };
-const _hoisted_28 = { class: "col-sm-6" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="weeks" tabindex="-1">Weeks <a class="anchor-link" href="#weeks" aria-hidden="true">#</a></h3><p>To enable week selection, set the <code>selectionType</code> property to <code>week</code> and pass the <code>showWeekNumber</code> prop to display week numbers.</p>', 3);
-const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = { class: "row" };
-const _hoisted_34 = { class: "col-sm-6 mb-3 mb-sm-0" };
-const _hoisted_35 = { class: "col-sm-6" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">showWeekNumber</span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2025W07<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2025W12<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">showWeekNumber</span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="months" tabindex="-1">Months <a class="anchor-link" href="#months" aria-hidden="true">#</a></h3><p>Set the <code>selectionType</code> property to <code>month</code> to enable months range selection.</p>', 3);
-const _hoisted_39 = { class: "docs-example rounded-top p-4" };
-const _hoisted_40 = { class: "row" };
-const _hoisted_41 = { class: "col-sm-6 mb-3 mb-sm-0" };
-const _hoisted_42 = { class: "col-sm-6" };
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022-8<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2023-5<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="years" tabindex="-1">Years <a class="anchor-link" href="#years" aria-hidden="true">#</a></h3><p>Set the <code>selectionType</code> property to <code>year</code> to enable years range selection.</p>', 3);
-const _hoisted_46 = { class: "docs-example rounded-top p-4" };
-const _hoisted_47 = { class: "row" };
-const _hoisted_48 = { class: "col-sm-6 mb-3 mb-sm-0" };
-const _hoisted_49 = { class: "col-sm-6" };
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2028<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
-const _hoisted_53 = { class: "docs-example rounded-top p-4" };
-const _hoisted_54 = { class: "row mb-4" };
-const _hoisted_55 = { class: "col-lg-6" };
-const _hoisted_56 = { class: "row" };
-const _hoisted_57 = { class: "col-lg-5" };
-const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
-const _hoisted_61 = { class: "docs-example rounded-top p-4" };
-const _hoisted_62 = { class: "row" };
-const _hoisted_63 = { class: "col-lg-5" };
-const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">disabled</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>inputReadOnly</code> boolean attribute to prevent modification of the input&#39;s value.</p>', 3);
-const _hoisted_67 = { class: "docs-example rounded-top p-4" };
-const _hoisted_68 = { class: "row" };
-const _hoisted_69 = { class: "col-lg-5" };
-const _hoisted_70 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">inputReadOnly</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="disabled-dates" tabindex="-1">Disabled dates <a class="anchor-link" href="#disabled-dates" aria-hidden="true">#</a></h2><p>Our Vue Date Range Picker component features the ability to disable specific dates, such as weekends or holidays, by using the <code>disabledDate</code> prop. This prop takes an array and uses custom logic to determine which dates should be disabled.</p>', 3);
-const _hoisted_73 = { class: "docs-example rounded-top p-4" };
-const _hoisted_74 = { class: "row" };
-const _hoisted_75 = { class: "col-lg-5" };
-const _hoisted_76 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">    <span class="token attr-name">:calendarDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>calendarDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:disabledDates</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledDates<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:maxDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>maxDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:minDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>minDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> calendarDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> disabledDates <span class="token operator">=</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token keyword">const</span> maxDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> minDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        calendarDate<span class="token punctuation">,</span></span>\n<span class="line">        disabledDates<span class="token punctuation">,</span></span>\n<span class="line">        maxDate<span class="token punctuation">,</span></span>\n<span class="line">        minDate<span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-ranges" tabindex="-1">Custom ranges <a class="anchor-link" href="#custom-ranges" aria-hidden="true">#</a></h2><p>In order to configure custom date ranges in the Date Range component, you must use the <code>ranges</code> prop to define a set of predefined ranges. These ranges can include predefined options such as &quot;Today&quot;, &quot;Yesterday&quot;, &quot;Last 7 Days&quot;, etc.</p>', 3);
-const _hoisted_79 = { class: "docs-example rounded-top p-4" };
-const _hoisted_80 = { class: "row" };
-const _hoisted_81 = { class: "col-lg-5" };
-const _hoisted_82 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">:ranges</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRanges<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> customRanges <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">Today</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">Yesterday</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;Last 7 Days&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;Last 30 Days&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">29</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;This Month&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;Last Month&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        customRanges<span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="non-english-locale" tabindex="-1">Non-english locale <a class="anchor-link" href="#non-english-locale" aria-hidden="true">#</a></h2><p>CoreUI&#39;s Vue Date Range Picker enables the display of dates and times in non-English locales, making it essential for international users and multilingual support.</p><h3 id="auto" tabindex="-1">Auto <a class="anchor-link" href="#auto" aria-hidden="true">#</a></h3><p>By default, the DateRangePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can pass the desired language code as a prop to the DateRangePicker component. This feature enables the creation of more inclusive and accessible applications that cater to a diverse audience.</p>', 5);
-const _hoisted_87 = { class: "docs-example rounded-top p-4" };
-const _hoisted_88 = { class: "row" };
-const _hoisted_89 = { class: "col-lg-5" };
-const _hoisted_90 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="chinese" tabindex="-1">Chinese <a class="anchor-link" href="#chinese" aria-hidden="true">#</a></h3><p>Here is an example of a simple Vue Date Range Picker with Chinese localization.</p>', 3);
-const _hoisted_93 = { class: "docs-example rounded-top p-4" };
-const _hoisted_94 = { class: "row" };
-const _hoisted_95 = { class: "col-lg-5" };
-const _hoisted_96 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;入住日期&#39;, &#39;退房日期&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="japanese" tabindex="-1">Japanese <a class="anchor-link" href="#japanese" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Range Picker with Japanese locales.</p>', 3);
-const _hoisted_99 = { class: "docs-example rounded-top p-4" };
-const _hoisted_100 = { class: "row" };
-const _hoisted_101 = { class: "col-lg-5" };
-const _hoisted_102 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ja<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;日付を選択&#39;, &#39;終了日&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="korean" tabindex="-1">Korean <a class="anchor-link" href="#korean" aria-hidden="true">#</a></h3><p>Here&#39;s a simple example of a Date Range Picker with Korean locales.</p>', 3);
-const _hoisted_105 = { class: "docs-example rounded-top p-4" };
-const _hoisted_106 = { class: "row" };
-const _hoisted_107 = { class: "col-lg-5" };
-const _hoisted_108 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ko<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;날짜 선택&#39;, &#39;종료일&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="right-to-left-support" tabindex="-1">Right to left support <a class="anchor-link" href="#right-to-left-support" aria-hidden="true">#</a></h2><p>RTL support is built-in and can be explicitly controlled through the <code>$enable-rtl</code> variables in scss.</p><h3 id="hebrew" tabindex="-1">Hebrew <a class="anchor-link" href="#hebrew" aria-hidden="true">#</a></h3>', 4);
-const _hoisted_112 = { class: "docs-example rounded-top p-4" };
-const _hoisted_113 = {
-  class: "row",
-  dir: "rtl"
-};
-const _hoisted_114 = { class: "col-lg-5" };
-const _hoisted_115 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;בחר תאריך&#39;, &#39;תאריך סיום&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>he-IL<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="persian" tabindex="-1">Persian <a class="anchor-link" href="#persian" aria-hidden="true">#</a></h3>', 2);
-const _hoisted_117 = { class: "docs-example rounded-top p-4" };
-const _hoisted_118 = {
-  class: "row",
-  dir: "rtl"
-};
-const _hoisted_119 = { class: "col-lg-5" };
-const _hoisted_120 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa-IR<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;تاریخ شروع&#39;, &#39;تاریخ پایان&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="custom-formats" tabindex="-1">Custom formats <a class="anchor-link" href="#custom-formats" aria-hidden="true">#</a></h2>', 2);
-const _hoisted_122 = /* @__PURE__ */ createBaseVNode("code", null, "format", -1);
-const _hoisted_123 = /* @__PURE__ */ createBaseVNode("code", null, "<CDateRangePicker>", -1);
-const _hoisted_124 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateFormat", -1);
-const _hoisted_125 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateParse", -1);
-const _hoisted_126 = /* @__PURE__ */ createStaticVNode('<p>The provided code demonstrates how to use the <code>inputDateFormat</code> and <code>inputDateParse</code> properties. In this example, the <code>format</code> and <code>parse</code> functions from <code>date-fns</code> are employed to tailor the date presentation and interpretation.</p><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> format<span class="token punctuation">,</span> parse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns&#39;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> es <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns/locale&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
-const _hoisted_128 = { class: "docs-example rounded-top p-4" };
-const _hoisted_129 = { class: "row" };
-const _hoisted_130 = { class: "col-sm-6 mb-3 mb-sm-0" };
-const _hoisted_131 = { class: "col-sm-6" };
-const _hoisted_132 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMMM dd, yyyy&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM dd, yyyy&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Rango de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Fecha de inicio&#39;, &#39;Fecha de fin&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMMM dd&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMMM dd&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker-1" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker-1" aria-hidden="true">#</a></h4><p>This example demonstrates how to integrate a timepicker into a date range picker using the <code>timepicker</code> property.</p>', 3);
-const _hoisted_135 = { class: "docs-example rounded-top p-4" };
-const _hoisted_136 = { class: "row" };
-const _hoisted_137 = { class: "col-lg-8 mb-3" };
-const _hoisted_138 = { class: "col-lg-8" };
-const _hoisted_139 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-8 mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/09/17 11:29:41 PM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMM dd, yyyy h:mm:ss a&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMM dd, yyyy h:mm:ss a&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/09/17 11:29:41 PM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Rango de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Fecha de inicio&#39;, &#39;Fecha de fin&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMM dd h:mm:ss a&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMM dd h:mm:ss a&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue date range pickers use local CSS variables on <code>.date-picker</code> and <code>.calendar</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_143 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CDateRangePicker <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CDateRangePicker<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_146 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDateRangePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-range-picker/CDateRangePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>2</td></tr><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>close-on-select</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>If true the dropdown will be immediately closed after submitting the full date.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.<br><br>The name attributes for input elements are generated based on the <code>id</code> property:<br>- {id}-start-date<br>- {id}-end-date</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string | string[]</td><td>-</td><td>() =&gt; [&#39;Start date&#39;, &#39;End date&#39;]</td></tr><tr><td><strong>ranges</strong></td><td>Predefined date ranges the user can select from.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>separator</strong></td><td>Default icon or character character that separates two dates.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>today-button</strong></td><td>Toggle visibility or set the content of today button.</td><td>boolean|string</td><td>-</td><td>&#39;Today&#39;</td></tr><tr><td><strong>today-button-color</strong></td><td>Sets the color context of the today button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>today-button-size</strong></td><td>Size the today button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>today-button-variant</strong></td><td>Set the today button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:start-date</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr><tr><td><strong>update:end-date</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 7);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CDateRangePicker = resolveComponent("CDateRangePicker");
-  const _component_Callout = resolveComponent("Callout");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_5, [
-      createBaseVNode("div", _hoisted_6, [
-        createBaseVNode("div", _hoisted_7, [
-          createVNode(_component_CDateRangePicker, {
-            label: "Date range",
-            locale: "en-US"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_8, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2022/08/03",
-            endDate: "2022/08/17",
-            label: "Date range",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_9,
-    createBaseVNode("div", _hoisted_12, [
-      createBaseVNode("div", _hoisted_13, [
-        createBaseVNode("div", _hoisted_14, [
-          createVNode(_component_CDateRangePicker, {
-            label: "Date range",
-            locale: "en-US",
-            "start-date": $setup.vStartDate,
-            "onUpdate:startDate": _cache[0] || (_cache[0] = ($event) => $setup.vStartDate = $event),
-            "end-date": $setup.vEndDate,
-            "onUpdate:endDate": _cache[1] || (_cache[1] = ($event) => $setup.vEndDate = $event)
-          }, null, 8, ["start-date", "end-date"])
-        ])
-      ]),
-      createBaseVNode("div", null, toDisplayString($setup.vStartDate && $setup.vStartDate.toLocaleDateString([], $setup.options)) + " - " + toDisplayString($setup.vEndDate && $setup.vEndDate.toLocaleDateString([], $setup.options)), 1)
-    ]),
-    _hoisted_15,
-    createBaseVNode("div", _hoisted_18, [
-      createBaseVNode("div", _hoisted_19, [
-        createBaseVNode("div", _hoisted_20, [
-          createVNode(_component_CDateRangePicker, {
-            locale: "en-US",
-            timepicker: ""
-          })
-        ]),
-        createBaseVNode("div", _hoisted_21, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2022/08/03 02:34:17 AM",
-            endDate: "2022/09/17 11:29:41 PM",
-            locale: "en-US",
-            timepicker: ""
-          })
-        ])
-      ])
-    ]),
-    _hoisted_22,
-    createBaseVNode("div", _hoisted_25, [
-      createBaseVNode("div", _hoisted_26, [
-        createBaseVNode("div", _hoisted_27, [
-          createVNode(_component_CDateRangePicker, {
-            footer: "",
-            locale: "en-US"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_28, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2022/08/03",
-            endDate: "2022/08/17",
-            footer: "",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_29,
-    createBaseVNode("div", _hoisted_32, [
-      createBaseVNode("div", _hoisted_33, [
-        createBaseVNode("div", _hoisted_34, [
-          createVNode(_component_CDateRangePicker, {
-            label: "Date range",
-            locale: "en-US",
-            selectionType: "week",
-            showWeekNumber: ""
-          })
-        ]),
-        createBaseVNode("div", _hoisted_35, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2025W07",
-            endDate: "2025W12",
-            label: "Date range",
-            locale: "en-US",
-            selectionType: "week",
-            showWeekNumber: ""
-          })
-        ])
-      ])
-    ]),
-    _hoisted_36,
-    createBaseVNode("div", _hoisted_39, [
-      createBaseVNode("div", _hoisted_40, [
-        createBaseVNode("div", _hoisted_41, [
-          createVNode(_component_CDateRangePicker, {
-            label: "Date range",
-            locale: "en-US",
-            selectionType: "month"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_42, [
-          createVNode(_component_CDateRangePicker, {
-            label: "Date range",
-            locale: "en-US",
-            selectionType: "month",
-            startDate: "2022-8",
-            endDate: "2023-5"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_43,
-    createBaseVNode("div", _hoisted_46, [
-      createBaseVNode("div", _hoisted_47, [
-        createBaseVNode("div", _hoisted_48, [
-          createVNode(_component_CDateRangePicker, {
-            label: "Date range",
-            locale: "en-US",
-            selectionType: "year"
-          })
-        ]),
-        createBaseVNode("div", _hoisted_49, [
-          createVNode(_component_CDateRangePicker, {
-            label: "Date range",
-            locale: "en-US",
-            selectionType: "year",
-            startDate: "2022",
-            endDate: "2028"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_50,
-    createBaseVNode("div", _hoisted_53, [
-      createBaseVNode("div", _hoisted_54, [
-        createBaseVNode("div", _hoisted_55, [
-          createVNode(_component_CDateRangePicker, {
-            locale: "en-US",
-            size: "lg"
-          })
-        ])
-      ]),
-      createBaseVNode("div", _hoisted_56, [
-        createBaseVNode("div", _hoisted_57, [
-          createVNode(_component_CDateRangePicker, {
-            locale: "en-US",
-            size: "sm"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_58,
-    createBaseVNode("div", _hoisted_61, [
-      createBaseVNode("div", _hoisted_62, [
-        createBaseVNode("div", _hoisted_63, [
-          createVNode(_component_CDateRangePicker, {
-            disabled: "",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_64,
-    createBaseVNode("div", _hoisted_67, [
-      createBaseVNode("div", _hoisted_68, [
-        createBaseVNode("div", _hoisted_69, [
-          createVNode(_component_CDateRangePicker, {
-            inputReadOnly: "",
-            locale: "en-US"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_70,
-    createBaseVNode("div", _hoisted_73, [
-      createBaseVNode("div", _hoisted_74, [
-        createBaseVNode("div", _hoisted_75, [
-          createVNode(_component_CDateRangePicker, {
-            calendarDate: $setup.calendarDate,
-            disabledDates: $setup.disabledDates,
-            locale: "en-US",
-            maxDate: $setup.maxDate,
-            minDate: $setup.minDate
-          }, null, 8, ["calendarDate", "disabledDates", "maxDate", "minDate"])
-        ])
-      ])
-    ]),
-    _hoisted_76,
-    createBaseVNode("div", _hoisted_79, [
-      createBaseVNode("div", _hoisted_80, [
-        createBaseVNode("div", _hoisted_81, [
-          createVNode(_component_CDateRangePicker, { ranges: $setup.customRanges }, null, 8, ["ranges"])
-        ])
-      ])
-    ]),
-    _hoisted_82,
-    createBaseVNode("div", _hoisted_87, [
-      createBaseVNode("div", _hoisted_88, [
-        createBaseVNode("div", _hoisted_89, [
-          createVNode(_component_CDateRangePicker)
-        ])
-      ])
-    ]),
-    _hoisted_90,
-    createBaseVNode("div", _hoisted_93, [
-      createBaseVNode("div", _hoisted_94, [
-        createBaseVNode("div", _hoisted_95, [
-          createVNode(_component_CDateRangePicker, {
-            locale: "zh-CN",
-            placeholder: ["入住日期", "退房日期"]
-          })
-        ])
-      ])
-    ]),
-    _hoisted_96,
-    createBaseVNode("div", _hoisted_99, [
-      createBaseVNode("div", _hoisted_100, [
-        createBaseVNode("div", _hoisted_101, [
-          createVNode(_component_CDateRangePicker, {
-            locale: "ja",
-            placeholder: ["日付を選択", "終了日"]
-          })
-        ])
-      ])
-    ]),
-    _hoisted_102,
-    createBaseVNode("div", _hoisted_105, [
-      createBaseVNode("div", _hoisted_106, [
-        createBaseVNode("div", _hoisted_107, [
-          createVNode(_component_CDateRangePicker, {
-            locale: "ko",
-            placeholder: ["날짜 선택", "종료일"]
-          })
-        ])
-      ])
-    ]),
-    _hoisted_108,
-    createBaseVNode("div", _hoisted_112, [
-      createBaseVNode("div", _hoisted_113, [
-        createBaseVNode("div", _hoisted_114, [
-          createVNode(_component_CDateRangePicker, {
-            placeholder: ["בחר תאריך", "תאריך סיום"],
-            locale: "he-IL"
-          })
-        ])
-      ])
-    ]),
-    _hoisted_115,
-    createBaseVNode("div", _hoisted_117, [
-      createBaseVNode("div", _hoisted_118, [
-        createBaseVNode("div", _hoisted_119, [
-          createVNode(_component_CDateRangePicker, {
-            locale: "fa-IR",
-            placeholder: ["تاریخ شروع", "تاریخ پایان"]
-          })
-        ])
-      ])
-    ]),
-    _hoisted_120,
-    createVNode(_component_Callout, { color: "info" }, {
-      default: withCtx(() => [
-        createTextVNode(" Heads up! As of v5.0.0, the "),
-        _hoisted_122,
-        createTextVNode(" property is removed in "),
-        _hoisted_123,
-        createTextVNode(". Instead, utilize the "),
-        _hoisted_124,
-        createTextVNode(" to format dates into custom strings and "),
-        _hoisted_125,
-        createTextVNode(" to parse custom strings into Date objects. ")
-      ]),
-      _: 1
-    }),
-    _hoisted_126,
-    createBaseVNode("div", _hoisted_128, [
-      createBaseVNode("div", _hoisted_129, [
-        createBaseVNode("div", _hoisted_130, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2022/08/03",
-            endDate: "2022/08/17",
-            label: "Date range",
-            locale: "en-US",
-            inputDateParse: (date) => $setup.parse(date, "MMMM dd, yyyy", /* @__PURE__ */ new Date()),
-            inputDateFormat: (date) => $setup.format(new Date(date), "MMMM dd, yyyy")
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ]),
-        createBaseVNode("div", _hoisted_131, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2022/08/03",
-            endDate: "2022/08/17",
-            label: "Rango de fechas",
-            locale: "es-ES",
-            placeholder: ["Fecha de inicio", "Fecha de fin"],
-            inputDateParse: (date) => $setup.parse(date, "yyyy MMMM dd", /* @__PURE__ */ new Date(), { locale: $setup.es }),
-            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMMM dd", { locale: $setup.es })
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ])
-      ])
-    ]),
-    _hoisted_132,
-    createBaseVNode("div", _hoisted_135, [
-      createBaseVNode("div", _hoisted_136, [
-        createBaseVNode("div", _hoisted_137, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2022/08/03 02:34:17 AM",
-            endDate: "2022/09/17 11:29:41 PM",
-            label: "Date range",
-            locale: "en-US",
-            timepicker: "",
-            inputDateParse: (date) => $setup.parse(date, "MMM dd, yyyy h:mm:ss a", /* @__PURE__ */ new Date()),
-            inputDateFormat: (date) => $setup.format(new Date(date), "MMM dd, yyyy h:mm:ss a")
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ]),
-        createBaseVNode("div", _hoisted_138, [
-          createVNode(_component_CDateRangePicker, {
-            startDate: "2022/08/03 02:34:17 AM",
-            endDate: "2022/09/17 11:29:41 PM",
-            label: "Rango de fechas",
-            locale: "es-ES",
-            placeholder: ["Fecha de inicio", "Fecha de fin"],
-            timepicker: "",
-            inputDateParse: (date) => $setup.parse(date, "yyyy MMM dd h:mm:ss a", /* @__PURE__ */ new Date(), { locale: $setup.es }),
-            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMM dd h:mm:ss a", { locale: $setup.es })
-          }, null, 8, ["inputDateParse", "inputDateFormat"])
-        ])
-      ])
-    ]),
-    _hoisted_139,
-    createVNode(_component_ScssDocs, {
-      file: "_date-picker.scss",
-      capture: "date-picker-css-vars"
-    }),
-    createVNode(_component_ScssDocs, {
-      file: "_calendar.scss",
-      capture: "calendar-css-vars"
-    }),
-    _hoisted_143,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "date-picker-variables"
-    }),
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "calendar-variables"
-    }),
-    _hoisted_146
-  ]);
-}
-const dateRangePicker_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "date-range-picker.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/date-range-picker.html","title":"Vue Date Range Picker Component","lang":"en-US","frontmatter":{"title":"Vue Date Range Picker Component","name":"Date Range Picker","description":"The Vue Date Range Picker component by CoreUI is a versatile tool for selecting date ranges. It is designed for compatibility across various browsers and devices, making it a reliable choice for diverse applications.","other_frameworks":"date-range-picker","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/date-range-picker.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Days","slug":"days","link":"#days","children":[]},{"level":3,"title":"Weeks","slug":"weeks","link":"#weeks","children":[]},{"level":3,"title":"Months","slug":"months","link":"#months","children":[]},{"level":3,"title":"Years","slug":"years","link":"#years","children":[]}]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Readonly","slug":"readonly","link":"#readonly","children":[]},{"level":2,"title":"Disabled dates","slug":"disabled-dates","link":"#disabled-dates","children":[]},{"level":2,"title":"Custom ranges","slug":"custom-ranges","link":"#custom-ranges","children":[]},{"level":2,"title":"Non-english locale","slug":"non-english-locale","link":"#non-english-locale","children":[{"level":3,"title":"Auto","slug":"auto","link":"#auto","children":[]},{"level":3,"title":"Chinese","slug":"chinese","link":"#chinese","children":[]},{"level":3,"title":"Japanese","slug":"japanese","link":"#japanese","children":[]},{"level":3,"title":"Korean","slug":"korean","link":"#korean","children":[]}]},{"level":2,"title":"Right to left support","slug":"right-to-left-support","link":"#right-to-left-support","children":[{"level":3,"title":"Hebrew","slug":"hebrew","link":"#hebrew","children":[]},{"level":3,"title":"Persian","slug":"persian","link":"#persian","children":[]}]},{"level":2,"title":"Custom formats","slug":"custom-formats","link":"#custom-formats","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CDateRangePicker","slug":"cdaterangepicker","link":"#cdaterangepicker","children":[]}]}],"filePathRelative":"forms/date-range-picker.md"}');
-export {
-  dateRangePicker_html as comp,
-  data
-};
diff --git a/vue/docs/assets/date-range-picker.html-T7otEH2H.js b/vue/docs/assets/date-range-picker.html-T7otEH2H.js
new file mode 100644
index 00000000000..fdd97240ffd
--- /dev/null
+++ b/vue/docs/assets/date-range-picker.html-T7otEH2H.js
@@ -0,0 +1,554 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, t as toDisplayString, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+import { f as format, p as parse, e as es } from "./es-DXofg4kJ.js";
+const _sfc_main = {
+  setup() {
+    const vStartDate = ref(new Date(2022, 2, 1));
+    const vEndDate = ref(new Date(2022, 2, 7));
+    const options = {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      weekday: "long"
+    };
+    const calendarDate = new Date(2022, 2, 1);
+    const disabledDates = [
+      [new Date(2022, 2, 4), new Date(2022, 2, 7)],
+      new Date(2022, 2, 16),
+      new Date(2022, 3, 16),
+      [new Date(2022, 4, 2), new Date(2022, 4, 8)]
+    ];
+    const maxDate = new Date(2022, 5, 0);
+    const minDate = new Date(2022, 1, 1);
+    const customRanges = {
+      Today: [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()],
+      Yesterday: [
+        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)),
+        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1))
+      ],
+      "Last 7 Days": [
+        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 6)),
+        new Date(/* @__PURE__ */ new Date())
+      ],
+      "Last 30 Days": [
+        new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 29)),
+        new Date(/* @__PURE__ */ new Date())
+      ],
+      "This Month": [
+        new Date((/* @__PURE__ */ new Date()).setDate(1)),
+        new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() + 1, 0)
+      ],
+      "Last Month": [
+        new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() - 1, 1),
+        new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 0)
+      ]
+    };
+    return {
+      format,
+      parse,
+      es,
+      vStartDate,
+      vEndDate,
+      options,
+      calendarDate,
+      disabledDates,
+      maxDate,
+      minDate,
+      customRanges
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "example",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Example "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#example",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Explore basic usage of the Vue Date Range Picker through sample code snippets that demonstrate its core functionality.", -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "days",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Days "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#days",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, "Select date ranges by day with examples including basic usage, as well as variants featuring time pickers and footers for enhanced functionality.", -1);
+const _hoisted_5 = { class: "docs-example rounded-top p-4" };
+const _hoisted_6 = { class: "row" };
+const _hoisted_7 = { class: "col-sm-6 mb-3 mb-sm-0" };
+const _hoisted_8 = { class: "col-sm-6" };
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h4><p>By default, <code>&lt;CDateRangePicker&gt;</code> returns <code>start-date</code> and <code>end-date</code> as a <code>Date</code> objects. If no date is selected, <code>&lt;CDateRangePicker&gt;</code> returns <code>null</code>.</p>', 3);
+const _hoisted_12 = { class: "docs-example rounded-top p-4" };
+const _hoisted_13 = { class: "row mb-3" };
+const _hoisted_14 = { class: "col-lg-6" };
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name"><span class="token namespace">v-model:</span>start-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vStartDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name"><span class="token namespace">v-model:</span>end-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vEndDate<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    {{ vStartDate &amp;&amp; vStartDate.toLocaleDateString([], options) }}</span>\n<span class="line">    -</span>\n<span class="line">    {{ vEndDate &amp;&amp; vEndDate.toLocaleDateString([], options) }}</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> vStartDate <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> vEndDate <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">month</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">day</span><span class="token operator">:</span> <span class="token string">&#39;numeric&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">weekday</span><span class="token operator">:</span> <span class="token string">&#39;long&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        vStartDate<span class="token punctuation">,</span></span>\n<span class="line">        vEndDate<span class="token punctuation">,</span></span>\n<span class="line">        options</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker" aria-hidden="true">#</a></h4><p>Our Vue DateRangePicker component not only supports date selection but also includes a time picker feature for selecting a specific time of day. Enable the Vue TimePicker by passing a <code>timepicker</code> prop to the <code>&lt;CDatePicker/&gt;</code> component.</p>', 3);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = { class: "row" };
+const _hoisted_20 = { class: "col-lg-7 mb-3" };
+const _hoisted_21 = { class: "col-lg-7" };
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/09/17 11:29:41 PM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">timepicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-footer" tabindex="-1">With footer <a class="anchor-link" href="#with-footer" aria-hidden="true">#</a></h4><p>Here&#39;s an example with an additional footer. The footer is useful for displaying extra information or actions related to the selected date, such as &quot;Today&quot; or &quot;Clear&quot; buttons. The footer component is fully customizable and can be styled to match the rest of the application.</p>', 3);
+const _hoisted_25 = { class: "docs-example rounded-top p-4" };
+const _hoisted_26 = { class: "row" };
+const _hoisted_27 = { class: "col-sm-6 mb-3 mb-sm-0" };
+const _hoisted_28 = { class: "col-sm-6" };
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span> <span class="token attr-name">footer</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="weeks" tabindex="-1">Weeks <a class="anchor-link" href="#weeks" aria-hidden="true">#</a></h3><p>To enable week selection, set the <code>selectionType</code> property to <code>week</code> and pass the <code>showWeekNumber</code> prop to display week numbers.</p>', 3);
+const _hoisted_32 = { class: "docs-example rounded-top p-4" };
+const _hoisted_33 = { class: "row" };
+const _hoisted_34 = { class: "col-sm-6 mb-3 mb-sm-0" };
+const _hoisted_35 = { class: "col-sm-6" };
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">showWeekNumber</span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2025W07<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2025W12<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">showWeekNumber</span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="months" tabindex="-1">Months <a class="anchor-link" href="#months" aria-hidden="true">#</a></h3><p>Set the <code>selectionType</code> property to <code>month</code> to enable months range selection.</p>', 3);
+const _hoisted_39 = { class: "docs-example rounded-top p-4" };
+const _hoisted_40 = { class: "row" };
+const _hoisted_41 = { class: "col-sm-6 mb-3 mb-sm-0" };
+const _hoisted_42 = { class: "col-sm-6" };
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022-8<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2023-5<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="years" tabindex="-1">Years <a class="anchor-link" href="#years" aria-hidden="true">#</a></h3><p>Set the <code>selectionType</code> property to <code>year</code> to enable years range selection.</p>', 3);
+const _hoisted_46 = { class: "docs-example rounded-top p-4" };
+const _hoisted_47 = { class: "row" };
+const _hoisted_48 = { class: "col-sm-6 mb-3 mb-sm-0" };
+const _hoisted_49 = { class: "col-sm-6" };
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2028<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
+const _hoisted_53 = { class: "docs-example rounded-top p-4" };
+const _hoisted_54 = { class: "row mb-4" };
+const _hoisted_55 = { class: "col-lg-6" };
+const _hoisted_56 = { class: "row" };
+const _hoisted_57 = { class: "col-lg-5" };
+const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
+const _hoisted_61 = { class: "docs-example rounded-top p-4" };
+const _hoisted_62 = { class: "row" };
+const _hoisted_63 = { class: "col-lg-5" };
+const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">disabled</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>inputReadOnly</code> boolean attribute to prevent modification of the input&#39;s value.</p>', 3);
+const _hoisted_67 = { class: "docs-example rounded-top p-4" };
+const _hoisted_68 = { class: "row" };
+const _hoisted_69 = { class: "col-lg-5" };
+const _hoisted_70 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">inputReadOnly</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="disabled-dates" tabindex="-1">Disabled dates <a class="anchor-link" href="#disabled-dates" aria-hidden="true">#</a></h2><p>Our Vue Date Range Picker component features the ability to disable specific dates, such as weekends or holidays, by using the <code>disabledDate</code> prop. This prop takes an array and uses custom logic to determine which dates should be disabled.</p>', 3);
+const _hoisted_73 = { class: "docs-example rounded-top p-4" };
+const _hoisted_74 = { class: "row" };
+const _hoisted_75 = { class: "col-lg-5" };
+const _hoisted_76 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">    <span class="token attr-name">:calendarDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>calendarDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:disabledDates</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledDates<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:maxDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>maxDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:minDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>minDate<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> calendarDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> disabledDates <span class="token operator">=</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token keyword">const</span> maxDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">const</span> minDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        calendarDate<span class="token punctuation">,</span></span>\n<span class="line">        disabledDates<span class="token punctuation">,</span></span>\n<span class="line">        maxDate<span class="token punctuation">,</span></span>\n<span class="line">        minDate<span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-ranges" tabindex="-1">Custom ranges <a class="anchor-link" href="#custom-ranges" aria-hidden="true">#</a></h2><p>In order to configure custom date ranges in the Date Range component, you must use the <code>ranges</code> prop to define a set of predefined ranges. These ranges can include predefined options such as &quot;Today&quot;, &quot;Yesterday&quot;, &quot;Last 7 Days&quot;, etc.</p>', 3);
+const _hoisted_79 = { class: "docs-example rounded-top p-4" };
+const _hoisted_80 = { class: "row" };
+const _hoisted_81 = { class: "col-lg-5" };
+const _hoisted_82 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">:ranges</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRanges<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> customRanges <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">Today</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">Yesterday</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;Last 7 Days&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;Last 30 Days&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">29</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;This Month&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string-property property">&#39;Last Month&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        customRanges<span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="non-english-locale" tabindex="-1">Non-english locale <a class="anchor-link" href="#non-english-locale" aria-hidden="true">#</a></h2><p>CoreUI&#39;s Vue Date Range Picker enables the display of dates and times in non-English locales, making it essential for international users and multilingual support.</p><h3 id="auto" tabindex="-1">Auto <a class="anchor-link" href="#auto" aria-hidden="true">#</a></h3><p>By default, the DateRangePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can pass the desired language code as a prop to the DateRangePicker component. This feature enables the creation of more inclusive and accessible applications that cater to a diverse audience.</p>', 5);
+const _hoisted_87 = { class: "docs-example rounded-top p-4" };
+const _hoisted_88 = { class: "row" };
+const _hoisted_89 = { class: "col-lg-5" };
+const _hoisted_90 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="chinese" tabindex="-1">Chinese <a class="anchor-link" href="#chinese" aria-hidden="true">#</a></h3><p>Here is an example of a simple Vue Date Range Picker with Chinese localization.</p>', 3);
+const _hoisted_93 = { class: "docs-example rounded-top p-4" };
+const _hoisted_94 = { class: "row" };
+const _hoisted_95 = { class: "col-lg-5" };
+const _hoisted_96 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;入住日期&#39;, &#39;退房日期&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="japanese" tabindex="-1">Japanese <a class="anchor-link" href="#japanese" aria-hidden="true">#</a></h3><p>Below is an example of a basic Vue Date Range Picker with Japanese locales.</p>', 3);
+const _hoisted_99 = { class: "docs-example rounded-top p-4" };
+const _hoisted_100 = { class: "row" };
+const _hoisted_101 = { class: "col-lg-5" };
+const _hoisted_102 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ja<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;日付を選択&#39;, &#39;終了日&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="korean" tabindex="-1">Korean <a class="anchor-link" href="#korean" aria-hidden="true">#</a></h3><p>Here&#39;s a simple example of a Date Range Picker with Korean locales.</p>', 3);
+const _hoisted_105 = { class: "docs-example rounded-top p-4" };
+const _hoisted_106 = { class: "row" };
+const _hoisted_107 = { class: "col-lg-5" };
+const _hoisted_108 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ko<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;날짜 선택&#39;, &#39;종료일&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="right-to-left-support" tabindex="-1">Right to left support <a class="anchor-link" href="#right-to-left-support" aria-hidden="true">#</a></h2><p>RTL support is built-in and can be explicitly controlled through the <code>$enable-rtl</code> variables in scss.</p><h3 id="hebrew" tabindex="-1">Hebrew <a class="anchor-link" href="#hebrew" aria-hidden="true">#</a></h3>', 4);
+const _hoisted_112 = { class: "docs-example rounded-top p-4" };
+const _hoisted_113 = {
+  class: "row",
+  dir: "rtl"
+};
+const _hoisted_114 = { class: "col-lg-5" };
+const _hoisted_115 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;בחר תאריך&#39;, &#39;תאריך סיום&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>he-IL<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="persian" tabindex="-1">Persian <a class="anchor-link" href="#persian" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_117 = { class: "docs-example rounded-top p-4" };
+const _hoisted_118 = {
+  class: "row",
+  dir: "rtl"
+};
+const _hoisted_119 = { class: "col-lg-5" };
+const _hoisted_120 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa-IR<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;تاریخ شروع&#39;, &#39;تاریخ پایان&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="custom-formats" tabindex="-1">Custom formats <a class="anchor-link" href="#custom-formats" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_122 = /* @__PURE__ */ createBaseVNode("code", null, "format", -1);
+const _hoisted_123 = /* @__PURE__ */ createBaseVNode("code", null, "<CDateRangePicker>", -1);
+const _hoisted_124 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateFormat", -1);
+const _hoisted_125 = /* @__PURE__ */ createBaseVNode("code", null, "inputDateParse", -1);
+const _hoisted_126 = /* @__PURE__ */ createStaticVNode('<p>The provided code demonstrates how to use the <code>inputDateFormat</code> and <code>inputDateParse</code> properties. In this example, the <code>format</code> and <code>parse</code> functions from <code>date-fns</code> are employed to tailor the date presentation and interpretation.</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> format<span class="token punctuation">,</span> parse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns&#39;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> es <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;date-fns/locale&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div>', 2);
+const _hoisted_128 = { class: "docs-example rounded-top p-4" };
+const _hoisted_129 = { class: "row" };
+const _hoisted_130 = { class: "col-sm-6 mb-3 mb-sm-0" };
+const _hoisted_131 = { class: "col-sm-6" };
+const _hoisted_132 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMMM dd, yyyy&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM dd, yyyy&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/17<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Rango de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Fecha de inicio&#39;, &#39;Fecha de fin&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMMM dd&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMMM dd&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="with-timepicker-1" tabindex="-1">With timepicker <a class="anchor-link" href="#with-timepicker-1" aria-hidden="true">#</a></h4><p>This example demonstrates how to integrate a timepicker into a date range picker using the <code>timepicker</code> property.</p>', 3);
+const _hoisted_135 = { class: "docs-example rounded-top p-4" };
+const _hoisted_136 = { class: "row" };
+const _hoisted_137 = { class: "col-lg-8 mb-3" };
+const _hoisted_138 = { class: "col-lg-8" };
+const _hoisted_139 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-8 mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/09/17 11:29:41 PM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;MMM dd, yyyy h:mm:ss a&#39;, new Date())<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMM dd, yyyy h:mm:ss a&#39;)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-lg-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">      <span class="token attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/08/03 02:34:17 AM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">endDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2022/09/17 11:29:41 PM<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Rango de fechas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>es-ES<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Fecha de inicio&#39;, &#39;Fecha de fin&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">timepicker</span></span>\n<span class="line">      <span class="token attr-name">:inputDateParse</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; parse(date, &#39;yyyy MMM dd h:mm:ss a&#39;, new Date(), { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;yyyy MMM dd h:mm:ss a&#39;, { locale: es })<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue date range pickers use local CSS variables on <code>.date-picker</code> and <code>.calendar</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_143 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CDateRangePicker <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CDateRangePicker<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_146 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDateRangePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/date-range-picker/CDateRangePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>calendars</strong></td><td>The number of calendars that render on desktop devices.</td><td>number</td><td>-</td><td>2</td></tr><tr><td><strong>calendar-date</strong></td><td>Default date of the component</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>close-on-select</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>If true the dropdown will be immediately closed after submitting the full date.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>day-format</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set the format of day name.<br><code>@default</code> &#39;numeric&#39;</td><td>func|string</td><td>-</td><td>&#39;numeric&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled-dates</strong></td><td>Specify the list of dates that cannot be selected.</td><td>Date[] | Date[][]</td><td>-</td><td>-</td></tr><tr><td><strong>end-date</strong></td><td>Initial selected to date (range).</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>first-day-of-week</strong></td><td>Sets the day of start week.<br>- 0 - Sunday,<br>- 1 - Monday,<br>- 2 - Tuesday,<br>- 3 - Wednesday,<br>- 4 - Thursday,<br>- 5 - Friday,<br>- 6 - Saturday,</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>format</strong></td><td>Set date format.<br>We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>Toggle visibility of footer element or set the content of footer.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix &quot;-start-date&quot; and &quot;-end-date&quot; will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.<br><br><strong>[Deprecated since v5.3.0]</strong> If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.:<br>- {id}-start-date<br>- {id}-end-date</td><td>string | [string, string]</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-date-format</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to format the selected date into a string according to a custom format.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-date-parse</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Custom function to parse the input value into a valid Date object.</td><td>func</td><td>-</td><td>-</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>&#39;default&#39;</td></tr><tr><td><strong>max-date</strong></td><td>Max selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>min-date</strong></td><td>Min selectable date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix &quot;-start-date&quot; and &quot;-end-date&quot; will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately.<br><br>Example for single string: &#39;date-input&#39;<br>Result: &#39;date-input-start-date&#39;, &#39;date-input-end-date&#39;<br><br>Example for array: [&#39;start-date-input&#39;, &#39;end-date-input&#39;]<br>Result: &#39;start-date-input&#39;, &#39;end-date-input&#39;</td><td>string | [string, string]</td><td>-</td><td>-</td></tr><tr><td><strong>navigation</strong></td><td>Show arrows navigation.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>nav-year-first</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Reorder year-month navigation, and render year first.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string | [string, string]</td><td>-</td><td>() =&gt; [&#39;Start date&#39;, &#39;End date&#39;]</td></tr><tr><td><strong>ranges</strong></td><td>Predefined date ranges the user can select from.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-end-date</strong></td><td>Toggle select mode between start and end date.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the <code>showAdjacementDays</code> option is set to true.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>selection-type</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify the type of date selection as day, week, month, or year.</td><td>string</td><td><code>day</code>, <code>week</code>, <code>month</code>, <code>year</code></td><td>&#39;day&#39;</td></tr><tr><td><strong>show-adjacement-days</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>show-week-number</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Set whether to display week numbers in the calendar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>separator</strong></td><td>Default icon or character character that separates two dates.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>start-date</strong></td><td>Initial selected date.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>timepicker</strong></td><td>Provide an additional time selection by adding select boxes to choose times.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>today-button</strong></td><td>Toggle visibility or set the content of today button.</td><td>boolean|string</td><td>-</td><td>&#39;Today&#39;</td></tr><tr><td><strong>today-button-color</strong></td><td>Sets the color context of the today button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>today-button-size</strong></td><td>Size the today button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>today-button-variant</strong></td><td>Set the today button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>weekday-format</strong></td><td>Set length or format of day name.<br><code>@type</code> number | &#39;long&#39; | &#39;narrow&#39; | &#39;short&#39;</td><td>func|number|string</td><td>-</td><td>2</td></tr><tr><td><strong>week-numbers-label</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Label displayed over week numbers in the calendar.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>end-date-change</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>start-date-change</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date</code> - date object<br><strong>formatedDate</strong> <code>string</code> - formated date</td></tr><tr><td><strong>update:start-date</strong></td><td>Callback fired when the start date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr><tr><td><strong>update:end-date</strong></td><td>Callback fired when the end date changed.</td><td><strong>date</strong> <code>Date | null</code> - date object</td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CDateRangePicker = resolveComponent("CDateRangePicker");
+  const _component_Callout = resolveComponent("Callout");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    _hoisted_3,
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_5, [
+      createBaseVNode("div", _hoisted_6, [
+        createBaseVNode("div", _hoisted_7, [
+          createVNode(_component_CDateRangePicker, {
+            label: "Date range",
+            locale: "en-US"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_8, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2022/08/03",
+            endDate: "2022/08/17",
+            label: "Date range",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_9,
+    createBaseVNode("div", _hoisted_12, [
+      createBaseVNode("div", _hoisted_13, [
+        createBaseVNode("div", _hoisted_14, [
+          createVNode(_component_CDateRangePicker, {
+            label: "Date range",
+            locale: "en-US",
+            "start-date": $setup.vStartDate,
+            "onUpdate:startDate": _cache[0] || (_cache[0] = ($event) => $setup.vStartDate = $event),
+            "end-date": $setup.vEndDate,
+            "onUpdate:endDate": _cache[1] || (_cache[1] = ($event) => $setup.vEndDate = $event)
+          }, null, 8, ["start-date", "end-date"])
+        ])
+      ]),
+      createBaseVNode("div", null, toDisplayString($setup.vStartDate && $setup.vStartDate.toLocaleDateString([], $setup.options)) + " - " + toDisplayString($setup.vEndDate && $setup.vEndDate.toLocaleDateString([], $setup.options)), 1)
+    ]),
+    _hoisted_15,
+    createBaseVNode("div", _hoisted_18, [
+      createBaseVNode("div", _hoisted_19, [
+        createBaseVNode("div", _hoisted_20, [
+          createVNode(_component_CDateRangePicker, {
+            locale: "en-US",
+            timepicker: ""
+          })
+        ]),
+        createBaseVNode("div", _hoisted_21, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2022/08/03 02:34:17 AM",
+            endDate: "2022/09/17 11:29:41 PM",
+            locale: "en-US",
+            timepicker: ""
+          })
+        ])
+      ])
+    ]),
+    _hoisted_22,
+    createBaseVNode("div", _hoisted_25, [
+      createBaseVNode("div", _hoisted_26, [
+        createBaseVNode("div", _hoisted_27, [
+          createVNode(_component_CDateRangePicker, {
+            footer: "",
+            locale: "en-US"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_28, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2022/08/03",
+            endDate: "2022/08/17",
+            footer: "",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_29,
+    createBaseVNode("div", _hoisted_32, [
+      createBaseVNode("div", _hoisted_33, [
+        createBaseVNode("div", _hoisted_34, [
+          createVNode(_component_CDateRangePicker, {
+            label: "Date range",
+            locale: "en-US",
+            selectionType: "week",
+            showWeekNumber: ""
+          })
+        ]),
+        createBaseVNode("div", _hoisted_35, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2025W07",
+            endDate: "2025W12",
+            label: "Date range",
+            locale: "en-US",
+            selectionType: "week",
+            showWeekNumber: ""
+          })
+        ])
+      ])
+    ]),
+    _hoisted_36,
+    createBaseVNode("div", _hoisted_39, [
+      createBaseVNode("div", _hoisted_40, [
+        createBaseVNode("div", _hoisted_41, [
+          createVNode(_component_CDateRangePicker, {
+            label: "Date range",
+            locale: "en-US",
+            selectionType: "month"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_42, [
+          createVNode(_component_CDateRangePicker, {
+            label: "Date range",
+            locale: "en-US",
+            selectionType: "month",
+            startDate: "2022-8",
+            endDate: "2023-5"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_43,
+    createBaseVNode("div", _hoisted_46, [
+      createBaseVNode("div", _hoisted_47, [
+        createBaseVNode("div", _hoisted_48, [
+          createVNode(_component_CDateRangePicker, {
+            label: "Date range",
+            locale: "en-US",
+            selectionType: "year"
+          })
+        ]),
+        createBaseVNode("div", _hoisted_49, [
+          createVNode(_component_CDateRangePicker, {
+            label: "Date range",
+            locale: "en-US",
+            selectionType: "year",
+            startDate: "2022",
+            endDate: "2028"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_50,
+    createBaseVNode("div", _hoisted_53, [
+      createBaseVNode("div", _hoisted_54, [
+        createBaseVNode("div", _hoisted_55, [
+          createVNode(_component_CDateRangePicker, {
+            locale: "en-US",
+            size: "lg"
+          })
+        ])
+      ]),
+      createBaseVNode("div", _hoisted_56, [
+        createBaseVNode("div", _hoisted_57, [
+          createVNode(_component_CDateRangePicker, {
+            locale: "en-US",
+            size: "sm"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_58,
+    createBaseVNode("div", _hoisted_61, [
+      createBaseVNode("div", _hoisted_62, [
+        createBaseVNode("div", _hoisted_63, [
+          createVNode(_component_CDateRangePicker, {
+            disabled: "",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_64,
+    createBaseVNode("div", _hoisted_67, [
+      createBaseVNode("div", _hoisted_68, [
+        createBaseVNode("div", _hoisted_69, [
+          createVNode(_component_CDateRangePicker, {
+            inputReadOnly: "",
+            locale: "en-US"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_70,
+    createBaseVNode("div", _hoisted_73, [
+      createBaseVNode("div", _hoisted_74, [
+        createBaseVNode("div", _hoisted_75, [
+          createVNode(_component_CDateRangePicker, {
+            calendarDate: $setup.calendarDate,
+            disabledDates: $setup.disabledDates,
+            locale: "en-US",
+            maxDate: $setup.maxDate,
+            minDate: $setup.minDate
+          }, null, 8, ["calendarDate", "disabledDates", "maxDate", "minDate"])
+        ])
+      ])
+    ]),
+    _hoisted_76,
+    createBaseVNode("div", _hoisted_79, [
+      createBaseVNode("div", _hoisted_80, [
+        createBaseVNode("div", _hoisted_81, [
+          createVNode(_component_CDateRangePicker, { ranges: $setup.customRanges }, null, 8, ["ranges"])
+        ])
+      ])
+    ]),
+    _hoisted_82,
+    createBaseVNode("div", _hoisted_87, [
+      createBaseVNode("div", _hoisted_88, [
+        createBaseVNode("div", _hoisted_89, [
+          createVNode(_component_CDateRangePicker)
+        ])
+      ])
+    ]),
+    _hoisted_90,
+    createBaseVNode("div", _hoisted_93, [
+      createBaseVNode("div", _hoisted_94, [
+        createBaseVNode("div", _hoisted_95, [
+          createVNode(_component_CDateRangePicker, {
+            locale: "zh-CN",
+            placeholder: ["入住日期", "退房日期"]
+          })
+        ])
+      ])
+    ]),
+    _hoisted_96,
+    createBaseVNode("div", _hoisted_99, [
+      createBaseVNode("div", _hoisted_100, [
+        createBaseVNode("div", _hoisted_101, [
+          createVNode(_component_CDateRangePicker, {
+            locale: "ja",
+            placeholder: ["日付を選択", "終了日"]
+          })
+        ])
+      ])
+    ]),
+    _hoisted_102,
+    createBaseVNode("div", _hoisted_105, [
+      createBaseVNode("div", _hoisted_106, [
+        createBaseVNode("div", _hoisted_107, [
+          createVNode(_component_CDateRangePicker, {
+            locale: "ko",
+            placeholder: ["날짜 선택", "종료일"]
+          })
+        ])
+      ])
+    ]),
+    _hoisted_108,
+    createBaseVNode("div", _hoisted_112, [
+      createBaseVNode("div", _hoisted_113, [
+        createBaseVNode("div", _hoisted_114, [
+          createVNode(_component_CDateRangePicker, {
+            placeholder: ["בחר תאריך", "תאריך סיום"],
+            locale: "he-IL"
+          })
+        ])
+      ])
+    ]),
+    _hoisted_115,
+    createBaseVNode("div", _hoisted_117, [
+      createBaseVNode("div", _hoisted_118, [
+        createBaseVNode("div", _hoisted_119, [
+          createVNode(_component_CDateRangePicker, {
+            locale: "fa-IR",
+            placeholder: ["تاریخ شروع", "تاریخ پایان"]
+          })
+        ])
+      ])
+    ]),
+    _hoisted_120,
+    createVNode(_component_Callout, { color: "info" }, {
+      default: withCtx(() => [
+        createTextVNode(" Heads up! As of v5.0.0, the "),
+        _hoisted_122,
+        createTextVNode(" property is removed in "),
+        _hoisted_123,
+        createTextVNode(". Instead, utilize the "),
+        _hoisted_124,
+        createTextVNode(" to format dates into custom strings and "),
+        _hoisted_125,
+        createTextVNode(" to parse custom strings into Date objects. ")
+      ]),
+      _: 1
+    }),
+    _hoisted_126,
+    createBaseVNode("div", _hoisted_128, [
+      createBaseVNode("div", _hoisted_129, [
+        createBaseVNode("div", _hoisted_130, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2022/08/03",
+            endDate: "2022/08/17",
+            label: "Date range",
+            locale: "en-US",
+            inputDateParse: (date) => $setup.parse(date, "MMMM dd, yyyy", /* @__PURE__ */ new Date()),
+            inputDateFormat: (date) => $setup.format(new Date(date), "MMMM dd, yyyy")
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ]),
+        createBaseVNode("div", _hoisted_131, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2022/08/03",
+            endDate: "2022/08/17",
+            label: "Rango de fechas",
+            locale: "es-ES",
+            placeholder: ["Fecha de inicio", "Fecha de fin"],
+            inputDateParse: (date) => $setup.parse(date, "yyyy MMMM dd", /* @__PURE__ */ new Date(), { locale: $setup.es }),
+            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMMM dd", { locale: $setup.es })
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ])
+      ])
+    ]),
+    _hoisted_132,
+    createBaseVNode("div", _hoisted_135, [
+      createBaseVNode("div", _hoisted_136, [
+        createBaseVNode("div", _hoisted_137, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2022/08/03 02:34:17 AM",
+            endDate: "2022/09/17 11:29:41 PM",
+            label: "Date range",
+            locale: "en-US",
+            timepicker: "",
+            inputDateParse: (date) => $setup.parse(date, "MMM dd, yyyy h:mm:ss a", /* @__PURE__ */ new Date()),
+            inputDateFormat: (date) => $setup.format(new Date(date), "MMM dd, yyyy h:mm:ss a")
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ]),
+        createBaseVNode("div", _hoisted_138, [
+          createVNode(_component_CDateRangePicker, {
+            startDate: "2022/08/03 02:34:17 AM",
+            endDate: "2022/09/17 11:29:41 PM",
+            label: "Rango de fechas",
+            locale: "es-ES",
+            placeholder: ["Fecha de inicio", "Fecha de fin"],
+            timepicker: "",
+            inputDateParse: (date) => $setup.parse(date, "yyyy MMM dd h:mm:ss a", /* @__PURE__ */ new Date(), { locale: $setup.es }),
+            inputDateFormat: (date) => $setup.format(new Date(date), "yyyy MMM dd h:mm:ss a", { locale: $setup.es })
+          }, null, 8, ["inputDateParse", "inputDateFormat"])
+        ])
+      ])
+    ]),
+    _hoisted_139,
+    createVNode(_component_ScssDocs, {
+      file: "_date-picker.scss",
+      capture: "date-picker-css-vars"
+    }),
+    createVNode(_component_ScssDocs, {
+      file: "_calendar.scss",
+      capture: "calendar-css-vars"
+    }),
+    _hoisted_143,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "date-picker-variables"
+    }),
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "calendar-variables"
+    }),
+    _hoisted_146
+  ]);
+}
+const dateRangePicker_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "date-range-picker.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/date-range-picker.html","title":"Vue Date Range Picker Component","lang":"en-US","frontmatter":{"title":"Vue Date Range Picker Component","name":"Date Range Picker","description":"The Vue Date Range Picker component by CoreUI is a versatile tool for selecting date ranges. It is designed for compatibility across various browsers and devices, making it a reliable choice for diverse applications.","other_frameworks":"date-range-picker","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/date-range-picker.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Days","slug":"days","link":"#days","children":[]},{"level":3,"title":"Weeks","slug":"weeks","link":"#weeks","children":[]},{"level":3,"title":"Months","slug":"months","link":"#months","children":[]},{"level":3,"title":"Years","slug":"years","link":"#years","children":[]}]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Readonly","slug":"readonly","link":"#readonly","children":[]},{"level":2,"title":"Disabled dates","slug":"disabled-dates","link":"#disabled-dates","children":[]},{"level":2,"title":"Custom ranges","slug":"custom-ranges","link":"#custom-ranges","children":[]},{"level":2,"title":"Non-english locale","slug":"non-english-locale","link":"#non-english-locale","children":[{"level":3,"title":"Auto","slug":"auto","link":"#auto","children":[]},{"level":3,"title":"Chinese","slug":"chinese","link":"#chinese","children":[]},{"level":3,"title":"Japanese","slug":"japanese","link":"#japanese","children":[]},{"level":3,"title":"Korean","slug":"korean","link":"#korean","children":[]}]},{"level":2,"title":"Right to left support","slug":"right-to-left-support","link":"#right-to-left-support","children":[{"level":3,"title":"Hebrew","slug":"hebrew","link":"#hebrew","children":[]},{"level":3,"title":"Persian","slug":"persian","link":"#persian","children":[]}]},{"level":2,"title":"Custom formats","slug":"custom-formats","link":"#custom-formats","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CDateRangePicker","slug":"cdaterangepicker","link":"#cdaterangepicker","children":[]}]}],"filePathRelative":"forms/date-range-picker.md"}');
+export {
+  dateRangePicker_html as comp,
+  data
+};
diff --git a/vue/docs/assets/download.html-BCaD7SmH.js b/vue/docs/assets/download.html-91eC3PyH.js
similarity index 75%
rename from vue/docs/assets/download.html-BCaD7SmH.js
rename to vue/docs/assets/download.html-91eC3PyH.js
index 2b9fd3cc2ec..b646d93c48b 100644
--- a/vue/docs/assets/download.html-BCaD7SmH.js
+++ b/vue/docs/assets/download.html-91eC3PyH.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="source-files" tabindex="-1">Source files <a class="anchor-link" href="#source-files" aria-hidden="true">#</a></h2><p>Compile CoreUI Vue Admin with your own asset pipeline by downloading our source Sass, and JavaScript files. This option requires some additional tooling:</p><ul><li>Vue, Vue CLI</li><li>Sass compiler for compiling your CSS.</li></ul><p><a href="https://coreui.io/product/free-vue-admin-template/" class="btn btn-primary">Download</a></p><br><h3 id="pro-templates" tabindex="-1">PRO Templates <a class="anchor-link" href="#pro-templates" aria-hidden="true">#</a></h3><p>If you have a valid PRO license you can <a href="https://coreui.io/download" target="_blank" rel="noopener noreferrer">re-download</a> on our website. In case if your license has been expired, or you don&#39;t have a PRO license please visit our <a href="https://coreui.io/pricing" target="_blank" rel="noopener noreferrer">website</a> to buy one.</p><p><a href="https://coreui.io/download/" class="btn btn-primary">Download PRO</a>  <a href="https://coreui.io/pricing/" class="btn btn-primary">Buy PRO</a></p><br><h3 id="clone-repo" tabindex="-1">Clone repo <a class="anchor-link" href="#clone-repo" aria-hidden="true">#</a></h3><p>You can also fork <a href="https://github.com/coreui/coreui-free-vue-admin-template.git" target="_blank" rel="noopener noreferrer">CoreUI Vue Admin Template&#39;s repository</a>.</p><div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">git</span> clone https://github.com/coreui/coreui-free-vue-admin-template.git my-project</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>If you have a valid Enterprise subscription you can fork CoreUI PRO Bootstrap Admin Template&#39;s repository.</p><div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">git</span> clone https://github.com/coreui/coreui-pro-vue-admin-template.git my-project</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>', 14);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="source-files" tabindex="-1">Source files <a class="anchor-link" href="#source-files" aria-hidden="true">#</a></h2><p>Compile CoreUI Vue Admin with your own asset pipeline by downloading our source Sass, and JavaScript files. This option requires some additional tooling:</p><ul><li>Vue, Vue CLI</li><li>Sass compiler for compiling your CSS.</li></ul><p><a href="https://coreui.io/product/free-vue-admin-template/" class="btn btn-primary">Download</a></p><br><h3 id="pro-templates" tabindex="-1">PRO Templates <a class="anchor-link" href="#pro-templates" aria-hidden="true">#</a></h3><p>If you have a valid PRO license you can <a href="https://coreui.io/download" target="_blank" rel="noopener noreferrer">re-download</a> on our website. In case if your license has been expired, or you don&#39;t have a PRO license please visit our <a href="https://coreui.io/pricing" target="_blank" rel="noopener noreferrer">website</a> to buy one.</p><p><a href="https://coreui.io/download/" class="btn btn-primary">Download PRO</a>  <a href="https://coreui.io/pricing/" class="btn btn-primary">Buy PRO</a></p><br><h3 id="clone-repo" tabindex="-1">Clone repo <a class="anchor-link" href="#clone-repo" aria-hidden="true">#</a></h3><p>You can also fork <a href="https://github.com/coreui/coreui-free-vue-admin-template.git" target="_blank" rel="noopener noreferrer">CoreUI Vue Admin Template&#39;s repository</a>.</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">git</span> clone https://github.com/coreui/coreui-free-vue-admin-template.git my-project</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>If you have a valid Enterprise subscription you can fork CoreUI PRO Bootstrap Admin Template&#39;s repository.</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">git</span> clone https://github.com/coreui/coreui-pro-vue-admin-template.git my-project</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>', 14);
 const _hoisted_15 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/dropdown.html-DovFmUDM.js b/vue/docs/assets/dropdown.html-D58fBbQW.js
similarity index 61%
rename from vue/docs/assets/dropdown.html-DovFmUDM.js
rename to vue/docs/assets/dropdown.html-D58fBbQW.js
index 532cc3bb0e1..dd552d37cc5 100644
--- a/vue/docs/assets/dropdown.html-DovFmUDM.js
+++ b/vue/docs/assets/dropdown.html-D58fBbQW.js
@@ -1,22 +1,22 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, F as Fragment, j as renderList, f as createStaticVNode, e as createTextVNode, t as toDisplayString } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, F as Fragment, j as renderList, a as createStaticVNode, f as createTextVNode, t as toDisplayString } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more.</p><p>Dropdowns are built on a third party library, <a href="https://popper.js.org/" target="_blank" rel="noopener noreferrer">Popper.js</a>, which provides dynamic positioning and viewport detection. Popper.js isn&#39;t used to position dropdowns in navbars though as dynamic positioning isn&#39;t required.</p><h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples" aria-hidden="true">#</a></h2><p>Bind the dropdown&#39;s toggle and the dropdown menu inside <code>&lt;CDropdown&gt;</code>, or different element that declares <code>position: relative;</code>. Dropdowns can be triggered from <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements to better fit your possible requirements.</p><h3 id="single-button" tabindex="-1">Single button <a class="anchor-link" href="#single-button" aria-hidden="true">#</a></h3><p>Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code> elements:</p>', 7);
 const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And with <code>&lt;a&gt;</code> elements:</p>', 2);
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And with <code>&lt;a&gt;</code> elements:</p>', 2);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The best part is you can do this with any button variant, too:</p>', 2);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The best part is you can do this with any button variant, too:</p>', 2);
 const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;info&#39;, &#39;warning&#39;, &#39;danger&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{togglerText}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="split-button" tabindex="-1">Split button <a class="anchor-link" href="#split-button" aria-hidden="true">#</a></h3><p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop <code>split</code> for proper spacing around the dropdown caret.</p><p>We use this extra class to reduce the horizontal <code>padding</code> on either side of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.</p>', 4);
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;info&#39;, &#39;warning&#39;, &#39;danger&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{togglerText}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="split-button" tabindex="-1">Split button <a class="anchor-link" href="#split-button" aria-hidden="true">#</a></h3><p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop <code>split</code> for proper spacing around the dropdown caret.</p><p>We use this extra class to reduce the horizontal <code>padding</code> on either side of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.</p>', 4);
 const _hoisted_19 = { class: "docs-example rounded-top p-4" };
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;info&#39;, &#39;warning&#39;, &#39;danger&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>', 3);
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;info&#39;, &#39;warning&#39;, &#39;danger&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>', 3);
 const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large split button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large split button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">&gt;</span></span>Large button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small split button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">&gt;</span></span>Small button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-dropdowns" tabindex="-1">Dark dropdowns <a class="anchor-link" href="#dark-dropdowns" aria-hidden="true">#</a></h2><p>Opt into darker dropdowns to match a dark navbar or custom style by set <code>dark</code> property. No changes are required to the dropdown items.</p>', 3);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small split button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">&gt;</span></span>Small button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-dropdowns" tabindex="-1">Dark dropdowns <a class="anchor-link" href="#dark-dropdowns" aria-hidden="true">#</a></h2><p>Opt into darker dropdowns to match a dark navbar or custom style by set <code>dark</code> property. No changes are required to the dropdown items.</p>', 3);
 const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dark</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And putting it to use in a navbar:</p>', 2);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dark</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And putting it to use in a navbar:</p>', 2);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">dark</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:navLink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="directions" tabindex="-1">Directions <a class="anchor-link" href="#directions" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">dark</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:navLink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="directions" tabindex="-1">Directions <a class="anchor-link" href="#directions" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_35 = /* @__PURE__ */ createBaseVNode("h3", {
   id: "centered",
   tabindex: "-1"
@@ -36,40 +36,40 @@ const _hoisted_36 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(" component.")
 ], -1);
 const _hoisted_37 = { class: "docs-example rounded-top p-4" };
-const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Centered dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropup" tabindex="-1">Dropup <a class="anchor-link" href="#dropup" aria-hidden="true">#</a></h3><p>Trigger dropdown menus above elements by adding <code>direction=&quot;dropup&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
+const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Centered dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropup" tabindex="-1">Dropup <a class="anchor-link" href="#dropup" aria-hidden="true">#</a></h3><p>Trigger dropdown menus above elements by adding <code>direction=&quot;dropup&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
 const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropup<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropup<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Split dropup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropup-centered" tabindex="-1">Dropup centered <a class="anchor-link" href="#dropup-centered" aria-hidden="true">#</a></h3><p>Make the dropup menu centered above the toggle by adding <code>direction=&quot;dropup-center&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropup<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropup<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Split dropup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropup-centered" tabindex="-1">Dropup centered <a class="anchor-link" href="#dropup-centered" aria-hidden="true">#</a></h3><p>Make the dropup menu centered above the toggle by adding <code>direction=&quot;dropup-center&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
 const _hoisted_45 = { class: "docs-example rounded-top p-4" };
-const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropup-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Centered dropup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropend" tabindex="-1">Dropend <a class="anchor-link" href="#dropend" aria-hidden="true">#</a></h3><p>Trigger dropdown menus at the right of the elements by adding <code>direction=&quot;dropend&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
+const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropup-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Centered dropup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropend" tabindex="-1">Dropend <a class="anchor-link" href="#dropend" aria-hidden="true">#</a></h3><p>Trigger dropdown menus at the right of the elements by adding <code>direction=&quot;dropend&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
 const _hoisted_49 = { class: "docs-example rounded-top p-4" };
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropend<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Split dropend<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropstart" tabindex="-1">Dropstart <a class="anchor-link" href="#dropstart" aria-hidden="true">#</a></h3><p>Trigger dropdown menus at the left of the elements by adding <code>direction=&quot;dropstart&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropend<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Split dropend<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dropstart" tabindex="-1">Dropstart <a class="anchor-link" href="#dropstart" aria-hidden="true">#</a></h3><p>Trigger dropdown menus at the left of the elements by adding <code>direction=&quot;dropstart&quot;</code> to the <code>&lt;CDropdown&gt;</code> component.</p>', 3);
 const _hoisted_53 = { class: "docs-example rounded-top p-4" };
-const _hoisted_54 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropstart<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropstart<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropstart<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Split dropstart<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="responsive-alignment" tabindex="-1">Responsive alignment <a class="anchor-link" href="#responsive-alignment" aria-hidden="true">#</a></h3><p>If you use responsive alignment, dynamic positioning is disabled.</p><p>To align <strong>right</strong> the dropdown menu with the given breakpoint or larger, add <code>aligment=&quot;xs|sm|md|lg|xl|xxl: end&quot;</code>.</p>', 4);
+const _hoisted_54 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropstart<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropstart<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropstart<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Split dropstart<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButtonGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="responsive-alignment" tabindex="-1">Responsive alignment <a class="anchor-link" href="#responsive-alignment" aria-hidden="true">#</a></h3><p>If you use responsive alignment, dynamic positioning is disabled.</p><p>To align <strong>right</strong> the dropdown menu with the given breakpoint or larger, add <code>aligment=&quot;xs|sm|md|lg|xl|xxl: end&quot;</code>.</p>', 4);
 const _hoisted_58 = { class: "docs-example rounded-top p-4" };
-const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ &#39;lg&#39;: &#39;end&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left-aligned but right aligned when large screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To align <strong>left</strong> the dropdown menu with the given breakpoint or larger, add <code>aligment=&quot;xs|sm|md|lg|xl|xxl: start&quot;</code>.</p>', 2);
+const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ &#39;lg&#39;: &#39;end&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Left-aligned but right aligned when large screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To align <strong>left</strong> the dropdown menu with the given breakpoint or larger, add <code>aligment=&quot;xs|sm|md|lg|xl|xxl: start&quot;</code>.</p>', 2);
 const _hoisted_61 = { class: "docs-example rounded-top p-4" };
-const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ &#39;xs&#39;: &#39;end&#39;, &#39;lg&#39;: &#39;start&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right-aligned but left aligned when large screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="menu-content" tabindex="-1">Menu content <a class="anchor-link" href="#menu-content" aria-hidden="true">#</a></h2><h3 id="headers" tabindex="-1">Headers <a class="anchor-link" href="#headers" aria-hidden="true">#</a></h3><p>Add a header to label sections of actions in any dropdown menu.</p><p>In the following example we use <code>div</code> instead of <code>&lt;CDropdownMenu&gt;</code> to show <code>&lt;CDropdownMenu&gt;</code> content.</p>', 5);
+const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ &#39;xs&#39;: &#39;end&#39;, &#39;lg&#39;: &#39;start&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Right-aligned but left aligned when large screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="menu-content" tabindex="-1">Menu content <a class="anchor-link" href="#menu-content" aria-hidden="true">#</a></h2><h3 id="headers" tabindex="-1">Headers <a class="anchor-link" href="#headers" aria-hidden="true">#</a></h3><p>Add a header to label sections of actions in any dropdown menu.</p><p>In the following example we use <code>div</code> instead of <code>&lt;CDropdownMenu&gt;</code> to show <code>&lt;CDropdownMenu&gt;</code> content.</p>', 5);
 const _hoisted_67 = { class: "docs-example rounded-top p-4" };
 const _hoisted_68 = { class: "dropdown-menu" };
-const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownHeader</span><span class="token punctuation">&gt;</span></span>Dropdown header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dividers" tabindex="-1">Dividers <a class="anchor-link" href="#dividers" aria-hidden="true">#</a></h3><p>Separate groups of related menu items with a divider.</p><p>In the following example we use <code>div</code> instead of <code>&lt;CDropdownMenu&gt;</code> to show <code>&lt;CDropdownMenu&gt;</code> content.</p>', 4);
+const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownHeader</span><span class="token punctuation">&gt;</span></span>Dropdown header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dividers" tabindex="-1">Dividers <a class="anchor-link" href="#dividers" aria-hidden="true">#</a></h3><p>Separate groups of related menu items with a divider.</p><p>In the following example we use <code>div</code> instead of <code>&lt;CDropdownMenu&gt;</code> to show <code>&lt;CDropdownMenu&gt;</code> content.</p>', 4);
 const _hoisted_73 = { class: "docs-example rounded-top p-4" };
 const _hoisted_74 = { class: "dropdown-menu" };
-const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="text" tabindex="-1">Text <a class="anchor-link" href="#text" aria-hidden="true">#</a></h3><p>Place any freeform text within a dropdown menu with text. Note that you&#39;ll likely need additional sizing styles to constrain the menu width.</p><div class="docs-example rounded-top p-4"><div class="border rounded p-4 text-body-secondary" style="max-width:200px;"><p> Some example text that&#39;s free-flowing within the dropdown menu. </p><p class="mb-0"> And this is more example text. </p></div></div><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Some example text that&#39;s free-flowing within the dropdown menu.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  And this is more example text.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="forms" tabindex="-1">Forms <a class="anchor-link" href="#forms" aria-hidden="true">#</a></h3><p>Put a form within a dropdown menu, or make it into a dropdown menu.</p>', 7);
+const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="text" tabindex="-1">Text <a class="anchor-link" href="#text" aria-hidden="true">#</a></h3><p>Place any freeform text within a dropdown menu with text. Note that you&#39;ll likely need additional sizing styles to constrain the menu width.</p><div class="docs-example rounded-top p-4"><div class="border rounded p-4 text-body-secondary" style="max-width:200px;"><p> Some example text that&#39;s free-flowing within the dropdown menu. </p><p class="mb-0"> And this is more example text. </p></div></div><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Some example text that&#39;s free-flowing within the dropdown menu.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  And this is more example text.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="forms" tabindex="-1">Forms <a class="anchor-link" href="#forms" aria-hidden="true">#</a></h3><p>Put a form within a dropdown menu, or make it into a dropdown menu.</p>', 7);
 const _hoisted_82 = { class: "docs-example rounded-top p-4" };
 const _hoisted_83 = { class: "dropdown-menu" };
 const _hoisted_84 = { class: "mb-3" };
 const _hoisted_85 = { class: "mb-3" };
 const _hoisted_86 = { class: "mb-3" };
-const _hoisted_87 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>px-4 py-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormEmail1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormEmail1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormPassword1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormPassword1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropdownCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sign in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New around here? Sign up<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Forgot password?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue dropdowns use local CSS variables on <code>.dropdown</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_87 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>px-4 py-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormEmail1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormEmail1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormPassword1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleDropdownFormPassword1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dropdownCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sign in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>New around here? Sign up<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Forgot password?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue dropdowns use local CSS variables on <code>.dropdown</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
 const _hoisted_91 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("Customization through CSS variables can be seen on the "),
   /* @__PURE__ */ createBaseVNode("code", null, ".dropdown-menu-dark"),
   /* @__PURE__ */ createTextVNode(" class where we override specific values without adding duplicate CSS selectors.")
 ], -1);
-const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CDropdown <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CDropdown<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CDropdown <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CDropdown<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
 const _hoisted_95 = /* @__PURE__ */ createBaseVNode("p", null, "Variables for the dark dropdown:", -1);
 const _hoisted_96 = /* @__PURE__ */ createBaseVNode("p", null, "Variables for the CSS-based carets that indicate a dropdown's interactivity:", -1);
-const _hoisted_97 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdown <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdown <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdown&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Set aligment of dropdown menu.</td><td>string | Alignments</td><td><code>{ &#39;start&#39; | &#39;end&#39; | { xs: &#39;start&#39; | &#39;end&#39; } | { sm: &#39;start&#39; | &#39;end&#39; } | { md: &#39;start&#39; | &#39;end&#39; } | { lg: &#39;start&#39; | &#39;end&#39; } | { xl: &#39;start&#39; | &#39;end&#39;} | { xxl: &#39;start&#39; | &#39;end&#39;} }</code></td><td>-</td></tr><tr><td><strong>auto-close</strong></td><td>Configure the auto close behavior of the dropdown:<br>- <code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- <code>false</code> - 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>- <code>&#39;inside&#39;</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- <code>&#39;outside&#39;</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme to match a dark navbar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>direction</strong></td><td>Sets a specified direction and location of the dropdown menu.</td><td>string</td><td><code>&#39;center&#39;</code>, <code>&#39;dropup&#39;</code>, <code>&#39;dropup-center&#39;</code>, <code>&#39;dropend&#39;</code>, <code>&#39;dropstart&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>offset</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Offset of the dropdown menu relative to its target.</td><td>array</td><td>-</td><td>[0, 2]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td><code>&#39;auto&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-start&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;right-start&#39;</code>, <code>&#39;right&#39;</code>, <code>&#39;right-end&#39;</code>, <code>&#39;left-start&#39;</code>, <code>&#39;left&#39;</code>, <code>&#39;left-end&#39;</code></td><td>&#39;bottom-start&#39;</td></tr><tr><td><strong>popper</strong></td><td>If you want to disable dynamic positioning set this property to <code>true</code>.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>teleport</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Generates dropdown menu using Teleport.</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</td><td>string</td><td><code>&#39;btn-group&#39;</code>, <code>&#39;dropdown&#39;</code>, <code>&#39;input-group&#39;</code>, <code>&#39;nav-item&#39;</code></td><td>&#39;btn-group&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of dropdown menu component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table><h3 id="cdropdownitem" tabindex="-1">CDropdownItem <a class="anchor-link" href="#cdropdownitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cdropdownmenu" tabindex="-1">CDropdownMenu <a class="anchor-link" href="#cdropdownmenu" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownMenu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownMenu <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownMenu&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td><code>&#39;div&#39;</code>, <code>&#39;ul&#39;</code></td><td>&#39;div&#39;</td></tr></tbody></table><h3 id="cdropdowntoggle" tabindex="-1">CDropdownToggle <a class="anchor-link" href="#cdropdowntoggle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownToggle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownToggle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownToggle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>caret</strong></td><td>Enables pseudo element caret on toggler.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>custom</strong></td><td>Create a custom toggler which accepts any content.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>nav-link</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>If a dropdown <code>variant</code> is set to <code>nav-item</code> then render the toggler as a link instead of a button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>split</strong></td><td>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>.dropdown-toggle-split</code> className for proper spacing around the dropdown caret.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br><code>@type</code> &#39;hover&#39; | &#39;focus&#39; | &#39;click&#39;</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table>', 23);
+const _hoisted_97 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdown <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdown <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdown&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Set aligment of dropdown menu.</td><td>string | Alignments</td><td><code>{ &#39;start&#39; | &#39;end&#39; | { xs: &#39;start&#39; | &#39;end&#39; } | { sm: &#39;start&#39; | &#39;end&#39; } | { md: &#39;start&#39; | &#39;end&#39; } | { lg: &#39;start&#39; | &#39;end&#39; } | { xl: &#39;start&#39; | &#39;end&#39;} | { xxl: &#39;start&#39; | &#39;end&#39;} }</code></td><td>-</td></tr><tr><td><strong>auto-close</strong></td><td>Configure the auto close behavior of the dropdown:<br>- <code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- <code>false</code> - 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>- <code>&#39;inside&#39;</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- <code>&#39;outside&#39;</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme to match a dark navbar.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>direction</strong></td><td>Sets a specified direction and location of the dropdown menu.</td><td>string</td><td><code>&#39;center&#39;</code>, <code>&#39;dropup&#39;</code>, <code>&#39;dropup-center&#39;</code>, <code>&#39;dropend&#39;</code>, <code>&#39;dropstart&#39;</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>offset</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Offset of the dropdown menu relative to its target.</td><td>array</td><td>-</td><td>[0, 2]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td><code>&#39;auto&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-start&#39;</code>, <code>&#39;bottom-end&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;right-start&#39;</code>, <code>&#39;right&#39;</code>, <code>&#39;right-end&#39;</code>, <code>&#39;left-start&#39;</code>, <code>&#39;left&#39;</code>, <code>&#39;left-end&#39;</code></td><td>&#39;bottom-start&#39;</td></tr><tr><td><strong>popper</strong></td><td>If you want to disable dynamic positioning set this property to <code>true</code>.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>teleport</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Generates dropdown menu using Teleport.</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</td><td>string</td><td><code>&#39;btn-group&#39;</code>, <code>&#39;dropdown&#39;</code>, <code>&#39;input-group&#39;</code>, <code>&#39;nav-item&#39;</code></td><td>&#39;btn-group&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of dropdown menu component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h6&#39;</td></tr></tbody></table><h3 id="cdropdownitem" tabindex="-1">CDropdownItem <a class="anchor-link" href="#cdropdownitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cdropdownmenu" tabindex="-1">CDropdownMenu <a class="anchor-link" href="#cdropdownmenu" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownMenu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownMenu <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownMenu&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td><code>&#39;div&#39;</code>, <code>&#39;ul&#39;</code></td><td>&#39;div&#39;</td></tr></tbody></table><h3 id="cdropdowntoggle" tabindex="-1">CDropdownToggle <a class="anchor-link" href="#cdropdowntoggle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CDropdownToggle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CDropdownToggle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/dropdown/CDropdownToggle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;button&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>caret</strong></td><td>Enables pseudo element caret on toggler.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>custom</strong></td><td>Create a custom toggler which accepts any content.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>nav-link</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>If a dropdown <code>variant</code> is set to <code>nav-item</code> then render the toggler as a link instead of a button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>split</strong></td><td>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>.dropdown-toggle-split</code> className for proper spacing around the dropdown caret.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br><code>@type</code> &#39;hover&#39; | &#39;focus&#39; | &#39;click&#39;</td><td>Triggers</td><td>-</td><td>&#39;click&#39;</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr></tbody></table>', 23);
 function _sfc_render(_ctx, _cache) {
   const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
   const _component_CDropdownItem = resolveComponent("CDropdownItem");
diff --git a/vue/docs/assets/es-C71wN8BW.js b/vue/docs/assets/es-DXofg4kJ.js
similarity index 99%
rename from vue/docs/assets/es-C71wN8BW.js
rename to vue/docs/assets/es-DXofg4kJ.js
index f9eb41e67b6..a7258861580 100644
--- a/vue/docs/assets/es-C71wN8BW.js
+++ b/vue/docs/assets/es-DXofg4kJ.js
@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 function toDate(argument) {
   const argStr = Object.prototype.toString.call(argument);
   if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
@@ -23,8 +20,7 @@ function constructFrom(date, value) {
 }
 function addDays(date, amount) {
   const _date = toDate(date);
-  if (isNaN(amount))
-    return constructFrom(date, NaN);
+  if (isNaN(amount)) return constructFrom(date, NaN);
   if (!amount) {
     return _date;
   }
@@ -475,12 +471,10 @@ function findIndex(array, predicate) {
 function buildMatchPatternFn(args) {
   return (string, options = {}) => {
     const matchResult = string.match(args.matchPattern);
-    if (!matchResult)
-      return null;
+    if (!matchResult) return null;
     const matchedString = matchResult[0];
     const parseResult = string.match(args.parsePattern);
-    if (!parseResult)
-      return null;
+    if (!parseResult) return null;
     let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
     value = options.valueCallback ? options.valueCallback(value) : value;
     const rest = string.slice(matchedString.length);
@@ -1164,8 +1158,7 @@ const formatters = {
   h: function(date, token, localize2) {
     if (token === "ho") {
       let hours = date.getHours() % 12;
-      if (hours === 0)
-        hours = 12;
+      if (hours === 0) hours = 12;
       return localize2.ordinalNumber(hours, { unit: "hour" });
     }
     return lightFormatters.h(date, token);
@@ -1188,8 +1181,7 @@ const formatters = {
   // Hour [1-24]
   k: function(date, token, localize2) {
     let hours = date.getHours();
-    if (hours === 0)
-      hours = 24;
+    if (hours === 0) hours = 24;
     if (token === "ko") {
       return localize2.ordinalNumber(hours, { unit: "hour" });
     }
@@ -1374,8 +1366,7 @@ function isProtectedWeekYearToken(token) {
 function warnOrThrowProtectedError(token, format2, input) {
   const _message = message(token, format2, input);
   console.warn(_message);
-  if (throwTokens.includes(token))
-    throw new RangeError(_message);
+  if (throwTokens.includes(token)) throw new RangeError(_message);
 }
 function message(token, format2, input) {
   const subject = token[0] === "Y" ? "years" : "days of the month";
@@ -1430,8 +1421,7 @@ function format(date, formatStr, options) {
     locale
   };
   return parts.map((part) => {
-    if (!part.isToken)
-      return part.value;
+    if (!part.isToken) return part.value;
     const token = part.value;
     if (!(options == null ? void 0 : options.useAdditionalWeekYearTokens) && isProtectedWeekYearToken(token) || !(options == null ? void 0 : options.useAdditionalDayOfYearTokens) && isProtectedDayOfYearToken(token)) {
       warnOrThrowProtectedError(token, formatStr, String(date));
@@ -1507,8 +1497,7 @@ class DateToSystemTimezoneSetter extends Setter {
     __publicField(this, "subPriority", -1);
   }
   set(date, flags) {
-    if (flags.timestampIsSet)
-      return date;
+    if (flags.timestampIsSet) return date;
     return constructFrom(date, transpose(date, Date));
   }
 }
@@ -2940,8 +2929,7 @@ class ISOTimezoneWithZParser extends Parser {
     }
   }
   set(date, flags, value) {
-    if (flags.timestampIsSet)
-      return date;
+    if (flags.timestampIsSet) return date;
     return constructFrom(
       date,
       date.getTime() - getTimezoneOffsetInMilliseconds(date) - value
@@ -2979,8 +2967,7 @@ class ISOTimezoneParser extends Parser {
     }
   }
   set(date, flags, value) {
-    if (flags.timestampIsSet)
-      return date;
+    if (flags.timestampIsSet) return date;
     return constructFrom(
       date,
       date.getTime() - getTimezoneOffsetInMilliseconds(date) - value
diff --git a/vue/docs/assets/floating-labels.html-OoHunpjU.js b/vue/docs/assets/floating-labels.html-OoHunpjU.js
new file mode 100644
index 00000000000..7e1acb3c507
--- /dev/null
+++ b/vue/docs/assets/floating-labels.html-OoHunpjU.js
@@ -0,0 +1,194 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Use <code>floatingLabel</code> property on <code>&lt;CFormInput&gt;</code>, <code>&lt;CFormSelect&gt;</code> or <code>&lt;CFormTextarea&gt;</code> to enable floating labels with textual form fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>, <code>&lt;CFormSelect&gt;</code> and <code>&lt;CFormTextarea&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element.</p>', 2);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email address<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can create the same form control by wrapping a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code> elements in <code>&lt;CFormFloating&gt;</code> to enable floating labels with textual form fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also, note that the <code>&lt;CFormInput&gt;</code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlPassword<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>s will automatically adjust to their floated position.</p>', 4);
+const _hoisted_8 = { class: "docs-example rounded-top p-4" };
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputValue<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input with value<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Form validation styles also work as expected.</p>', 2);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputInvalid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email addresss<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">valid</span></span>\n<span class="line">  <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputInvalid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">invalid</span></span>\n<span class="line">  <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email addresss<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="textareas" tabindex="-1">Textareas <a class="anchor-link" href="#textareas" aria-hidden="true">#</a></h2><p>By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as <code>&lt;CFormInput&gt;</code>s.</p>', 3);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingTextarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Comments<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Leave a comment here<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To set a custom height on your <code>&lt;CFormTextarea&gt;</code>, do not use the <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either inline or via custom CSS).</p>', 2);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Leave a comment here<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingTextarea2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Comments<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 100px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="selects" tabindex="-1">Selects <a class="anchor-link" href="#selects" aria-hidden="true">#</a></h2><p>Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on <code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the <code>&lt;CFormLabel&gt;</code> in its floated state. <strong>Selects with <code>size</code> and <code>multiple</code> are not supported.</strong></p>', 3);
+const _hoisted_22 = { class: "docs-example rounded-top p-4" };
+const _hoisted_23 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
+const _hoisted_24 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
+const _hoisted_25 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
+const _hoisted_26 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> </span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingSelect<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Works with selects<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Floating label select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="layout" tabindex="-1">Layout <a class="anchor-link" href="#layout" aria-hidden="true">#</a></h2><p>When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.</p>', 3);
+const _hoisted_30 = { class: "docs-example rounded-top p-4" };
+const _hoisted_31 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
+const _hoisted_32 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
+const _hoisted_33 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
+const _hoisted_34 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
+const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{gutter: 2}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputGrid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email address<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> </span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingSelectGrid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Works with selects<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Floating label select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+function _sfc_render(_ctx, _cache) {
+  const _component_CFormInput = resolveComponent("CFormInput");
+  const _component_CFormFloating = resolveComponent("CFormFloating");
+  const _component_CFormTextarea = resolveComponent("CFormTextarea");
+  const _component_CFormSelect = resolveComponent("CFormSelect");
+  const _component_CCol = resolveComponent("CCol");
+  const _component_CRow = resolveComponent("CRow");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CFormInput, {
+        class: "mb-3",
+        type: "email",
+        id: "floatingInput",
+        floatingLabel: "Email address",
+        placeholder: "name@example.com"
+      }),
+      createVNode(_component_CFormInput, {
+        type: "password",
+        id: "floatingPassword",
+        floatingLabel: "Password",
+        placeholder: "Password"
+      })
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_8, [
+      createVNode(_component_CFormFloating, null, {
+        default: withCtx(() => [
+          createVNode(_component_CFormInput, {
+            type: "email",
+            id: "floatingInputValue",
+            floatingLabel: "Input with value",
+            placeholder: "name@example.com",
+            value: "test@example.com"
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_9,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CFormInput, {
+        class: "mb-3",
+        type: "email",
+        id: "floatingInputInvalid",
+        floatingLabel: "Email addresss",
+        placeholder: "name@example.com",
+        valid: "",
+        value: "test@example.com"
+      }),
+      createVNode(_component_CFormInput, {
+        type: "email",
+        id: "floatingInputInvalid",
+        invalid: "",
+        floatingLabel: "Email addresss",
+        placeholder: "name@example.com",
+        value: "test@example.com"
+      })
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_15, [
+      createVNode(_component_CFormFloating, null, {
+        default: withCtx(() => [
+          createVNode(_component_CFormTextarea, {
+            id: "floatingTextarea",
+            floatingLabel: "Comments",
+            placeholder: "Leave a comment here"
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_16,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CFormFloating, null, {
+        default: withCtx(() => [
+          createVNode(_component_CFormTextarea, {
+            placeholder: "Leave a comment here",
+            id: "floatingTextarea2",
+            floatingLabel: "Comments",
+            style: { "height": "100px" }
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_22, [
+      createVNode(_component_CFormFloating, null, {
+        default: withCtx(() => [
+          createVNode(_component_CFormSelect, {
+            id: "floatingSelect",
+            floatingLabel: "Works with selects",
+            "aria-label": "Floating label select example"
+          }, {
+            default: withCtx(() => [
+              _hoisted_23,
+              _hoisted_24,
+              _hoisted_25,
+              _hoisted_26
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_27,
+    createBaseVNode("div", _hoisted_30, [
+      createVNode(_component_CRow, { xs: { gutter: 2 } }, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { md: "" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormFloating, null, {
+                default: withCtx(() => [
+                  createVNode(_component_CFormInput, {
+                    type: "email",
+                    id: "floatingInputGrid",
+                    floatingLabel: "Email address",
+                    placeholder: "name@example.com",
+                    value: "email@example.com"
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormFloating, null, {
+                default: withCtx(() => [
+                  createVNode(_component_CFormSelect, {
+                    id: "floatingSelectGrid",
+                    floatingLabel: "Works with selects",
+                    "aria-label": "Floating label select example"
+                  }, {
+                    default: withCtx(() => [
+                      _hoisted_31,
+                      _hoisted_32,
+                      _hoisted_33,
+                      _hoisted_34
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_35,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-floating-variables"
+    })
+  ]);
+}
+const floatingLabels_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "floating-labels.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/floating-labels.html","title":"Vue Floating labels","lang":"en-US","frontmatter":{"title":"Vue Floating labels","name":"Floating labels","description":"Vue floating label component. Create beautifully simple form labels that float over your input fields.","other_frameworks":"floating-labels","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/floating-labels.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Textareas","slug":"textareas","link":"#textareas","children":[]},{"level":2,"title":"Selects","slug":"selects","link":"#selects","children":[]},{"level":2,"title":"Layout","slug":"layout","link":"#layout","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]}],"filePathRelative":"forms/floating-labels.md"}');
+export {
+  floatingLabels_html as comp,
+  data
+};
diff --git a/vue/docs/assets/floating-labels.html-qVWbUgU0.js b/vue/docs/assets/floating-labels.html-qVWbUgU0.js
deleted file mode 100644
index f240cdab5ae..00000000000
--- a/vue/docs/assets/floating-labels.html-qVWbUgU0.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Use <code>floatingLabel</code> property on <code>&lt;CFormInput&gt;</code>, <code>&lt;CFormSelect&gt;</code> or <code>&lt;CFormTextarea&gt;</code> to enable floating labels with textual form fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>, <code>&lt;CFormSelect&gt;</code> and <code>&lt;CFormTextarea&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element.</p>', 2);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email address<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can create the same form control by wrapping a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code> elements in <code>&lt;CFormFloating&gt;</code> to enable floating labels with textual form fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also, note that the <code>&lt;CFormInput&gt;</code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlPassword<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>s will automatically adjust to their floated position.</p>', 4);
-const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputValue<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Input with value<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Form validation styles also work as expected.</p>', 2);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputInvalid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email addresss<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">valid</span></span>\n<span class="line">  <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputInvalid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">invalid</span></span>\n<span class="line">  <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email addresss<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="textareas" tabindex="-1">Textareas <a class="anchor-link" href="#textareas" aria-hidden="true">#</a></h2><p>By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as <code>&lt;CFormInput&gt;</code>s.</p>', 3);
-const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingTextarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Comments<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Leave a comment here<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To set a custom height on your <code>&lt;CFormTextarea&gt;</code>, do not use the <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either inline or via custom CSS).</p>', 2);
-const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Leave a comment here<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingTextarea2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Comments<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 100px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="selects" tabindex="-1">Selects <a class="anchor-link" href="#selects" aria-hidden="true">#</a></h2><p>Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on <code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the <code>&lt;CFormLabel&gt;</code> in its floated state. <strong>Selects with <code>size</code> and <code>multiple</code> are not supported.</strong></p>', 3);
-const _hoisted_22 = { class: "docs-example rounded-top p-4" };
-const _hoisted_23 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
-const _hoisted_24 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
-const _hoisted_25 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
-const _hoisted_26 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> </span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingSelect<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Works with selects<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Floating label select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="layout" tabindex="-1">Layout <a class="anchor-link" href="#layout" aria-hidden="true">#</a></h2><p>When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.</p>', 3);
-const _hoisted_30 = { class: "docs-example rounded-top p-4" };
-const _hoisted_31 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
-const _hoisted_32 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
-const _hoisted_33 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
-const _hoisted_34 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{gutter: 2}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingInputGrid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email address<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> </span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floatingSelectGrid<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">floatingLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Works with selects<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Floating label select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFloating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-function _sfc_render(_ctx, _cache) {
-  const _component_CFormInput = resolveComponent("CFormInput");
-  const _component_CFormFloating = resolveComponent("CFormFloating");
-  const _component_CFormTextarea = resolveComponent("CFormTextarea");
-  const _component_CFormSelect = resolveComponent("CFormSelect");
-  const _component_CCol = resolveComponent("CCol");
-  const _component_CRow = resolveComponent("CRow");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_3, [
-      createVNode(_component_CFormInput, {
-        class: "mb-3",
-        type: "email",
-        id: "floatingInput",
-        floatingLabel: "Email address",
-        placeholder: "name@example.com"
-      }),
-      createVNode(_component_CFormInput, {
-        type: "password",
-        id: "floatingPassword",
-        floatingLabel: "Password",
-        placeholder: "Password"
-      })
-    ]),
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_8, [
-      createVNode(_component_CFormFloating, null, {
-        default: withCtx(() => [
-          createVNode(_component_CFormInput, {
-            type: "email",
-            id: "floatingInputValue",
-            floatingLabel: "Input with value",
-            placeholder: "name@example.com",
-            value: "test@example.com"
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_9,
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CFormInput, {
-        class: "mb-3",
-        type: "email",
-        id: "floatingInputInvalid",
-        floatingLabel: "Email addresss",
-        placeholder: "name@example.com",
-        valid: "",
-        value: "test@example.com"
-      }),
-      createVNode(_component_CFormInput, {
-        type: "email",
-        id: "floatingInputInvalid",
-        invalid: "",
-        floatingLabel: "Email addresss",
-        placeholder: "name@example.com",
-        value: "test@example.com"
-      })
-    ]),
-    _hoisted_12,
-    createBaseVNode("div", _hoisted_15, [
-      createVNode(_component_CFormFloating, null, {
-        default: withCtx(() => [
-          createVNode(_component_CFormTextarea, {
-            id: "floatingTextarea",
-            floatingLabel: "Comments",
-            placeholder: "Leave a comment here"
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_16,
-    createBaseVNode("div", _hoisted_18, [
-      createVNode(_component_CFormFloating, null, {
-        default: withCtx(() => [
-          createVNode(_component_CFormTextarea, {
-            placeholder: "Leave a comment here",
-            id: "floatingTextarea2",
-            floatingLabel: "Comments",
-            style: { "height": "100px" }
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_19,
-    createBaseVNode("div", _hoisted_22, [
-      createVNode(_component_CFormFloating, null, {
-        default: withCtx(() => [
-          createVNode(_component_CFormSelect, {
-            id: "floatingSelect",
-            floatingLabel: "Works with selects",
-            "aria-label": "Floating label select example"
-          }, {
-            default: withCtx(() => [
-              _hoisted_23,
-              _hoisted_24,
-              _hoisted_25,
-              _hoisted_26
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_27,
-    createBaseVNode("div", _hoisted_30, [
-      createVNode(_component_CRow, { xs: { gutter: 2 } }, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, { md: "" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormFloating, null, {
-                default: withCtx(() => [
-                  createVNode(_component_CFormInput, {
-                    type: "email",
-                    id: "floatingInputGrid",
-                    floatingLabel: "Email address",
-                    placeholder: "name@example.com",
-                    value: "email@example.com"
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormFloating, null, {
-                default: withCtx(() => [
-                  createVNode(_component_CFormSelect, {
-                    id: "floatingSelectGrid",
-                    floatingLabel: "Works with selects",
-                    "aria-label": "Floating label select example"
-                  }, {
-                    default: withCtx(() => [
-                      _hoisted_31,
-                      _hoisted_32,
-                      _hoisted_33,
-                      _hoisted_34
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_35,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-floating-variables"
-    })
-  ]);
-}
-const floatingLabels_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "floating-labels.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/floating-labels.html","title":"Vue Floating labels","lang":"en-US","frontmatter":{"title":"Vue Floating labels","name":"Floating labels","description":"Vue floating label component. Create beautifully simple form labels that float over your input fields.","other_frameworks":"floating-labels","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/floating-labels.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Textareas","slug":"textareas","link":"#textareas","children":[]},{"level":2,"title":"Selects","slug":"selects","link":"#selects","children":[]},{"level":2,"title":"Layout","slug":"layout","link":"#layout","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]}],"filePathRelative":"forms/floating-labels.md"}');
-export {
-  floatingLabels_html as comp,
-  data
-};
diff --git a/vue/docs/assets/footer.html-BJOHr9F_.js b/vue/docs/assets/footer.html-DN3ns744.js
similarity index 50%
rename from vue/docs/assets/footer.html-BJOHr9F_.js
rename to vue/docs/assets/footer.html-DN3ns744.js
index e20aacc3ad3..8f9567055cf 100644
--- a/vue/docs/assets/footer.html-BJOHr9F_.js
+++ b/vue/docs/assets/footer.html-DN3ns744.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -14,9 +14,9 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
 const _hoisted_2 = { class: "docs-example rounded-top p-4" };
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("span", null, "© 2021 creativeLabs.", -1);
 const _hoisted_4 = /* @__PURE__ */ createBaseVNode("span", null, "Powered by", -1);
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="©">&amp;copy;</span> 2021 creativeLabs.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Powered by<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue footers use local CSS variables on <code>.footer</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CFooter <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CFooter<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cfooter" tabindex="-1">CFooter <a class="anchor-link" href="#cfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/footer/CFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>position</strong></td><td>Place footer in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table>', 5);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="©">&amp;copy;</span> 2021 creativeLabs.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Powered by<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue footers use local CSS variables on <code>.footer</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CFooter <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CFooter<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cfooter" tabindex="-1">CFooter <a class="anchor-link" href="#cfooter" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFooter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFooter <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/footer/CFooter&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>position</strong></td><td>Place footer in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table>', 5);
 function _sfc_render(_ctx, _cache) {
   const _component_CLink = resolveComponent("CLink");
   const _component_CFooter = resolveComponent("CFooter");
diff --git a/vue/docs/assets/form-control.html-BLcpw7-P.js b/vue/docs/assets/form-control.html-Dq3LSWS5.js
similarity index 51%
rename from vue/docs/assets/form-control.html-BLcpw7-P.js
rename to vue/docs/assets/form-control.html-Dq3LSWS5.js
index aaa3606a3c1..43add5b8098 100644
--- a/vue/docs/assets/form-control.html-BLcpw7-P.js
+++ b/vue/docs/assets/form-control.html-Dq3LSWS5.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -14,34 +14,34 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
 const _hoisted_2 = { class: "docs-example rounded-top p-4" };
 const _hoisted_3 = { class: "mb-3" };
 const _hoisted_4 = { class: "mb-3" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Example textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Example textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
 const _hoisted_8 = { class: "docs-example rounded-top p-4" };
 const _hoisted_9 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
 const _hoisted_10 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
 const _hoisted_14 = { class: "docs-example rounded-top p-4" };
 const _hoisted_15 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
 const _hoisted_16 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled readonly input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>', 3);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled readonly input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>', 3);
 const _hoisted_20 = { class: "docs-example rounded-top p-4" };
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly input here...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>readonly input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="readonly-plain-text" tabindex="-1">Readonly plain text <a class="anchor-link" href="#readonly-plain-text" aria-hidden="true">#</a></h2><p>If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled as plain text, use the <code>plain-text</code> boolean property to remove the default form field styling and preserve the correct margin and padding.</p>', 3);
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly input here...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>readonly input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="readonly-plain-text" tabindex="-1">Readonly plain text <a class="anchor-link" href="#readonly-plain-text" aria-hidden="true">#</a></h2><p>If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled as plain text, use the <code>plain-text</code> boolean property to remove the default form field styling and preserve the correct margin and padding.</p>', 3);
 const _hoisted_24 = { class: "docs-example rounded-top p-4" };
 const _hoisted_25 = { class: "col-sm-10" };
 const _hoisted_26 = { class: "col-sm-10" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_28 = { class: "docs-example rounded-top p-4" };
 const _hoisted_29 = { class: "col-auto" };
 const _hoisted_30 = { class: "col-auto" };
 const _hoisted_31 = { class: "col-auto" };
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Confirm identity<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="file-input" tabindex="-1">File input <a class="anchor-link" href="#file-input" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Confirm identity<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="file-input" tabindex="-1">File input <a class="anchor-link" href="#file-input" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_34 = { class: "docs-example rounded-top p-4" };
 const _hoisted_35 = { class: "mb-3" };
 const _hoisted_36 = { class: "mb-3" };
 const _hoisted_37 = { class: "mb-3" };
 const _hoisted_38 = { class: "mb-3" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFile<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileMultiple<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Multiple files input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileMultiple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileDisabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileSm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileSm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="color" tabindex="-1">Color <a class="anchor-link" href="#color" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFile<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileMultiple<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Multiple files input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileMultiple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileDisabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileSm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileSm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large file input example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="color" tabindex="-1">Color <a class="anchor-link" href="#color" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleColorInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Color picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleColorInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#563d7c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Choose your color<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormInput <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormInput&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>File|number|string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;color&#39; | &#39;file&#39; | &#39;text&#39; | string</code></td><td>&#39;text&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table><h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormTextarea <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormTextarea <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormTextarea&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table>', 14);
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleColorInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Color picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleColorInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#563d7c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Choose your color<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormInput <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormInput&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>File|number|string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;color&#39; | &#39;file&#39; | &#39;text&#39; | string</code></td><td>&#39;text&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table><h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormTextarea <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormTextarea <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormTextarea&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table>', 14);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormLabel = resolveComponent("CFormLabel");
   const _component_CFormInput = resolveComponent("CFormInput");
diff --git a/vue/docs/assets/grid.html-Dadpow9y.js b/vue/docs/assets/grid.html-D9aeBmOt.js
similarity index 59%
rename from vue/docs/assets/grid.html-Dadpow9y.js
rename to vue/docs/assets/grid.html-D9aeBmOt.js
index 83cc88b95a3..cf6e60f89b5 100644
--- a/vue/docs/assets/grid.html-Dadpow9y.js
+++ b/vue/docs/assets/grid.html-D9aeBmOt.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -22,44 +22,44 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
 const _hoisted_4 = { class: "docs-example-row" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent <code>&lt;CContainer&gt;</code>.</p><h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>Breaking it down, here&#39;s how the grid system comes together:</p><ul><li><p><strong>Our grid supports <a href="./breakpoints">six responsive breakpoints</a>.</strong> Breakpoints are based on <code>min-width</code> media queries, meaning they affect that breakpoint and all those above it (e.g., <code>sm=&quot;4&quot;</code> applies to <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>). This means you can control container and column sizing and behavior by each breakpoint.</p></li><li><p><strong>Containers center and horizontally pad your content.</strong> Use <code>&lt;CContainer&gt;</code> for a responsive pixel width, <code>&lt;CContainer fluid&gt;</code> for <code>width: 100%</code> across all viewports and devices, or a responsive container (e.g., <code>&lt;CContainer md&gt;</code>) for a combination of fluid and pixel widths.</p></li><li><p><strong>Rows are wrappers for columns.</strong> Each column has horizontal <code>padding</code> (called a gutter) for controlling the space between them. This <code>padding</code> is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to <a href="#row-columns">uniformly apply column sizing</a> and <a href="../gutters">gutter classes</a> to change the spacing of your content.</p></li><li><p><strong>Columns are incredibly flexible.</strong> There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., <code>CCol xs=&quot;4&quot;</code> spans four). <code>width</code>s are set in percentages so you always have the same relative sizing.</p></li><li><p><strong>Gutters are also responsive and customizable.</strong> <a href="../gutters">Gutter classes are available</a> across all breakpoints, with all the same sizes as our <a href="https://coreui.io/docs/utilities/spacing/" target="_blank" rel="noopener noreferrer">margin and padding spacing</a>. Change horizontal gutters with <code>xs|sm|md|lg|xl|xxl=&quot;{ gutterX: * }&quot;</code> classes, vertical gutters with <code>xs|sm|md|lg|xl|xxl=&quot;{ gutterY: * }&quot;</code>, or all gutters with <code>xs|sm|md|lg|xl|xxl=&quot;{ gutter: * }&quot;</code> classes. <code>xs|sm|md|lg|xl|xxl=&quot;{ gutter: 0 }&quot;</code> is also available to remove gutters.</p></li></ul><p>Be aware of the limitations and <a href="https://github.com/philipwalton/flexbugs" target="_blank" rel="noopener noreferrer">bugs around flexbox</a>, like the <a href="https://github.com/philipwalton/flexbugs#flexbug-9" target="_blank" rel="noopener noreferrer">inability to use some HTML elements as flex containers</a>.</p><h2 id="grid-options" tabindex="-1">Grid options <a class="anchor-link" href="#grid-options" aria-hidden="true">#</a></h2><p>CoreUI&#39;s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:</p><ul><li>Extra small (xs)</li><li>Small (sm)</li><li>Medium (md)</li><li>Large (lg)</li><li>Extra large (xl)</li><li>Extra extra large (xxl)</li></ul><p>As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here&#39;s how the grid changes across these breakpoints:</p><table class="table mb-4"><thead><tr><th scope="col"></th><th scope="col"> xs<br><span class="fw-normal">&lt;576px</span></th><th scope="col"> sm<br><span class="fw-normal">≥576px</span></th><th scope="col"> md<br><span class="fw-normal">≥768px</span></th><th scope="col"> lg<br><span class="fw-normal">≥992px</span></th><th scope="col"> xl<br><span class="fw-normal">≥1200px</span></th><th scope="col"> xxl<br><span class="fw-normal">≥1400px</span></th></tr></thead><tbody><tr><th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th><td>None (auto)</td><td>540px</td><td>720px</td><td>960px</td><td>1140px</td><td>1320px</td></tr><tr><th class="text-nowrap" scope="row">Class prefix</th><td><code>&lt;CCol xs=&gt;</code></td><td><code>&lt;CCol sm=&gt;</code></td><td><code>&lt;CCol md=&gt;</code></td><td><code>&lt;CCol lg=&gt;</code></td><td><code>&lt;CCol xl=&gt;</code></td><td><code>&lt;CCol xxl=&gt;</code></td></tr><tr><th class="text-nowrap" scope="row"># of columns</th><td colspan="6">12</td></tr><tr><th class="text-nowrap" scope="row">Gutter width</th><td colspan="6">1.5rem (.75rem on left and right)</td></tr><tr><th class="text-nowrap" scope="row">Custom gutters</th><td colspan="6"><a href="./layout/gutters">Yes</a></td></tr><tr><th class="text-nowrap" scope="row">Nestable</th><td colspan="6"><a href="#nesting">Yes</a></td></tr><tr><th class="text-nowrap" scope="row">Column ordering</th><td colspan="6"><a href="./layout/columns">Yes</a></td></tr></tbody></table><h2 id="auto-layout-columns" tabindex="-1">Auto-layout columns <a class="anchor-link" href="#auto-layout-columns" aria-hidden="true">#</a></h2><p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code>&lt;CCol sm={6}&gt;</code>.</p><h3 id="equal-width" tabindex="-1">Equal-width <a class="anchor-link" href="#equal-width" aria-hidden="true">#</a></h3><p>For example, here are two grid layouts that apply to every device and viewport, from <code>xs</code> to <code>xxl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>', 15);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      One of three columns</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent <code>&lt;CContainer&gt;</code>.</p><h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>Breaking it down, here&#39;s how the grid system comes together:</p><ul><li><p><strong>Our grid supports <a href="./breakpoints">six responsive breakpoints</a>.</strong> Breakpoints are based on <code>min-width</code> media queries, meaning they affect that breakpoint and all those above it (e.g., <code>sm=&quot;4&quot;</code> applies to <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>). This means you can control container and column sizing and behavior by each breakpoint.</p></li><li><p><strong>Containers center and horizontally pad your content.</strong> Use <code>&lt;CContainer&gt;</code> for a responsive pixel width, <code>&lt;CContainer fluid&gt;</code> for <code>width: 100%</code> across all viewports and devices, or a responsive container (e.g., <code>&lt;CContainer md&gt;</code>) for a combination of fluid and pixel widths.</p></li><li><p><strong>Rows are wrappers for columns.</strong> Each column has horizontal <code>padding</code> (called a gutter) for controlling the space between them. This <code>padding</code> is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to <a href="#row-columns">uniformly apply column sizing</a> and <a href="../gutters">gutter classes</a> to change the spacing of your content.</p></li><li><p><strong>Columns are incredibly flexible.</strong> There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., <code>CCol xs=&quot;4&quot;</code> spans four). <code>width</code>s are set in percentages so you always have the same relative sizing.</p></li><li><p><strong>Gutters are also responsive and customizable.</strong> <a href="../gutters">Gutter classes are available</a> across all breakpoints, with all the same sizes as our <a href="https://coreui.io/docs/utilities/spacing/" target="_blank" rel="noopener noreferrer">margin and padding spacing</a>. Change horizontal gutters with <code>xs|sm|md|lg|xl|xxl=&quot;{ gutterX: * }&quot;</code> classes, vertical gutters with <code>xs|sm|md|lg|xl|xxl=&quot;{ gutterY: * }&quot;</code>, or all gutters with <code>xs|sm|md|lg|xl|xxl=&quot;{ gutter: * }&quot;</code> classes. <code>xs|sm|md|lg|xl|xxl=&quot;{ gutter: 0 }&quot;</code> is also available to remove gutters.</p></li></ul><p>Be aware of the limitations and <a href="https://github.com/philipwalton/flexbugs" target="_blank" rel="noopener noreferrer">bugs around flexbox</a>, like the <a href="https://github.com/philipwalton/flexbugs#flexbug-9" target="_blank" rel="noopener noreferrer">inability to use some HTML elements as flex containers</a>.</p><h2 id="grid-options" tabindex="-1">Grid options <a class="anchor-link" href="#grid-options" aria-hidden="true">#</a></h2><p>CoreUI&#39;s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:</p><ul><li>Extra small (xs)</li><li>Small (sm)</li><li>Medium (md)</li><li>Large (lg)</li><li>Extra large (xl)</li><li>Extra extra large (xxl)</li></ul><p>As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here&#39;s how the grid changes across these breakpoints:</p><table class="table mb-4"><thead><tr><th scope="col"></th><th scope="col"> xs<br><span class="fw-normal">&lt;576px</span></th><th scope="col"> sm<br><span class="fw-normal">≥576px</span></th><th scope="col"> md<br><span class="fw-normal">≥768px</span></th><th scope="col"> lg<br><span class="fw-normal">≥992px</span></th><th scope="col"> xl<br><span class="fw-normal">≥1200px</span></th><th scope="col"> xxl<br><span class="fw-normal">≥1400px</span></th></tr></thead><tbody><tr><th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th><td>None (auto)</td><td>540px</td><td>720px</td><td>960px</td><td>1140px</td><td>1320px</td></tr><tr><th class="text-nowrap" scope="row">Class prefix</th><td><code>&lt;CCol xs=&gt;</code></td><td><code>&lt;CCol sm=&gt;</code></td><td><code>&lt;CCol md=&gt;</code></td><td><code>&lt;CCol lg=&gt;</code></td><td><code>&lt;CCol xl=&gt;</code></td><td><code>&lt;CCol xxl=&gt;</code></td></tr><tr><th class="text-nowrap" scope="row"># of columns</th><td colspan="6">12</td></tr><tr><th class="text-nowrap" scope="row">Gutter width</th><td colspan="6">1.5rem (.75rem on left and right)</td></tr><tr><th class="text-nowrap" scope="row">Custom gutters</th><td colspan="6"><a href="./layout/gutters">Yes</a></td></tr><tr><th class="text-nowrap" scope="row">Nestable</th><td colspan="6"><a href="#nesting">Yes</a></td></tr><tr><th class="text-nowrap" scope="row">Column ordering</th><td colspan="6"><a href="./layout/columns">Yes</a></td></tr></tbody></table><h2 id="auto-layout-columns" tabindex="-1">Auto-layout columns <a class="anchor-link" href="#auto-layout-columns" aria-hidden="true">#</a></h2><p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code>&lt;CCol sm={6}&gt;</code>.</p><h3 id="equal-width" tabindex="-1">Equal-width <a class="anchor-link" href="#equal-width" aria-hidden="true">#</a></h3><p>For example, here are two grid layouts that apply to every device and viewport, from <code>xs</code> to <code>xxl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>', 15);
 const _hoisted_20 = { class: "docs-example rounded-top p-4" };
 const _hoisted_21 = { class: "docs-example-row" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="setting-one-column-width" tabindex="-1">Setting one column width <a class="anchor-link" href="#setting-one-column-width" aria-hidden="true">#</a></h3><p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p>', 3);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 2</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="setting-one-column-width" tabindex="-1">Setting one column width <a class="anchor-link" href="#setting-one-column-width" aria-hidden="true">#</a></h3><p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p>', 3);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
 const _hoisted_26 = { class: "docs-example-row" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 3 (wider)</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 3 (wider)</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="variable-width-content" tabindex="-1">Variable width content <a class="anchor-link" href="#variable-width-content" aria-hidden="true">#</a></h3><p>Use <code>&lt;CCol {breakpoint}=&quot;auto&quot;</code> props to size columns based on the natural width of their content.</p>', 3);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 3 (wider)</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      2 of 3 (wider)</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="variable-width-content" tabindex="-1">Variable width content <a class="anchor-link" href="#variable-width-content" aria-hidden="true">#</a></h3><p>Use <code>&lt;CCol {breakpoint}=&quot;auto&quot;</code> props to size columns based on the natural width of their content.</p>', 3);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
 const _hoisted_31 = { class: "docs-example-row" };
 const _hoisted_32 = { class: "row justify-content-md-center" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row justify-content-md-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Variable width content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Variable width content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-classes" tabindex="-1">Responsive classes <a class="anchor-link" href="#responsive-classes" aria-hidden="true">#</a></h2><p>CoreUI&#39;s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p><h3 id="all-breakpoints" tabindex="-1">All breakpoints <a class="anchor-link" href="#all-breakpoints" aria-hidden="true">#</a></h3><p>For grids that are the same from the smallest of devices to the largest, use the <code>&lt;CCol&gt;</code> and <code>&lt;CCol xs={*}&gt;</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code>&lt;CCol&gt;</code>.</p>', 5);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row justify-content-md-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Variable width content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      1 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Variable width content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span> <span class="token attr-name">lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      3 of 3</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-classes" tabindex="-1">Responsive classes <a class="anchor-link" href="#responsive-classes" aria-hidden="true">#</a></h2><p>CoreUI&#39;s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p><h3 id="all-breakpoints" tabindex="-1">All breakpoints <a class="anchor-link" href="#all-breakpoints" aria-hidden="true">#</a></h3><p>For grids that are the same from the smallest of devices to the largest, use the <code>&lt;CCol&gt;</code> and <code>&lt;CCol xs={*}&gt;</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code>&lt;CCol&gt;</code>.</p>', 5);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
 const _hoisted_39 = { class: "docs-example-row" };
-const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="stacked-to-horizontal" tabindex="-1">Stacked to horizontal <a class="anchor-link" href="#stacked-to-horizontal" aria-hidden="true">#</a></h3><p>Using a single set of <code>&lt;CCol sm={*}&gt;</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code>sm</code>).</p>', 3);
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="stacked-to-horizontal" tabindex="-1">Stacked to horizontal <a class="anchor-link" href="#stacked-to-horizontal" aria-hidden="true">#</a></h3><p>Using a single set of <code>&lt;CCol sm={*}&gt;</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code>sm</code>).</p>', 3);
 const _hoisted_43 = { class: "docs-example rounded-top p-4" };
 const _hoisted_44 = { class: "docs-example-row" };
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-sm-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>col-sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>col-sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>col-sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="mix-and-match" tabindex="-1">Mix and match <a class="anchor-link" href="#mix-and-match" aria-hidden="true">#</a></h3><p>Don&#39;t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>', 3);
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-sm-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>col-sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>col-sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span>col-sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="mix-and-match" tabindex="-1">Mix and match <a class="anchor-link" href="#mix-and-match" aria-hidden="true">#</a></h3><p>Don&#39;t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>', 3);
 const _hoisted_48 = { class: "docs-example rounded-top p-4" };
 const _hoisted_49 = { class: "docs-example-row" };
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="row-columns" tabindex="-1">Row columns <a class="anchor-link" href="#row-columns" aria-hidden="true">#</a></h3><p>Use the responsive <code>:{breakpoint}=&quot;{ cols: * }&quot;</code> classes to quickly set the number of columns that best render your content and layout. Whereas normal <code>&lt;CCol xs=&quot;*&quot;&gt;</code> classes apply to the individual columns (e.g., <code>&lt;CCol xs=&quot;4&quot;&gt;</code>), the row columns classes are set on the parent <code>&lt;CRow&gt;</code> as a shortcut. With <code>:{breakpoint}=&quot;{ cols: &#39;auto&#39; }&quot;</code> you can give the columns their natural width.</p><p>Use these row columns classes to quickly create basic grid layouts or to control your card layouts.</p>', 4);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-md-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="row-columns" tabindex="-1">Row columns <a class="anchor-link" href="#row-columns" aria-hidden="true">#</a></h3><p>Use the responsive <code>:{breakpoint}=&quot;{ cols: * }&quot;</code> classes to quickly set the number of columns that best render your content and layout. Whereas normal <code>&lt;CCol xs=&quot;*&quot;&gt;</code> classes apply to the individual columns (e.g., <code>&lt;CCol xs=&quot;4&quot;&gt;</code>), the row columns classes are set on the parent <code>&lt;CRow&gt;</code> as a shortcut. With <code>:{breakpoint}=&quot;{ cols: &#39;auto&#39; }&quot;</code> you can give the columns their natural width.</p><p>Use these row columns classes to quickly create basic grid layouts or to control your card layouts.</p>', 4);
 const _hoisted_54 = { class: "docs-example rounded-top p-4" };
 const _hoisted_55 = { class: "docs-example-row" };
-const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 2 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 2 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_57 = { class: "docs-example rounded-top p-4" };
 const _hoisted_58 = { class: "docs-example-row" };
-const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 3 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_60 = { class: "docs-example rounded-top p-4" };
 const _hoisted_61 = { class: "docs-example-row" };
-const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: &#39;auto&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: &#39;auto&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_63 = { class: "docs-example rounded-top p-4" };
 const _hoisted_64 = { class: "docs-example-row" };
-const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_66 = { class: "docs-example rounded-top p-4" };
 const _hoisted_67 = { class: "docs-example-row" };
-const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_69 = { class: "docs-example rounded-top p-4" };
 const _hoisted_70 = { class: "docs-example-row" };
-const _hoisted_71 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr></tbody></table><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 14);
+const _hoisted_71 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 1 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 4 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr></tbody></table><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 14);
 function _sfc_render(_ctx, _cache) {
   const _component_CCol = resolveComponent("CCol");
   const _component_CRow = resolveComponent("CRow");
diff --git a/vue/docs/assets/gutters.html-DNXIcgRp.js b/vue/docs/assets/gutters.html-BqQUwcbR.js
similarity index 54%
rename from vue/docs/assets/gutters.html-DNXIcgRp.js
rename to vue/docs/assets/gutters.html-BqQUwcbR.js
index b36896420a8..7c0faddf07f 100644
--- a/vue/docs/assets/gutters.html-DNXIcgRp.js
+++ b/vue/docs/assets/gutters.html-BqQUwcbR.js
@@ -1,26 +1,26 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-they-work" tabindex="-1">How they work <a class="anchor-link" href="#how-they-work" aria-hidden="true">#</a></h2><ul><li><p><strong>Gutters are the gaps between column content, created by horizontal <code>padding</code>.</strong> We set <code>padding-right</code> and <code>padding-left</code> on each column, and use negative <code>margin</code> to offset that at the start and end of each row to align content.</p></li><li><p><strong>Gutters start at <code>1.5rem</code> (<code>24px</code>) wide.</strong> This allows us to match our grid to the <a href="https://coreui.io/docs/utilities/spacing" target="_blank" rel="noopener noreferrer">padding and margin spacers</a> scale.</p></li><li><p><strong>Gutters can be responsively adjusted.</strong> Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters.</p></li></ul><h2 id="horizontal-gutters" tabindex="-1">Horizontal gutters <a class="anchor-link" href="#horizontal-gutters" aria-hidden="true">#</a></h2><p><code>:{breakpoint}=&quot;{ gutterX: * }&quot;</code> props can be used to control the horizontal gutter widths. The <code>&lt;CContainer&gt;</code> or <code>&lt;CContainer fluid&gt;</code> parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we&#39;ve increased the padding with <code>.px-4</code>:</p>', 4);
 const _hoisted_5 = { class: "docs-example rounded-top p-4" };
 const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_7 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>px-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutterX: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>An alternative solution is to add a wrapper around the <code>&lt;CRow&gt;</code> with the <code>.overflow-hidden</code> class:</p>', 2);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>px-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutterX: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>An alternative solution is to add a wrapper around the <code>&lt;CRow&gt;</code> with the <code>.overflow-hidden</code> class:</p>', 2);
 const _hoisted_10 = { class: "docs-example rounded-top p-4" };
 const _hoisted_11 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_12 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutterX: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vertical-gutters" tabindex="-1">Vertical gutters <a class="anchor-link" href="#vertical-gutters" aria-hidden="true">#</a></h2><p><code>:{breakpoint}=&quot;{ gutterY: * }&quot;</code> props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the <code>&lt;CRow&gt;</code> at the end of a page. If this occurs, you add a wrapper around <code>&lt;CRow&gt;</code> with the <code>.overflow-hidden</code> class:</p>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutterX: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vertical-gutters" tabindex="-1">Vertical gutters <a class="anchor-link" href="#vertical-gutters" aria-hidden="true">#</a></h2><p><code>:{breakpoint}=&quot;{ gutterY: * }&quot;</code> props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the <code>&lt;CRow&gt;</code> at the end of a page. If this occurs, you add a wrapper around <code>&lt;CRow&gt;</code> with the <code>.overflow-hidden</code> class:</p>', 3);
 const _hoisted_16 = { class: "docs-example rounded-top p-4" };
 const _hoisted_17 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_18 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_19 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_20 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutterY: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal-vertical-gutters" tabindex="-1">Horizontal &amp; vertical gutters <a class="anchor-link" href="#horizontal-vertical-gutters" aria-hidden="true">#</a></h2><p><code>:{breakpoint}=&quot;{ gutter: * }&quot;</code> props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won&#39;t be a need to add the <code>.overflow-hidden</code> wrapper class.</p>', 3);
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutterY: 5 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal-vertical-gutters" tabindex="-1">Horizontal &amp; vertical gutters <a class="anchor-link" href="#horizontal-vertical-gutters" aria-hidden="true">#</a></h2><p><code>:{breakpoint}=&quot;{ gutter: * }&quot;</code> props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won&#39;t be a need to add the <code>.overflow-hidden</code> wrapper class.</p>', 3);
 const _hoisted_24 = { class: "docs-example rounded-top p-4" };
 const _hoisted_25 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_26 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_27 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
 const _hoisted_28 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Custom column padding", -1);
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutter: 2 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="row-columns-gutters" tabindex="-1">Row columns gutters <a class="anchor-link" href="#row-columns-gutters" aria-hidden="true">#</a></h2><p>Gutter props can also be added to <a href="../layout/grid#row-columns">row columns</a>. In the following example, we use responsive row columns and responsive gutter props.</p>', 3);
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutter: 2 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 6 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom column padding<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="row-columns-gutters" tabindex="-1">Row columns gutters <a class="anchor-link" href="#row-columns-gutters" aria-hidden="true">#</a></h2><p>Gutter props can also be added to <a href="../layout/grid#row-columns">row columns</a>. In the following example, we use responsive row columns and responsive gutter props.</p>', 3);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
 const _hoisted_33 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Row column", -1);
 const _hoisted_34 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Row column", -1);
@@ -32,10 +32,10 @@ const _hoisted_39 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border
 const _hoisted_40 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Row column", -1);
 const _hoisted_41 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Row column", -1);
 const _hoisted_42 = /* @__PURE__ */ createBaseVNode("div", { class: "p-3 border bg-light" }, "Row column", -1);
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols:2, gutter: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 5, gutter: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="no-gutters" tabindex="-1">No gutters <a class="anchor-link" href="#no-gutters" aria-hidden="true">#</a></h2><p>The gutters between columns in our predefined grid props can be removed with <code>:{breakpoint}=&quot;{ gutter: 0 }&quot;</code>. This removes the negative <code>margin</code>s from <code>&lt;CRow&gt;</code> and the horizontal <code>padding</code> from all immediate children columns.</p><p><strong>Need an edge-to-edge design?</strong> Drop the parent <code>&lt;CContainer&gt;</code> or <code>&lt;CContainer fluid&gt;</code>.</p><p>In practice, here&#39;s how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).</p>', 5);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols:2, gutter: 2 }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ cols: 5, gutter: 3}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3 border bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Row column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="no-gutters" tabindex="-1">No gutters <a class="anchor-link" href="#no-gutters" aria-hidden="true">#</a></h2><p>The gutters between columns in our predefined grid props can be removed with <code>:{breakpoint}=&quot;{ gutter: 0 }&quot;</code>. This removes the negative <code>margin</code>s from <code>&lt;CRow&gt;</code> and the horizontal <code>padding</code> from all immediate children columns.</p><p><strong>Need an edge-to-edge design?</strong> Drop the parent <code>&lt;CContainer&gt;</code> or <code>&lt;CContainer fluid&gt;</code>.</p><p>In practice, here&#39;s how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).</p>', 5);
 const _hoisted_48 = { class: "docs-example rounded-top p-4" };
 const _hoisted_49 = { class: "docs-example-row" };
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutter: 0 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-6 .col-md-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr></tbody></table><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 14);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ gutter: 0 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-sm-6 .col-md-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-md-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CContainer <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CContainer&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>sm</strong></td><td>Set container 100% wide until small breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>Set container 100% wide until medium breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>Set container 100% wide until large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>Set container 100% wide until X-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>Set container 100% wide until XX-large breakpoint.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Set container 100% wide, spanning the entire width of the viewport.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Object as () =&gt; BPObject</td><td><code>{ cols: &#39;auto&#39; | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }</code></td><td>-</td></tr></tbody></table><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CCol <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CCol <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/grid/CCol&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>xs</strong></td><td>The number of columns/offset/order on extra small devices (&lt;576px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns/offset/order on small devices (&lt;768px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns/offset/order on medium devices (&lt;992px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns/offset/order on large devices (&lt;1200px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns/offset/order on X-Large devices (&lt;1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns/offset/order on XX-Large devices (≥1400px).</td><td>Col</td><td><code>&#39;auto&#39; | number | string | boolean | { span: &#39;auto&#39; | number | string | boolean } | { offset: number | string } | { order: &#39;first&#39; | &#39;last&#39; | number | string }</code></td><td>-</td></tr></tbody></table>', 14);
 function _sfc_render(_ctx, _cache) {
   const _component_CCol = resolveComponent("CCol");
   const _component_CRow = resolveComponent("CRow");
diff --git a/vue/docs/assets/header.html-DHYA60o2.js b/vue/docs/assets/header.html-DBfVFFNJ.js
similarity index 56%
rename from vue/docs/assets/header.html-DHYA60o2.js
rename to vue/docs/assets/header.html-DBfVFFNJ.js
index 593c3d9d710..03c5dc37976 100644
--- a/vue/docs/assets/header.html-DHYA60o2.js
+++ b/vue/docs/assets/header.html-DBfVFFNJ.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {
   data() {
     return {
@@ -8,9 +8,9 @@ const _sfc_main = {
 };
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Here&#39;s what you need to know before getting started with the header:</p><ul><li>Headers require a wrapping <code>.header</code> with <code>.header-expand{-sm|-md|-lg|-xl|-xxl}</code> for responsive collapsing and <a href="#color-schemes">color scheme</a> classes.</li><li>Headers and their contents are fluid by default. Change the <a href="#containers">container</a> to limit their horizontal width in different ways.</li><li>Use our <a href="https://coreui.io/docs/utilities/spacing%22" target="_blank" rel="noopener noreferrer">spacing</a> and <a href="https://coreui.io/docs/4.0/utilities/flex" target="_blank" rel="noopener noreferrer">flex</a> utility classes for controlling spacing and alignment within headers.</li><li>Headers are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.</li><li>Ensure accessibility by using a <code>&lt;nav&gt;</code> element or, if using a more generic element such as a <code>&lt;div&gt;</code>, add a <code>role=&quot;navigation&quot;</code> to every header to explicitly identify it as a landmark region for users of assistive technologies.</li><li>Indicate the current item by using <code>aria-current=&quot;page&quot;</code> for the current page or <code>aria-current=&quot;true&quot;</code> for the current item in a set.</li></ul><h2 id="supported-content" tabindex="-1">Supported content <a class="anchor-link" href="#supported-content" aria-hidden="true">#</a></h2><p>Headers come with built-in support for a handful of sub-components. Choose from the following as needed:</p><ul><li><code>&lt;CHeaderBrand&gt;</code> for your company, product, or project name.</li><li><code>&lt;CHeaderNav&gt;</code> for a full-height and lightweight navigation (including support for dropdowns).</li><li><code>&lt;CHeaderToggler&gt;</code> for use with our collapse plugin and other <a href="#responsive-behaviors">navigation toggling</a> behaviors.</li><li>Flex and spacing utilities for any form controls and actions.</li><li><code>&lt;CHeaderText&gt;</code> for adding vertically centered strings of text.</li><li><code>&lt;CCollapse class=&quot;header-collapse&quot;&gt;</code> for grouping and hiding header contents by a parent breakpoint.</li></ul><p>Here&#39;s an example of all the sub-components included in a responsive light-themed header that automatically collapses at the <code>lg</code> (large) breakpoint.</p>', 7);
 const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeaderBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CHeaderBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeaderToggler</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeaderNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dropdown<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CHeaderNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token comment">&lt;!-- &lt;form class=&quot;d-flex&quot;&gt;</span>\n<span class="line">        &lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;</span>\n<span class="line">        &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;</span>\n<span class="line">      &lt;/form&gt; --&gt;</span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue headers use local CSS variables on <code>.header</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CHeader <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CHeader<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place header in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cheaderbrand" tabindex="-1">CHeaderBrand <a class="anchor-link" href="#cheaderbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr></tbody></table><h3 id="cheadernav" tabindex="-1">CHeaderNav <a class="anchor-link" href="#cheadernav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 13);
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeaderBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CHeaderBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeaderToggler</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CHeaderNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">togglerText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dropdown<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CHeaderNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token comment">&lt;!-- &lt;form class=&quot;d-flex&quot;&gt;</span>\n<span class="line">        &lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;</span>\n<span class="line">        &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;</span>\n<span class="line">      &lt;/form&gt; --&gt;</span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue headers use local CSS variables on <code>.header</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CHeader <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CHeader<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place header in non-static positions.</td><td>string</td><td><code>&#39;fixed&#39;</code>, <code>&#39;sticky&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cheaderbrand" tabindex="-1">CHeaderBrand <a class="anchor-link" href="#cheaderbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr></tbody></table><h3 id="cheadernav" tabindex="-1">CHeaderNav <a class="anchor-link" href="#cheadernav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CHeaderNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CHeaderNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/header/CHeaderNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 13);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CHeaderBrand = resolveComponent("CHeaderBrand");
   const _component_CHeaderToggler = resolveComponent("CHeaderToggler");
diff --git a/vue/docs/assets/icon.html-D5YAsQ5X.js b/vue/docs/assets/icon.html-C2C1fAVP.js
similarity index 98%
rename from vue/docs/assets/icon.html-D5YAsQ5X.js
rename to vue/docs/assets/icon.html-C2C1fAVP.js
index a827a7bb8ab..cb2ec6b9b9f 100644
--- a/vue/docs/assets/icon.html-D5YAsQ5X.js
+++ b/vue/docs/assets/icon.html-C2C1fAVP.js
@@ -1,4 +1,4 @@
-import { m as cibCoreuiC, p as cibDiscourse, q as cibFacebook, v as cibGithub, x as cibOpenCollective, y as cibTwitter, z as cilArrowBottom, A as cilArrowRight, B as cilArrowTop, C as cilBasket, D as cilBurn, E as cilCheckCircle, G as cilCloudDownload, H as cilContrast, I as cilFilterX, J as cilHandshake, K as cilInfo, L as cilLayers, M as cilMenu, N as cilMoon, O as cilOptions, P as cilPeople, Q as cilPuzzle, R as cilSettings, S as cilSpeedometer, T as cilSun, U as cilSwapVertical, V as cilUserFollow, W as cilWarning, _ as _export_sfc, X as CIcon, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode, h as createBlock, F as Fragment, j as renderList, t as toDisplayString, i as createCommentVNode } from "./app-Dv803XR0.js";
+import { m as cibCoreuiC, p as cibDiscourse, q as cibFacebook, u as cibGithub, v as cibOpenCollective, x as cibTwitter, y as cilArrowBottom, z as cilArrowRight, A as cilArrowTop, B as cilBasket, C as cilBurn, D as cilCheckCircle, E as cilCloudDownload, G as cilContrast, H as cilFilterX, I as cilHandshake, J as cilInfo, K as cilLayers, L as cilMenu, M as cilMoon, N as cilOptions, O as cilPeople, P as cilPuzzle, Q as cilSettings, R as cilSpeedometer, S as cilSun, T as cilSwapVertical, U as cilUserFollow, V as cilWarning, _ as _export_sfc, W as CIcon, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode, h as createBlock, F as Fragment, j as renderList, t as toDisplayString, i as createCommentVNode } from "./app-BoHWg5jI.js";
 import { c as cifDe, a as cifEs, b as cifGb, d as cifPl, e as cifUs } from "./cif-us-C2ywU_oW.js";
 var cib500px5 = ["32 32", "<path d='M8.456 21.519c-0.406-0.887-0.431-1.144 0.462-1.444 1.6-0.5 0.5 0.575 2.7 3.075h0.019v-5.869c0.075-3.137 2.75-5.762 6.106-5.762 3.369 0 6.106 2.719 6.106 6.050 0 3.962-3.8 7.075-8.031 5.831-0.656-0.262-0.131-1.981 0.531-1.787 3.313 0 5.587-0.631 5.587-4.025 0-3.813-4.819-5.6-7.306-2.787-1.469 1.65-1.1 2.631-1.1 9.85 3.169 1.938 7.394 1.375 10.025-1.256 1.55-1.55 2.406-3.625 2.406-5.813 0-2.2-0.862-4.262-2.425-5.831-1.55-1.55-3.613-2.406-5.831-2.406s-4.3 0.863-5.844 2.406c-0.019 0.019-1 1.031-1.325 1.494l-0.031 0.038c-0.206 0.294-0.394 0.569-1.256 0.381-0.431-0.106-0.894-0.363-0.894-0.738v-11.675c0-0.313 0.244-0.656 0.656-0.656h15.081c0.519 0 0.519 0.725 0.519 0.944 0 0.244 0 0.944-0.519 0.944h-13.95v8.306h0.019c6.512-6.863 17.675-2.25 17.675 6.806 0 11.131-15.3 13.769-19.381 3.925zM12.413 5.219c-0.031 0.262 0.287 1.531 0.912 1.288 7.8-2.969 12.675 2.525 13.088 2.525 0.3 0 1.425-0.956 0.894-1.425-5.825-5.563-14.656-3.563-14.894-2.387zM26.563 25.919c-6.875 6.869-18.688 3.8-20.75-6.512 0-0.762-1.9-0.462-1.806 0.206 1.5 10.837 15.375 16.056 23.85 7.581 0.431-0.488-0.787-1.775-1.294-1.275zM15.35 19.163c0 0.25 0.269 0.456 0.344 0.531 0.188 0.188 0.381 0.275 0.531 0.275 0.237 0 0.162 0.012 1.394-1.219 1.225 1.206 1.194 1.219 1.394 1.219 0.338 0 1.156-0.65 0.669-1.137l-1.081-1.081 1.137-1.137c0.394-0.425-0.631-1.363-1.012-0.981l-1.119 1.119c-1.162-1.175-1.15-1.219-1.344-1.219-0.313 0-1.125 0.731-0.775 1.081l1.137 1.137c-1.131 1.119-1.275 1.2-1.275 1.413z'/>"];
 var cib500px = ["32 32", "<path d='M9.917 12.016c-2.199 0-3.98 1.781-3.985 3.984 0 2.203 1.787 3.984 3.985 3.984 2.203 0 3.984-1.781 3.989-3.984-0.005-2.203-1.787-3.984-3.989-3.984zM9.917 19.136c-1.729 0-3.136-1.407-3.136-3.136s1.407-3.136 3.136-3.136c1.728 0 3.14 1.407 3.14 3.136s-1.412 3.136-3.14 3.136zM18.547 12.016c-2.197 0-3.984 1.781-3.984 3.984s1.787 3.984 3.984 3.984c2.203 0 3.984-1.781 3.989-3.984-0.005-2.203-1.787-3.984-3.989-3.984zM18.547 19.136c-1.729 0-3.135-1.407-3.135-3.136s1.405-3.136 3.135-3.136c1.729 0 3.141 1.407 3.141 3.136s-1.412 3.136-3.141 3.136zM3.068 14.407c-0.761-0.115-1.527 0.088-2.131 0.563v-2.115h3.584c0.124 0 0.213-0.021 0.213-0.391 0-0.36-0.147-0.371-0.24-0.371h-3.968c-0.229 0-0.349 0.188-0.349 0.391v3.469c0 0.183 0.115 0.244 0.328 0.287 0.188 0.036 0.297 0.015 0.38-0.079l0.005-0.011c0.38-0.547 1.203-1.072 1.984-0.979 0.932 0.115 1.683 0.859 1.787 1.771 0.136 1.197-0.797 2.245-2.005 2.245-0.844 0-1.583-0.543-1.891-1.333-0.047-0.115-0.125-0.204-0.459-0.084-0.307 0.109-0.323 0.245-0.28 0.36 0.4 1.104 1.452 1.843 2.629 1.848 3.459-0.020 3.823-5.057 0.412-5.572zM25.26 12.052c-1.072 0.084-1.911 1.027-1.911 2.145v3.548c0 0.208 0.156 0.249 0.391 0.249 0.233 0 0.391-0.041 0.391-0.249v-3.557c0-0.699 0.509-1.297 1.156-1.365 0.369-0.036 0.735 0.084 1.011 0.328 0.276 0.251 0.432 0.604 0.432 0.975 0 0.109-0.052 0.453-0.292 0.776-0.183 0.239-0.52 0.531-1.125 0.531h-0.009c-0.157 0-0.287 0.005-0.313 0.375-0.020 0.245-0.016 0.355 0.199 0.387 0.38 0.052 0.765-0.021 1.151-0.224 0.656-0.339 1.093-0.985 1.145-1.688 0.047-0.604-0.172-1.199-0.599-1.631-0.432-0.427-1.021-0.645-1.625-0.599zM30.484 14.131l1.448-1.448c0.052-0.052 0.177-0.172-0.072-0.432-0.111-0.111-0.204-0.168-0.292-0.168-0.063 0.005-0.12 0.032-0.161 0.079l-1.448 1.453-1.448-1.459c-0.12-0.12-0.256-0.088-0.432 0.089-0.177 0.176-0.209 0.317-0.095 0.437l1.448 1.453-1.427 1.427c-0.032 0.036-0.084 0.083-0.084 0.167-0.004 0.083 0.052 0.188 0.167 0.297 0.095 0.099 0.183 0.145 0.267 0.145 0.093 0 0.151-0.063 0.187-0.093l1.423-1.423 1.452 1.453c0.043 0.041 0.1 0.063 0.157 0.063 0.093 0 0.187-0.052 0.291-0.156 0.163-0.172 0.188-0.319 0.079-0.428z'/>"];
@@ -4745,18 +4745,54 @@ const _sfc_main = {
     };
   }
 };
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="installation" tabindex="-1">Installation <a class="anchor-link" href="#installation" aria-hidden="true">#</a></h2><p>If you want to use our icon component and our icons library you have to install two additional packages.</p><h3 id="npm" tabindex="-1">Npm <a class="anchor-link" href="#npm" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line">// CoreUI Icons library</span>\n<span class="line"><span class="token function">npm</span> <span class="token function">install</span> @coreui/icons</span>\n<span class="line"></span>\n<span class="line">// CIcon component</span>\n<span class="line"><span class="token function">npm</span> <span class="token function">install</span> @coreui/icons-vue </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="yarn" tabindex="-1">Yarn <a class="anchor-link" href="#yarn" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">yarn</span> <span class="token function">add</span> @coreui/icons</span>\n<span class="line"><span class="token function">yarn</span> <span class="token function">add</span> @coreui/icons-vue</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage" tabindex="-1">Usage <a class="anchor-link" href="#usage" aria-hidden="true">#</a></h2><h3 id="single-icon" tabindex="-1">Single icon <a class="anchor-link" href="#single-icon" aria-hidden="true">#</a></h3>', 8);
-const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilShieldAlt<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> cilList<span class="token punctuation">,</span> cilShieldAlt <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">    CIcon</span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      cilList<span class="token punctuation">,</span></span>\n<span class="line">      cilShieldAlt<span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="all-icons" tabindex="-1">All icons <a class="anchor-link" href="#all-icons" aria-hidden="true">#</a></h3><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon.cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> icon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">    CIcon</span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      icon<span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="icons-object" tabindex="-1">Icons object <a class="anchor-link" href="#icons-object" aria-hidden="true">#</a></h3><p>This way you import your needed icons once and pass them to $root object on &#39;icons&#39; key</p><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// main.js / main.ts</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span></span>\n<span class="line">  cilArrowBottom<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowRight<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowTop<span class="token punctuation">,</span></span>\n<span class="line">  cilBan<span class="token punctuation">,</span></span>\n<span class="line">  cilBasket<span class="token punctuation">,</span></span>\n<span class="line">  cilBell<span class="token punctuation">,</span></span>\n<span class="line">  cilCalculator<span class="token punctuation">,</span></span>\n<span class="line">  cilCalendar</span>\n<span class="line"><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> icons <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  cilArrowBottom<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowRight<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowTop<span class="token punctuation">,</span></span>\n<span class="line">  cilBan<span class="token punctuation">,</span></span>\n<span class="line">  cilBasket<span class="token punctuation">,</span></span>\n<span class="line">  cilBell<span class="token punctuation">,</span></span>\n<span class="line">  cilCalculator<span class="token punctuation">,</span></span>\n<span class="line">  cilCalendar</span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span></span>\n<span class="line"><span class="token operator">...</span></span>\n<span class="line">app<span class="token punctuation">.</span><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">&#39;icons&#39;</span><span class="token punctuation">,</span> icons<span class="token punctuation">)</span></span>\n<span class="line">app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&#39;CIcon&#39;</span><span class="token punctuation">,</span> CIcon<span class="token punctuation">)</span></span>\n<span class="line"><span class="token operator">...</span></span>\n<span class="line">app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">)</span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Later anywhere in the app:</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilArrowBottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can pass the name of the icon both in camelCase and kebab-case</p><h2 id="available-icons" tabindex="-1">Available icons <a class="anchor-link" href="#available-icons" aria-hidden="true">#</a></h2><p>CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.</p>', 11);
-const _hoisted_21 = { class: "p-3 py-4 mb-2 bg-light text-center rounded" };
-const _hoisted_22 = { class: "text-body-secondary text-center pt-1 small" };
-const _hoisted_23 = { class: "p-3 py-4 mb-2 bg-light text-center rounded" };
-const _hoisted_24 = { class: "text-body-secondary text-center pt-1 small" };
-const _hoisted_25 = { class: "p-3 py-4 mb-2 bg-light text-center rounded" };
-const _hoisted_26 = { class: "text-body-secondary text-center pt-1 small" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cicon" tabindex="-1">CIcon <a class="anchor-link" href="#cicon" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>content</strong></td><td>Use <code>:icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string|array</td><td>-</td><td>-</td></tr><tr><td><strong>custom-class-name</strong></td><td>Use for replacing default CIcon component classes. Prop is overriding the &#39;size&#39; prop.</td><td>string|array|object</td><td>-</td><td>-</td></tr><tr><td><strong>icon</strong></td><td>Name of the icon placed in Vue object or SVG content.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>Use <code>icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size of the icon. Available sizes: &#39;sm&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;xxl&#39;, &#39;3xl...9xl&#39;, &#39;custom&#39;, &#39;custom-size&#39;.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title tag content.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>use</strong></td><td>If defined component will be rendered using &#39;use&#39; tag.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="installation" tabindex="-1">Installation <a class="anchor-link" href="#installation" aria-hidden="true">#</a></h2><p>To start using CoreUI Vue Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice:</p><h3 id="npm" tabindex="-1">Npm <a class="anchor-link" href="#npm" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line">// CoreUI Icons library</span>\n<span class="line"><span class="token function">npm</span> <span class="token function">install</span> @coreui/icons</span>\n<span class="line"></span>\n<span class="line">// CIcon component</span>\n<span class="line"><span class="token function">npm</span> <span class="token function">install</span> @coreui/icons-vue </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="yarn" tabindex="-1">Yarn <a class="anchor-link" href="#yarn" aria-hidden="true">#</a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">yarn</span> <span class="token function">add</span> @coreui/icons</span>\n<span class="line"><span class="token function">yarn</span> <span class="token function">add</span> @coreui/icons-vue</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage" tabindex="-1">Usage <a class="anchor-link" href="#usage" aria-hidden="true">#</a></h2><p>Import vue.js icons using one of these two options:</p><h3 id="single-vue-js-icon" tabindex="-1">Single Vue.js icon <a class="anchor-link" href="#single-vue-js-icon" aria-hidden="true">#</a></h3><p>To use a single Vue.js icon, import the <code>&lt;CIcon&gt;</code> component and the desired icon(s) from the <code>@coreui/icons</code> library. Then, include the <code>&lt;CIcon&gt;</code> component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the <code>size</code> prop.</p>', 10);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilShieldAlt<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> cilList<span class="token punctuation">,</span> cilShieldAlt <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">    CIcon</span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      cilList<span class="token punctuation">,</span></span>\n<span class="line">      cilShieldAlt<span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="all-icons" tabindex="-1">All icons <a class="anchor-link" href="#all-icons" aria-hidden="true">#</a></h3><p>To use all icons available in the CoreUI Vue.js Icons package, import the CIcon component and the entire <code>@coreui/icons</code> library using the <code>* as</code> syntax. Then, reference the desired icon within the <code>icon</code> prop.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon.cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> icon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">    CIcon</span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      icon<span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="icons-object" tabindex="-1">Icons object <a class="anchor-link" href="#icons-object" aria-hidden="true">#</a></h3><p>This way you import your needed Vue.js icons once and pass them to $root object on &#39;icons&#39; key</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// main.js / main.ts</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span></span>\n<span class="line">  cilArrowBottom<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowRight<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowTop<span class="token punctuation">,</span></span>\n<span class="line">  cilBan<span class="token punctuation">,</span></span>\n<span class="line">  cilBasket<span class="token punctuation">,</span></span>\n<span class="line">  cilBell<span class="token punctuation">,</span></span>\n<span class="line">  cilCalculator<span class="token punctuation">,</span></span>\n<span class="line">  cilCalendar</span>\n<span class="line"><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> icons <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  cilArrowBottom<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowRight<span class="token punctuation">,</span></span>\n<span class="line">  cilArrowTop<span class="token punctuation">,</span></span>\n<span class="line">  cilBan<span class="token punctuation">,</span></span>\n<span class="line">  cilBasket<span class="token punctuation">,</span></span>\n<span class="line">  cilBell<span class="token punctuation">,</span></span>\n<span class="line">  cilCalculator<span class="token punctuation">,</span></span>\n<span class="line">  cilCalendar</span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span></span>\n<span class="line"><span class="token operator">...</span></span>\n<span class="line">app<span class="token punctuation">.</span><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">&#39;icons&#39;</span><span class="token punctuation">,</span> icons<span class="token punctuation">)</span></span>\n<span class="line">app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&#39;CIcon&#39;</span><span class="token punctuation">,</span> CIcon<span class="token punctuation">)</span></span>\n<span class="line"><span class="token operator">...</span></span>\n<span class="line">app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">)</span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Later anywhere in the app:</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilArrowBottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can pass the name of the icon both in camelCase and kebab-case</p><h3 id="color" tabindex="-1">Color <a class="anchor-link" href="#color" aria-hidden="true">#</a></h3><p>The CoreUI Vue Icon component offers versatile color customization options, empowering you to personalize the icons in multiple ways. You can effortlessly modify the colors by utilizing either class names or CSS variables, providing flexibility and ease in creating visually stunning and cohesive icon designs.</p><h4 id="utility-classes" tabindex="-1">Utility classes <a class="anchor-link" href="#utility-classes" aria-hidden="true">#</a></h4><p>With some <a href="https://coreui.io/docs/utilities/colors/" target="_blank" rel="noopener noreferrer">color utility classes</a>, you may use color to convey message.</p>', 14);
+const _hoisted_26 = { class: "docs-example rounded-top p-4" };
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">::: demo</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">:::</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="css-variables" tabindex="-1">CSS Variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h4><p>CoreUI Vue Icons leverage local CSS variables, such as <code>--ci-primary-color</code> and <code>--ci-secondary-color</code> (for Duotone icons), to facilitate real-time customization. This allows developers to easily customize the icons by providing their own custom CSS variables.</p>', 3);
+const _hoisted_30 = { class: "docs-example rounded-top p-4" };
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{&#39;--ci-primary-color&#39;: &#39;red&#39;}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{&#39;--ci-primary-color&#39;: &#39;green&#39;}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h3><p>Set heights of vue icons using size property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
+const _hoisted_34 = { class: "docs-example rounded-top p-4" };
+const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3xl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-svg-icons" tabindex="-1">Custom SVG Icons <a class="anchor-link" href="#custom-svg-icons" aria-hidden="true">#</a></h3><p>The <code>&lt;CIconSvg</code>&gt; component allows you to add custom SVG icons to your application. In case you want to use custom SVG icons, this component provides the flexibility to include bespoke SVG graphics that align with your design requirements.</p>', 3);
+const _hoisted_38 = { class: "docs-example rounded-top p-4" };
+const _hoisted_39 = /* @__PURE__ */ createBaseVNode("svg", {
+  viewBox: "0 0 102 116",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+}, [
+  /* @__PURE__ */ createBaseVNode("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, [
+    /* @__PURE__ */ createBaseVNode("g", {
+      fill: "#3C4B64",
+      fillRule: "nonzero"
+    }, [
+      /* @__PURE__ */ createBaseVNode("path", {
+        d: "M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z",
+        id: "Shape"
+      }),
+      /* @__PURE__ */ createBaseVNode("path", {
+        d: "M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z",
+        id: "Path"
+      })
+    ])
+  ])
+], -1);
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIconSvg</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">      <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 102 116<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">version</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1.1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">xmlnsXlink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/1999/xlink<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>g</span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>none<span class="token punctuation">&quot;</span></span> <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>none<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fillRule</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>evenodd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>g</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#3C4B64<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fillRule</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nonzero<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span></span>\n<span class="line">            <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Shape<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span></span>\n<span class="line">            <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Path<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>g</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>g</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CIconSvg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> CIconSvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      CIconSvg</span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="available-icons" tabindex="-1">Available icons <a class="anchor-link" href="#available-icons" aria-hidden="true">#</a></h2><p>CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.</p>', 3);
+const _hoisted_43 = { class: "p-3 py-4 mb-2 bg-body-tertiary text-center rounded" };
+const _hoisted_44 = { class: "text-body-secondary text-center pt-1 small" };
+const _hoisted_45 = { class: "p-3 py-4 mb-2 bg-body-tertiary text-center rounded" };
+const _hoisted_46 = { class: "text-body-secondary text-center pt-1 small" };
+const _hoisted_47 = { class: "p-3 py-4 mb-2 bg-body-tertiary text-center rounded" };
+const _hoisted_48 = { class: "text-body-secondary text-center pt-1 small" };
+const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cicon" tabindex="-1">CIcon <a class="anchor-link" href="#cicon" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CIcon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue/src/CIcon&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>content</strong></td><td>Use <code>:icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string|array</td><td>-</td><td>-</td></tr><tr><td><strong>custom-class-name</strong></td><td>Use for replacing default CIcon component classes. Prop is overriding the &#39;size&#39; prop.</td><td>string|array|object</td><td>-</td><td>-</td></tr><tr><td><strong>icon</strong></td><td>Name of the icon placed in React object or SVG content.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>Use <code>icon=&quot;...&quot;</code> instead of<br><code>@deprecated</code> since version 3.0</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size of the icon. Available sizes: &#39;sm&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;xxl&#39;, &#39;3xl...9xl&#39;, &#39;custom&#39;, &#39;custom-size&#39;.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title tag content.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>use</strong></td><td>If defined component will be rendered using &#39;use&#39; tag.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="ciconsvg" tabindex="-1">CIconSvg <a class="anchor-link" href="#ciconsvg" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CIconSvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CIconSvg <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue/src/CIconSvg&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>Use for replacing default CIconSvg component classes. Prop is overriding the &#39;size&#39; prop.</td><td>string|array|object</td><td>-</td><td>-</td></tr><tr><td><strong>height</strong></td><td>The height attribute defines the vertical length of an icon.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size of the icon. Available sizes: &#39;sm&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;xxl&#39;, &#39;3xl...9xl&#39;, &#39;custom&#39;, &#39;custom-size&#39;.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title tag content.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>width</strong></td><td>The width attribute defines the horizontal length of an icon.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table>', 9);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CIcon = resolveComponent("CIcon");
+  const _component_CIconSvg = resolveComponent("CIconSvg");
   const _component_CNavLink = resolveComponent("CNavLink");
   const _component_CNavItem = resolveComponent("CNavItem");
   const _component_CNav = resolveComponent("CNav");
@@ -4766,7 +4802,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CTabContent = resolveComponent("CTabContent");
   return openBlock(), createElementBlock("div", null, [
     _hoisted_1,
-    createBaseVNode("div", _hoisted_9, [
+    createBaseVNode("div", _hoisted_11, [
       createVNode(_component_CIcon, {
         icon: $setup.icon.cilList,
         size: "xl"
@@ -4776,7 +4812,92 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         size: "xl"
       }, null, 8, ["icon"])
     ]),
-    _hoisted_10,
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_26, [
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "xl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        class: "text-primary",
+        size: "xl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        class: "text-secondary",
+        size: "xl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        class: "text-success",
+        size: "xl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        class: "text-danger",
+        size: "xl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        class: "text-warning",
+        size: "xl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        class: "text-info",
+        size: "xl"
+      }, null, 8, ["icon"])
+    ]),
+    _hoisted_27,
+    createBaseVNode("div", _hoisted_30, [
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "xl",
+        style: { "--ci-primary-color": "red" }
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "xl",
+        style: { "--ci-primary-color": "green" }
+      }, null, 8, ["icon"])
+    ]),
+    _hoisted_31,
+    createBaseVNode("div", _hoisted_34, [
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "sm"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "lg"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "xl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "xxl"
+      }, null, 8, ["icon"]),
+      createVNode(_component_CIcon, {
+        icon: $setup.icon.cilList,
+        size: "3xl"
+      }, null, 8, ["icon"])
+    ]),
+    _hoisted_35,
+    createBaseVNode("div", _hoisted_38, [
+      createVNode(_component_CIconSvg, { size: "4xl" }, {
+        default: withCtx(() => [
+          _hoisted_39
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_40,
     createVNode(_component_CNav, {
       variant: "tabs",
       role: "tablist"
@@ -4857,13 +4978,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 (openBlock(true), createElementBlock(Fragment, null, renderList($setup.linearIcons, (i) => {
                   return openBlock(), createBlock(_component_CCol, { class: "mb-4" }, {
                     default: withCtx(() => [
-                      createBaseVNode("div", _hoisted_21, [
+                      createBaseVNode("div", _hoisted_43, [
                         createVNode(_component_CIcon, {
                           icon: $setup.icon[i],
                           size: "xxl"
                         }, null, 8, ["icon"])
                       ]),
-                      createBaseVNode("div", _hoisted_22, toDisplayString(i), 1)
+                      createBaseVNode("div", _hoisted_44, toDisplayString(i), 1)
                     ]),
                     _: 2
                   }, 1024);
@@ -4890,13 +5011,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 (openBlock(true), createElementBlock(Fragment, null, renderList($setup.brandIcons, (i) => {
                   return openBlock(), createBlock(_component_CCol, { class: "mb-4" }, {
                     default: withCtx(() => [
-                      createBaseVNode("div", _hoisted_23, [
+                      createBaseVNode("div", _hoisted_45, [
                         createVNode(_component_CIcon, {
                           icon: $setup.icon[i],
                           size: "xxl"
                         }, null, 8, ["icon"])
                       ]),
-                      createBaseVNode("div", _hoisted_24, toDisplayString(i), 1)
+                      createBaseVNode("div", _hoisted_46, toDisplayString(i), 1)
                     ]),
                     _: 2
                   }, 1024);
@@ -4923,13 +5044,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 (openBlock(true), createElementBlock(Fragment, null, renderList($setup.flagIcons, (i) => {
                   return openBlock(), createBlock(_component_CCol, { class: "mb-4" }, {
                     default: withCtx(() => [
-                      createBaseVNode("div", _hoisted_25, [
+                      createBaseVNode("div", _hoisted_47, [
                         createVNode(_component_CIcon, {
                           icon: $setup.icon[i],
                           size: "xxl"
                         }, null, 8, ["icon"])
                       ]),
-                      createBaseVNode("div", _hoisted_26, toDisplayString(i), 1)
+                      createBaseVNode("div", _hoisted_48, toDisplayString(i), 1)
                     ]),
                     _: 2
                   }, 1024);
@@ -4943,11 +5064,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 1
     }),
-    _hoisted_27
+    _hoisted_49
   ]);
 }
 const icon_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "icon.html.vue"]]);
-const data = JSON.parse('{"path":"/components/icon.html","title":"Vue Icon Component","lang":"en-US","frontmatter":{"title":"Vue Icon Component","name":"Icon","description":"Official Vue.js component for CoreUI Icons and CoreUI Icons PRO.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/icon.html"}]]},"headers":[{"level":2,"title":"Installation","slug":"installation","link":"#installation","children":[{"level":3,"title":"Npm","slug":"npm","link":"#npm","children":[]},{"level":3,"title":"Yarn","slug":"yarn","link":"#yarn","children":[]}]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[{"level":3,"title":"Single icon","slug":"single-icon","link":"#single-icon","children":[]},{"level":3,"title":"All icons","slug":"all-icons","link":"#all-icons","children":[]},{"level":3,"title":"Icons object","slug":"icons-object","link":"#icons-object","children":[]}]},{"level":2,"title":"Available icons","slug":"available-icons","link":"#available-icons","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CIcon","slug":"cicon","link":"#cicon","children":[]}]}],"filePathRelative":"components/icon.md"}');
+const data = JSON.parse('{"path":"/components/icon.html","title":"Vue Icon Component","lang":"en-US","frontmatter":{"title":"Vue Icon Component","name":"Icon","description":"Vue icons library is a great resource for Vue developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/icon.html"}]]},"headers":[{"level":2,"title":"Installation","slug":"installation","link":"#installation","children":[{"level":3,"title":"Npm","slug":"npm","link":"#npm","children":[]},{"level":3,"title":"Yarn","slug":"yarn","link":"#yarn","children":[]}]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[{"level":3,"title":"Single Vue.js icon","slug":"single-vue-js-icon","link":"#single-vue-js-icon","children":[]},{"level":3,"title":"All icons","slug":"all-icons","link":"#all-icons","children":[]},{"level":3,"title":"Icons object","slug":"icons-object","link":"#icons-object","children":[]},{"level":3,"title":"Color","slug":"color","link":"#color","children":[]},{"level":3,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":3,"title":"Custom SVG Icons","slug":"custom-svg-icons","link":"#custom-svg-icons","children":[]}]},{"level":2,"title":"Available icons","slug":"available-icons","link":"#available-icons","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CIcon","slug":"cicon","link":"#cicon","children":[]},{"level":3,"title":"CIconSvg","slug":"ciconsvg","link":"#ciconsvg","children":[]}]}],"filePathRelative":"components/icon.md"}');
 export {
   icon_html as comp,
   data
diff --git a/vue/docs/assets/image.html-CfWMHRrt.js b/vue/docs/assets/image.html-CfWMHRrt.js
deleted file mode 100644
index a52be5e3c39..00000000000
--- a/vue/docs/assets/image.html-CfWMHRrt.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "responsive-images",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Responsive images "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#responsive-images",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("Images in CoreUI for Vue.js are made responsive with "),
-  /* @__PURE__ */ createBaseVNode("code", null, "fluid"),
-  /* @__PURE__ */ createTextVNode(" property. This applies "),
-  /* @__PURE__ */ createBaseVNode("code", null, "max-width: 100%;"),
-  /* @__PURE__ */ createTextVNode(" and "),
-  /* @__PURE__ */ createBaseVNode("code", null, "height: auto;"),
-  /* @__PURE__ */ createTextVNode(" to the image so that it scales with the parent element.")
-], -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">fluid</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="image-thumbnails" tabindex="-1">Image thumbnails <a class="anchor-link" href="#image-thumbnails" aria-hidden="true">#</a></h2><p>In addition to our <a href="https://coreui.io/docs/4.0/utilities/borders" target="_blank" rel="noopener noreferrer">border-radius utilities</a>, you can use prop<code>thumbnail</code> to give an image a rounded 1px border appearance.</p>', 3);
-const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">rounded</span> <span class="token attr-name">thumbnail</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="aligning-images" tabindex="-1">Aligning images <a class="anchor-link" href="#aligning-images" aria-hidden="true">#</a></h2><p>Align images with the <code>align</code> property.</p>', 3);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = { class: "clearfix" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = { class: "clearfix" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = { class: "text-center" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cimage" tabindex="-1">CImage <a class="anchor-link" href="#cimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/image/CImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the horizontal aligment.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Make image responsive.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>rounded</strong></td><td>Make image rounded.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>thumbnail</strong></td><td>Give an image a rounded 1px border appearance.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 6);
-function _sfc_render(_ctx, _cache) {
-  const _component_CImage = resolveComponent("CImage");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    createBaseVNode("div", _hoisted_3, [
-      createVNode(_component_CImage, {
-        fluid: "",
-        src: _ctx.$withBase("/images/vue.jpg")
-      }, null, 8, ["src"])
-    ]),
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_7, [
-      createVNode(_component_CImage, {
-        rounded: "",
-        thumbnail: "",
-        src: _ctx.$withBase("/images/vue400.jpg"),
-        width: "200",
-        height: "200"
-      }, null, 8, ["src"])
-    ]),
-    _hoisted_8,
-    createBaseVNode("div", _hoisted_11, [
-      createBaseVNode("div", _hoisted_12, [
-        createVNode(_component_CImage, {
-          align: "start",
-          rounded: "",
-          src: _ctx.$withBase("/images/vue400.jpg"),
-          width: "200",
-          height: "200"
-        }, null, 8, ["src"]),
-        createVNode(_component_CImage, {
-          align: "end",
-          rounded: "",
-          src: _ctx.$withBase("/images/vue400.jpg"),
-          width: "200",
-          height: "200"
-        }, null, 8, ["src"])
-      ])
-    ]),
-    _hoisted_13,
-    createBaseVNode("div", _hoisted_14, [
-      createBaseVNode("div", _hoisted_15, [
-        createVNode(_component_CImage, {
-          align: "center",
-          rounded: "",
-          src: _ctx.$withBase("/images/vue400.jpg"),
-          width: "200",
-          height: "200"
-        }, null, 8, ["src"])
-      ])
-    ]),
-    _hoisted_16,
-    createBaseVNode("div", _hoisted_17, [
-      createBaseVNode("div", _hoisted_18, [
-        createVNode(_component_CImage, {
-          rounded: "",
-          src: _ctx.$withBase("/images/vue400.jpg"),
-          width: "200",
-          height: "200"
-        }, null, 8, ["src"])
-      ])
-    ]),
-    _hoisted_19
-  ]);
-}
-const image_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "image.html.vue"]]);
-const data = JSON.parse(`{"path":"/components/image.html","title":"Vue Image Component","lang":"en-US","frontmatter":{"title":"Vue Image Component","name":"Image","description":"Vue image component with responsive behavior (so it's never become larger than their parent element) and special styles.","other_frameworks":"image","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/image.html"}]]},"headers":[{"level":2,"title":"Responsive images","slug":"responsive-images","link":"#responsive-images","children":[]},{"level":2,"title":"Image thumbnails","slug":"image-thumbnails","link":"#image-thumbnails","children":[]},{"level":2,"title":"Aligning images","slug":"aligning-images","link":"#aligning-images","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CImage","slug":"cimage","link":"#cimage","children":[]}]}],"filePathRelative":"components/image.md"}`);
-export {
-  image_html as comp,
-  data
-};
diff --git a/vue/docs/assets/image.html-DC5HLYH1.js b/vue/docs/assets/image.html-DC5HLYH1.js
new file mode 100644
index 00000000000..de931277e5d
--- /dev/null
+++ b/vue/docs/assets/image.html-DC5HLYH1.js
@@ -0,0 +1,107 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "responsive-images",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Responsive images "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#responsive-images",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("Images in CoreUI for Vue.js are made responsive with "),
+  /* @__PURE__ */ createBaseVNode("code", null, "fluid"),
+  /* @__PURE__ */ createTextVNode(" property. This applies "),
+  /* @__PURE__ */ createBaseVNode("code", null, "max-width: 100%;"),
+  /* @__PURE__ */ createTextVNode(" and "),
+  /* @__PURE__ */ createBaseVNode("code", null, "height: auto;"),
+  /* @__PURE__ */ createTextVNode(" to the image so that it scales with the parent element.")
+], -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">fluid</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="image-thumbnails" tabindex="-1">Image thumbnails <a class="anchor-link" href="#image-thumbnails" aria-hidden="true">#</a></h2><p>In addition to our <a href="https://coreui.io/docs/4.0/utilities/borders" target="_blank" rel="noopener noreferrer">border-radius utilities</a>, you can use prop<code>thumbnail</code> to give an image a rounded 1px border appearance.</p>', 3);
+const _hoisted_7 = { class: "docs-example rounded-top p-4" };
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">rounded</span> <span class="token attr-name">thumbnail</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="aligning-images" tabindex="-1">Aligning images <a class="anchor-link" href="#aligning-images" aria-hidden="true">#</a></h2><p>Align images with the <code>align</code> property.</p>', 3);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = { class: "clearfix" };
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = { class: "clearfix" };
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_17 = { class: "docs-example rounded-top p-4" };
+const _hoisted_18 = { class: "text-center" };
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CImage</span> <span class="token attr-name">rounded</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/vue400.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cimage" tabindex="-1">CImage <a class="anchor-link" href="#cimage" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CImage <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/image/CImage&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the horizontal aligment.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>fluid</strong></td><td>Make image responsive.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>rounded</strong></td><td>Make image rounded.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>thumbnail</strong></td><td>Give an image a rounded 1px border appearance.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 6);
+function _sfc_render(_ctx, _cache) {
+  const _component_CImage = resolveComponent("CImage");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CImage, {
+        fluid: "",
+        src: _ctx.$withBase("/images/vue.jpg")
+      }, null, 8, ["src"])
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_7, [
+      createVNode(_component_CImage, {
+        rounded: "",
+        thumbnail: "",
+        src: _ctx.$withBase("/images/vue400.jpg"),
+        width: "200",
+        height: "200"
+      }, null, 8, ["src"])
+    ]),
+    _hoisted_8,
+    createBaseVNode("div", _hoisted_11, [
+      createBaseVNode("div", _hoisted_12, [
+        createVNode(_component_CImage, {
+          align: "start",
+          rounded: "",
+          src: _ctx.$withBase("/images/vue400.jpg"),
+          width: "200",
+          height: "200"
+        }, null, 8, ["src"]),
+        createVNode(_component_CImage, {
+          align: "end",
+          rounded: "",
+          src: _ctx.$withBase("/images/vue400.jpg"),
+          width: "200",
+          height: "200"
+        }, null, 8, ["src"])
+      ])
+    ]),
+    _hoisted_13,
+    createBaseVNode("div", _hoisted_14, [
+      createBaseVNode("div", _hoisted_15, [
+        createVNode(_component_CImage, {
+          align: "center",
+          rounded: "",
+          src: _ctx.$withBase("/images/vue400.jpg"),
+          width: "200",
+          height: "200"
+        }, null, 8, ["src"])
+      ])
+    ]),
+    _hoisted_16,
+    createBaseVNode("div", _hoisted_17, [
+      createBaseVNode("div", _hoisted_18, [
+        createVNode(_component_CImage, {
+          rounded: "",
+          src: _ctx.$withBase("/images/vue400.jpg"),
+          width: "200",
+          height: "200"
+        }, null, 8, ["src"])
+      ])
+    ]),
+    _hoisted_19
+  ]);
+}
+const image_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "image.html.vue"]]);
+const data = JSON.parse(`{"path":"/components/image.html","title":"Vue Image Component","lang":"en-US","frontmatter":{"title":"Vue Image Component","name":"Image","description":"Vue image component with responsive behavior (so it's never become larger than their parent element) and special styles.","other_frameworks":"image","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/image.html"}]]},"headers":[{"level":2,"title":"Responsive images","slug":"responsive-images","link":"#responsive-images","children":[]},{"level":2,"title":"Image thumbnails","slug":"image-thumbnails","link":"#image-thumbnails","children":[]},{"level":2,"title":"Aligning images","slug":"aligning-images","link":"#aligning-images","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CImage","slug":"cimage","link":"#cimage","children":[]}]}],"filePathRelative":"components/image.md"}`);
+export {
+  image_html as comp,
+  data
+};
diff --git a/vue/docs/assets/index.html-DnyqOhD0.js b/vue/docs/assets/index.html-DnyqOhD0.js
deleted file mode 100644
index e4a2e209848..00000000000
--- a/vue/docs/assets/index.html-DnyqOhD0.js
+++ /dev/null
@@ -1,317 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "components",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Components: "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#components",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "directives",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Directives: "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#directives",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-function _sfc_render(_ctx, _cache) {
-  const _component_RouteLink = resolveComponent("RouteLink");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/accordion.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CAccordion ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/alert.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CAlert ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/avatar.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CAvatar ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/backdrop.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CBackdrop ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/badge.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CBadge ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/breadcrumb.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CBreadcrumb ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/button.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CButton ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/button-group.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CButtonGroup ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/callout.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CCallout ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/card.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CCard ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/collapse.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CCollapse ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/dropdown.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CDropdown ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/dropdown.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CDropdown ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/footer.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CFooter ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/form.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CForm ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/grid.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CGrid ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/header.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CHeader ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/link.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CLink ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/list-group.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CListGroup ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/loading-button.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CLoadingButton ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/modal.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CModal ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/multi-select.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CMultiSelect ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/nav.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CNav ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/navbar.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CNavBar ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/offcanvas.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" COffcanvas ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/pagination.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CPagination ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/popover.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CPopover ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/progress.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CProgress ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/sidebar.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CSidebar ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/spinner.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CSpinner ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/table.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CTable ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/tabs.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CTabs ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/components/toast.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CToast ")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_2,
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/directives/tooltip.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CTooltip ")
-        ]),
-        _: 1
-      })
-    ]),
-    createBaseVNode("p", null, [
-      createVNode(_component_RouteLink, { to: "/4.0/directives/popover.html" }, {
-        default: withCtx(() => [
-          createTextVNode(" CPopover ")
-        ]),
-        _: 1
-      })
-    ])
-  ]);
-}
-const index_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "index.html.vue"]]);
-const data = JSON.parse('{"path":"/","title":"Title of this page","lang":"en-US","frontmatter":{"layout":"Redirect","lang":"en-US","title":"Title of this page","description":"Description of this page","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/"}]]},"headers":[{"level":3,"title":"Components:","slug":"components","link":"#components","children":[]},{"level":3,"title":"Directives:","slug":"directives","link":"#directives","children":[]}],"filePathRelative":"README.md"}');
-export {
-  index_html as comp,
-  data
-};
diff --git a/vue/docs/assets/input-group.html-BvH0ZUmc.js b/vue/docs/assets/input-group.html-BD4KH7gA.js
similarity index 54%
rename from vue/docs/assets/input-group.html-BvH0ZUmc.js
rename to vue/docs/assets/input-group.html-BD4KH7gA.js
index 0594d72d018..4072e6c4df2 100644
--- a/vue/docs/assets/input-group.html-BvH0ZUmc.js
+++ b/vue/docs/assets/input-group.html-BD4KH7gA.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "basic-example",
@@ -17,23 +17,23 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("s outside the input group.")
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@example.com<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-url<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Your vanity URL<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>https://example.com/users/<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-url<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Amount (to the nearest dollar)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Server<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Server<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>With textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>With textarea<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="wrapping" tabindex="-1">Wrapping <a class="anchor-link" href="#wrapping" aria-hidden="true">#</a></h2><p>Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate custom form field validation within an input group. You may disable this with <code>.flex-nowrap</code>.</p>', 3);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@example.com<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-url<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Your vanity URL<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>https://example.com/users/<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-url<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Amount (to the nearest dollar)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Server<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Server<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>With textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>With textarea<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="wrapping" tabindex="-1">Wrapping <a class="anchor-link" href="#wrapping" aria-hidden="true">#</a></h2><p>Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate custom form field validation within an input group. You may disable this with <code>.flex-nowrap</code>.</p>', 3);
 const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-nowrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addon-wrapping<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addon-wrapping<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p><p><strong>Sizing on the individual input group elements isn&#39;t supported.</strong></p>', 4);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-nowrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addon-wrapping<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addon-wrapping<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p><p><strong>Sizing on the individual input group elements isn&#39;t supported.</strong></p>', 4);
 const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sizing example input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-default<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sizing example input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-default<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sizing example input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="checkboxes-and-radios" tabindex="-1">Checkboxes and radios <a class="anchor-link" href="#checkboxes-and-radios" aria-hidden="true">#</a></h2><p>Place any checkbox or radio option within an input group&#39;s addon instead of text.</p>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sizing example input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-default<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sizing example input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-default<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sizing example input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroup-sizing-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="checkboxes-and-radios" tabindex="-1">Checkboxes and radios <a class="anchor-link" href="#checkboxes-and-radios" aria-hidden="true">#</a></h2><p>Place any checkbox or radio option within an input group&#39;s addon instead of text.</p>', 3);
 const _hoisted_16 = { class: "docs-example rounded-top p-4" };
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox for following text input<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio button for following text input<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with radio button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-inputs" tabindex="-1">Multiple inputs <a class="anchor-link" href="#multiple-inputs" aria-hidden="true">#</a></h2><p>While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation styles are only available for input groups with a single <code>&lt;CFormInput&gt;</code>.</p>', 3);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checkbox for following text input<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio button for following text input<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with radio button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-inputs" tabindex="-1">Multiple inputs <a class="anchor-link" href="#multiple-inputs" aria-hidden="true">#</a></h2><p>While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation styles are only available for input groups with a single <code>&lt;CFormInput&gt;</code>.</p>', 3);
 const _hoisted_20 = { class: "docs-example rounded-top p-4" };
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>First and last name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-addons" tabindex="-1">Multiple addons <a class="anchor-link" href="#multiple-addons" aria-hidden="true">#</a></h2><p>Multiple add-ons are supported and can be mixed with checkbox and radio input versions.</p>', 3);
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>First and last name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-addons" tabindex="-1">Multiple addons <a class="anchor-link" href="#multiple-addons" aria-hidden="true">#</a></h2><p>Multiple add-ons are supported and can be mixed with checkbox and radio input versions.</p>', 3);
 const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dollar amount (with dot and two decimal places)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dollar amount (with dot and two decimal places)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-addons" tabindex="-1">Button addons <a class="anchor-link" href="#button-addons" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dollar amount (with dot and two decimal places)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dollar amount (with dot and two decimal places)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-addons" tabindex="-1">Button addons <a class="anchor-link" href="#button-addons" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example text with button addon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example text with two button addons<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username with two button addons<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="buttons-with-dropdowns" tabindex="-1">Buttons with dropdowns <a class="anchor-link" href="#buttons-with-dropdowns" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example text with button addon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-addon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example text with two button addons<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Recipient&#39;s username with two button addons<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="buttons-with-dropdowns" tabindex="-1">Buttons with dropdowns <a class="anchor-link" href="#buttons-with-dropdowns" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
-const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with 2 dropdown buttons<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="segmented-buttons" tabindex="-1">Segmented buttons <a class="anchor-link" href="#segmented-buttons" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with 2 dropdown buttons<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="segmented-buttons" tabindex="-1">Segmented buttons <a class="anchor-link" href="#segmented-buttons" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_33 = { class: "docs-example rounded-top p-4" };
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with segmented dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with segmented dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-forms" tabindex="-1">Custom forms <a class="anchor-link" href="#custom-forms" aria-hidden="true">#</a></h2><p>Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.</p><h3 id="custom-select" tabindex="-1">Custom select <a class="anchor-link" href="#custom-select" aria-hidden="true">#</a></h3>', 4);
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with segmented dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Text input with segmented dropdown button<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">split</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Separated link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-forms" tabindex="-1">Custom forms <a class="anchor-link" href="#custom-forms" aria-hidden="true">#</a></h2><p>Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.</p><h3 id="custom-select" tabindex="-1">Custom select <a class="anchor-link" href="#custom-select" aria-hidden="true">#</a></h3>', 4);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
 const _hoisted_39 = /* @__PURE__ */ createBaseVNode("option", null, "Choose...", -1);
 const _hoisted_40 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
@@ -51,10 +51,10 @@ const _hoisted_51 = /* @__PURE__ */ createBaseVNode("option", null, "Choose...",
 const _hoisted_52 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_53 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_54 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Options<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Options<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example select with button addon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example select with button addon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-file-input" tabindex="-1">Custom file input <a class="anchor-link" href="#custom-file-input" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Options<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Options<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example select with button addon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupSelect04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example select with button addon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-file-input" tabindex="-1">Custom file input <a class="anchor-link" href="#custom-file-input" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_57 = { class: "docs-example rounded-top p-4" };
-const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Upload<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile01<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile02<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Upload<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon03<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Upload<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Upload<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon04<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_61 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cinputgroup" tabindex="-1">CInputGroup <a class="anchor-link" href="#cinputgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CInputGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CInputGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CInputGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table>', 5);
+const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Upload<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile01<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile02<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Upload<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon03<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Upload<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFile04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Upload<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupFileAddon04<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_61 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cinputgroup" tabindex="-1">CInputGroup <a class="anchor-link" href="#cinputgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CInputGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CInputGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CInputGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table>', 5);
 function _sfc_render(_ctx, _cache) {
   const _component_CInputGroupText = resolveComponent("CInputGroupText");
   const _component_CFormInput = resolveComponent("CFormInput");
diff --git a/vue/docs/assets/input.html-B-GhU974.js b/vue/docs/assets/input.html-B-GhU974.js
deleted file mode 100644
index 4ea58aa226f..00000000000
--- a/vue/docs/assets/input.html-B-GhU974.js
+++ /dev/null
@@ -1,309 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "example",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Example "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = { class: "docs-example rounded-top p-4" };
-const _hoisted_3 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email address<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Must be 8-20 characters long.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you need to add custom classs to form&#39;s components, or need to add some custom elements you can add each form component separately. Please check the example below.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Must be 8-20 characters long.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also use slots.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#label</span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#text</span><span class="token punctuation">&gt;</span></span>Must be 8-20 characters long.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormInput</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 7);
-const _hoisted_10 = { class: "docs-example rounded-top p-4" };
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_16 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled readonly input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>', 3);
-const _hoisted_20 = { class: "docs-example rounded-top p-4" };
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly input here...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>readonly input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="readonly-plain-text" tabindex="-1">Readonly plain text <a class="anchor-link" href="#readonly-plain-text" aria-hidden="true">#</a></h2><p>If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled as plain text, use the <code>plain-text</code> boolean property to remove the default form field styling and preserve the correct margin and padding.</p>', 3);
-const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = { class: "col-sm-10" };
-const _hoisted_26 = { class: "col-sm-10" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = { class: "col-auto" };
-const _hoisted_30 = { class: "col-auto" };
-const _hoisted_31 = { class: "col-auto" };
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Confirm identity<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="file-input" tabindex="-1">File input <a class="anchor-link" href="#file-input" aria-hidden="true">#</a></h2>', 2);
-const _hoisted_34 = { class: "docs-example rounded-top p-4" };
-const _hoisted_35 = { class: "mb-3" };
-const _hoisted_36 = { class: "mb-3" };
-const _hoisted_37 = { class: "mb-3" };
-const _hoisted_38 = { class: "mb-3" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFile<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default file input example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileMultiple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Multiple files input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled file input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileSm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small file input example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileLg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large file input example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="color" tabindex="-1">Color <a class="anchor-link" href="#color" aria-hidden="true">#</a></h2>', 2);
-const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleColorInput<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Color picker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Choose your color<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#563d7c<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3><p><code>$input-*</code> are shared across most of our form controls (and not buttons).</p>', 4);
-const _hoisted_46 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createBaseVNode("code", null, "$form-label-*"),
-  /* @__PURE__ */ createTextVNode(" and "),
-  /* @__PURE__ */ createBaseVNode("code", null, "$form-text-*"),
-  /* @__PURE__ */ createTextVNode(" are for our "),
-  /* @__PURE__ */ createBaseVNode("code", null, "<CFormLabel />"),
-  /* @__PURE__ */ createTextVNode("s and "),
-  /* @__PURE__ */ createBaseVNode("code", null, "<CFormText />"),
-  /* @__PURE__ */ createTextVNode(" component.")
-], -1);
-const _hoisted_47 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createBaseVNode("code", null, "$form-file-*"),
-  /* @__PURE__ */ createTextVNode(" are for file input.")
-], -1);
-const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormInput <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormInput&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>File|number|string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;color&#39; | &#39;file&#39; | &#39;text&#39; | string</code></td><td>&#39;text&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table><h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFeedback <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFeedback <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFeedback&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>invalid</strong></td><td>Method called immediately after the <code>value</code> prop changes.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip</strong></td><td>If your form layout allows it, you can display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformlabel" tabindex="-1">CFormLabel <a class="anchor-link" href="#cformlabel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormLabel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormLabel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>A string of all className you want to be applied to the component, and override standard className value.</td><td>array|string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 19);
-function _sfc_render(_ctx, _cache) {
-  const _component_CFormInput = resolveComponent("CFormInput");
-  const _component_CForm = resolveComponent("CForm");
-  const _component_CFormLabel = resolveComponent("CFormLabel");
-  const _component_CRow = resolveComponent("CRow");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_2, [
-      createVNode(_component_CForm, null, {
-        default: withCtx(() => [
-          createVNode(_component_CFormInput, {
-            type: "email",
-            id: "exampleFormControlInput1",
-            label: "Email address",
-            placeholder: "name@example.com",
-            text: "Must be 8-20 characters long.",
-            "aria-describedby": "exampleFormControlInputHelpInline"
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_3,
-    createBaseVNode("div", _hoisted_10, [
-      createVNode(_component_CFormInput, {
-        type: "text",
-        class: "mb-3",
-        size: "lg",
-        placeholder: "Large input",
-        "aria-label": "lg input example"
-      }),
-      createVNode(_component_CFormInput, {
-        type: "text",
-        class: "mb-3",
-        placeholder: "Default input",
-        "aria-label": "default input example"
-      }),
-      createVNode(_component_CFormInput, {
-        type: "text",
-        class: "mb-3",
-        size: "sm",
-        placeholder: "Small input",
-        "aria-label": "sm input example"
-      })
-    ]),
-    _hoisted_11,
-    createBaseVNode("div", _hoisted_14, [
-      createVNode(_component_CFormInput, {
-        type: "text",
-        placeholder: "Disabled input",
-        "aria-label": "Disabled input example",
-        disabled: ""
-      }),
-      _hoisted_15,
-      createVNode(_component_CFormInput, {
-        type: "text",
-        placeholder: "Disabled readonly input",
-        "aria-label": "Disabled input example",
-        disabled: "",
-        readonly: ""
-      }),
-      _hoisted_16
-    ]),
-    _hoisted_17,
-    createBaseVNode("div", _hoisted_20, [
-      createVNode(_component_CFormInput, {
-        type: "text",
-        placeholder: "Readonly input here...",
-        "aria-label": "readonly input example",
-        readonly: ""
-      })
-    ]),
-    _hoisted_21,
-    createBaseVNode("div", _hoisted_24, [
-      createVNode(_component_CRow, { class: "mb-3" }, {
-        default: withCtx(() => [
-          createVNode(_component_CFormLabel, {
-            for: "staticEmail",
-            class: "col-sm-2 col-form-label"
-          }, {
-            default: withCtx(() => [
-              createTextVNode("Email")
-            ]),
-            _: 1
-          }),
-          createBaseVNode("div", _hoisted_25, [
-            createVNode(_component_CFormInput, {
-              type: "text",
-              id: "staticEmail",
-              value: "email@example.com",
-              readonly: "",
-              "plain-text": ""
-            })
-          ])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CRow, { class: "mb-3" }, {
-        default: withCtx(() => [
-          createVNode(_component_CFormLabel, {
-            for: "inputPassword",
-            class: "col-sm-2 col-form-label"
-          }, {
-            default: withCtx(() => [
-              createTextVNode("Password")
-            ]),
-            _: 1
-          }),
-          createBaseVNode("div", _hoisted_26, [
-            createVNode(_component_CFormInput, {
-              type: "password",
-              id: "inputPassword"
-            })
-          ])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_27,
-    createBaseVNode("div", _hoisted_28, [
-      createVNode(_component_CForm, { class: "row g-3" }, {
-        default: withCtx(() => [
-          createBaseVNode("div", _hoisted_29, [
-            createVNode(_component_CFormLabel, {
-              for: "staticEmail2",
-              class: "visually-hidden"
-            }, {
-              default: withCtx(() => [
-                createTextVNode("Email")
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CFormInput, {
-              type: "text",
-              id: "staticEmail2",
-              value: "email@example.com",
-              readonly: "",
-              "plain-text": ""
-            })
-          ]),
-          createBaseVNode("div", _hoisted_30, [
-            createVNode(_component_CFormLabel, {
-              for: "inputPassword2",
-              class: "visually-hidden"
-            }, {
-              default: withCtx(() => [
-                createTextVNode("Password")
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CFormInput, {
-              type: "password",
-              id: "inputPassword2",
-              placeholder: "Password"
-            })
-          ]),
-          createBaseVNode("div", _hoisted_31, [
-            createVNode(_component_CButton, {
-              type: "submit",
-              color: "primary",
-              class: "mb-3"
-            }, {
-              default: withCtx(() => [
-                createTextVNode("Confirm identity")
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_32,
-    createBaseVNode("div", _hoisted_34, [
-      createBaseVNode("div", _hoisted_35, [
-        createVNode(_component_CFormInput, {
-          type: "file",
-          id: "formFile",
-          label: "Default file input example"
-        })
-      ]),
-      createBaseVNode("div", _hoisted_36, [
-        createVNode(_component_CFormInput, {
-          type: "file",
-          id: "formFileMultiple",
-          label: "Multiple files input example",
-          multiple: ""
-        })
-      ]),
-      createBaseVNode("div", _hoisted_37, [
-        createVNode(_component_CFormInput, {
-          type: "file",
-          id: "formFileDisabled",
-          label: "Disabled file input example",
-          disabled: ""
-        })
-      ]),
-      createBaseVNode("div", _hoisted_38, [
-        createVNode(_component_CFormInput, {
-          type: "file",
-          size: "sm",
-          id: "formFileSm",
-          label: "Small file input example"
-        })
-      ]),
-      createBaseVNode("div", null, [
-        createVNode(_component_CFormInput, {
-          type: "file",
-          size: "lg",
-          id: "formFileLg",
-          label: "Large file input example"
-        })
-      ])
-    ]),
-    _hoisted_39,
-    createBaseVNode("div", _hoisted_41, [
-      createVNode(_component_CFormInput, {
-        type: "color",
-        id: "exampleColorInput",
-        label: "Color picker",
-        title: "Choose your color",
-        value: "#563d7c"
-      })
-    ]),
-    _hoisted_42,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-input-variables"
-    }),
-    _hoisted_46,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-label-variables"
-    }),
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-text-variables"
-    }),
-    _hoisted_47,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-file-variables"
-    }),
-    _hoisted_48
-  ]);
-}
-const input_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "input.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/input.html","title":"Vue Form Input","lang":"en-US","frontmatter":{"title":"Vue Form Input","name":"Form input","description":"Vue input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.","other_frameworks":"input","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/input.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Readonly","slug":"readonly","link":"#readonly","children":[]},{"level":2,"title":"Readonly plain text","slug":"readonly-plain-text","link":"#readonly-plain-text","children":[]},{"level":2,"title":"File input","slug":"file-input","link":"#file-input","children":[]},{"level":2,"title":"Color","slug":"color","link":"#color","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CFormInput","slug":"cforminput","link":"#cforminput","children":[]},{"level":3,"title":"CFormFeedback","slug":"cformfeedback","link":"#cformfeedback","children":[]},{"level":3,"title":"CFormLabel","slug":"cformlabel","link":"#cformlabel","children":[]},{"level":3,"title":"CFormText","slug":"cformtext","link":"#cformtext","children":[]}]}],"filePathRelative":"forms/input.md"}');
-export {
-  input_html as comp,
-  data
-};
diff --git a/vue/docs/assets/input.html-BPr4o7jo.js b/vue/docs/assets/input.html-BPr4o7jo.js
new file mode 100644
index 00000000000..09d2bc4a450
--- /dev/null
+++ b/vue/docs/assets/input.html-BPr4o7jo.js
@@ -0,0 +1,309 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "example",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Example "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#example",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = { class: "docs-example rounded-top p-4" };
+const _hoisted_3 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email address<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Must be 8-20 characters long.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you need to add custom classs to form&#39;s components, or need to add some custom elements you can add each form component separately. Please check the example below.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Must be 8-20 characters long.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also use slots.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInput1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@example.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlInputHelpInline<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#label</span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#text</span><span class="token punctuation">&gt;</span></span>Must be 8-20 characters long.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormInput</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 7);
+const _hoisted_10 = { class: "docs-example rounded-top p-4" };
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm input example<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
+const _hoisted_16 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled readonly input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>', 3);
+const _hoisted_20 = { class: "docs-example rounded-top p-4" };
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly input here...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>readonly input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="readonly-plain-text" tabindex="-1">Readonly plain text <a class="anchor-link" href="#readonly-plain-text" aria-hidden="true">#</a></h2><p>If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled as plain text, use the <code>plain-text</code> boolean property to remove the default form field styling and preserve the correct margin and padding.</p>', 3);
+const _hoisted_24 = { class: "docs-example rounded-top p-4" };
+const _hoisted_25 = { class: "col-sm-10" };
+const _hoisted_26 = { class: "col-sm-10" };
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_28 = { class: "docs-example rounded-top p-4" };
+const _hoisted_29 = { class: "col-auto" };
+const _hoisted_30 = { class: "col-auto" };
+const _hoisted_31 = { class: "col-auto" };
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>staticEmail2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email@example.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">plain-text</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Password<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Confirm identity<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="file-input" tabindex="-1">File input <a class="anchor-link" href="#file-input" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_34 = { class: "docs-example rounded-top p-4" };
+const _hoisted_35 = { class: "mb-3" };
+const _hoisted_36 = { class: "mb-3" };
+const _hoisted_37 = { class: "mb-3" };
+const _hoisted_38 = { class: "mb-3" };
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFile<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default file input example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileMultiple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Multiple files input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled file input example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileSm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small file input example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formFileLg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large file input example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="color" tabindex="-1">Color <a class="anchor-link" href="#color" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_41 = { class: "docs-example rounded-top p-4" };
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleColorInput<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Color picker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Choose your color<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#563d7c<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3><p><code>$input-*</code> are shared across most of our form controls (and not buttons).</p>', 4);
+const _hoisted_46 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createBaseVNode("code", null, "$form-label-*"),
+  /* @__PURE__ */ createTextVNode(" and "),
+  /* @__PURE__ */ createBaseVNode("code", null, "$form-text-*"),
+  /* @__PURE__ */ createTextVNode(" are for our "),
+  /* @__PURE__ */ createBaseVNode("code", null, "<CFormLabel />"),
+  /* @__PURE__ */ createTextVNode("s and "),
+  /* @__PURE__ */ createBaseVNode("code", null, "<CFormText />"),
+  /* @__PURE__ */ createTextVNode(" component.")
+], -1);
+const _hoisted_47 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createBaseVNode("code", null, "$form-file-*"),
+  /* @__PURE__ */ createTextVNode(" are for file input.")
+], -1);
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormInput <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormInput&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>File|number|string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;color&#39; | &#39;file&#39; | &#39;text&#39; | string</code></td><td>&#39;text&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table><h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFeedback <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFeedback <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFeedback&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>invalid</strong></td><td>Method called immediately after the <code>value</code> prop changes.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip</strong></td><td>If your form layout allows it, you can display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformlabel" tabindex="-1">CFormLabel <a class="anchor-link" href="#cformlabel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormLabel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormLabel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>A string of all className you want to be applied to the component, and override standard className value.</td><td>array|string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 19);
+function _sfc_render(_ctx, _cache) {
+  const _component_CFormInput = resolveComponent("CFormInput");
+  const _component_CForm = resolveComponent("CForm");
+  const _component_CFormLabel = resolveComponent("CFormLabel");
+  const _component_CRow = resolveComponent("CRow");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_2, [
+      createVNode(_component_CForm, null, {
+        default: withCtx(() => [
+          createVNode(_component_CFormInput, {
+            type: "email",
+            id: "exampleFormControlInput1",
+            label: "Email address",
+            placeholder: "name@example.com",
+            text: "Must be 8-20 characters long.",
+            "aria-describedby": "exampleFormControlInputHelpInline"
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_3,
+    createBaseVNode("div", _hoisted_10, [
+      createVNode(_component_CFormInput, {
+        type: "text",
+        class: "mb-3",
+        size: "lg",
+        placeholder: "Large input",
+        "aria-label": "lg input example"
+      }),
+      createVNode(_component_CFormInput, {
+        type: "text",
+        class: "mb-3",
+        placeholder: "Default input",
+        "aria-label": "default input example"
+      }),
+      createVNode(_component_CFormInput, {
+        type: "text",
+        class: "mb-3",
+        size: "sm",
+        placeholder: "Small input",
+        "aria-label": "sm input example"
+      })
+    ]),
+    _hoisted_11,
+    createBaseVNode("div", _hoisted_14, [
+      createVNode(_component_CFormInput, {
+        type: "text",
+        placeholder: "Disabled input",
+        "aria-label": "Disabled input example",
+        disabled: ""
+      }),
+      _hoisted_15,
+      createVNode(_component_CFormInput, {
+        type: "text",
+        placeholder: "Disabled readonly input",
+        "aria-label": "Disabled input example",
+        disabled: "",
+        readonly: ""
+      }),
+      _hoisted_16
+    ]),
+    _hoisted_17,
+    createBaseVNode("div", _hoisted_20, [
+      createVNode(_component_CFormInput, {
+        type: "text",
+        placeholder: "Readonly input here...",
+        "aria-label": "readonly input example",
+        readonly: ""
+      })
+    ]),
+    _hoisted_21,
+    createBaseVNode("div", _hoisted_24, [
+      createVNode(_component_CRow, { class: "mb-3" }, {
+        default: withCtx(() => [
+          createVNode(_component_CFormLabel, {
+            for: "staticEmail",
+            class: "col-sm-2 col-form-label"
+          }, {
+            default: withCtx(() => [
+              createTextVNode("Email")
+            ]),
+            _: 1
+          }),
+          createBaseVNode("div", _hoisted_25, [
+            createVNode(_component_CFormInput, {
+              type: "text",
+              id: "staticEmail",
+              value: "email@example.com",
+              readonly: "",
+              "plain-text": ""
+            })
+          ])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CRow, { class: "mb-3" }, {
+        default: withCtx(() => [
+          createVNode(_component_CFormLabel, {
+            for: "inputPassword",
+            class: "col-sm-2 col-form-label"
+          }, {
+            default: withCtx(() => [
+              createTextVNode("Password")
+            ]),
+            _: 1
+          }),
+          createBaseVNode("div", _hoisted_26, [
+            createVNode(_component_CFormInput, {
+              type: "password",
+              id: "inputPassword"
+            })
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_27,
+    createBaseVNode("div", _hoisted_28, [
+      createVNode(_component_CForm, { class: "row g-3" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_29, [
+            createVNode(_component_CFormLabel, {
+              for: "staticEmail2",
+              class: "visually-hidden"
+            }, {
+              default: withCtx(() => [
+                createTextVNode("Email")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CFormInput, {
+              type: "text",
+              id: "staticEmail2",
+              value: "email@example.com",
+              readonly: "",
+              "plain-text": ""
+            })
+          ]),
+          createBaseVNode("div", _hoisted_30, [
+            createVNode(_component_CFormLabel, {
+              for: "inputPassword2",
+              class: "visually-hidden"
+            }, {
+              default: withCtx(() => [
+                createTextVNode("Password")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CFormInput, {
+              type: "password",
+              id: "inputPassword2",
+              placeholder: "Password"
+            })
+          ]),
+          createBaseVNode("div", _hoisted_31, [
+            createVNode(_component_CButton, {
+              type: "submit",
+              color: "primary",
+              class: "mb-3"
+            }, {
+              default: withCtx(() => [
+                createTextVNode("Confirm identity")
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_34, [
+      createBaseVNode("div", _hoisted_35, [
+        createVNode(_component_CFormInput, {
+          type: "file",
+          id: "formFile",
+          label: "Default file input example"
+        })
+      ]),
+      createBaseVNode("div", _hoisted_36, [
+        createVNode(_component_CFormInput, {
+          type: "file",
+          id: "formFileMultiple",
+          label: "Multiple files input example",
+          multiple: ""
+        })
+      ]),
+      createBaseVNode("div", _hoisted_37, [
+        createVNode(_component_CFormInput, {
+          type: "file",
+          id: "formFileDisabled",
+          label: "Disabled file input example",
+          disabled: ""
+        })
+      ]),
+      createBaseVNode("div", _hoisted_38, [
+        createVNode(_component_CFormInput, {
+          type: "file",
+          size: "sm",
+          id: "formFileSm",
+          label: "Small file input example"
+        })
+      ]),
+      createBaseVNode("div", null, [
+        createVNode(_component_CFormInput, {
+          type: "file",
+          size: "lg",
+          id: "formFileLg",
+          label: "Large file input example"
+        })
+      ])
+    ]),
+    _hoisted_39,
+    createBaseVNode("div", _hoisted_41, [
+      createVNode(_component_CFormInput, {
+        type: "color",
+        id: "exampleColorInput",
+        label: "Color picker",
+        title: "Choose your color",
+        value: "#563d7c"
+      })
+    ]),
+    _hoisted_42,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-input-variables"
+    }),
+    _hoisted_46,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-label-variables"
+    }),
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-text-variables"
+    }),
+    _hoisted_47,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-file-variables"
+    }),
+    _hoisted_48
+  ]);
+}
+const input_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "input.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/input.html","title":"Vue Form Input","lang":"en-US","frontmatter":{"title":"Vue Form Input","name":"Form input","description":"Vue input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.","other_frameworks":"input","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/input.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Readonly","slug":"readonly","link":"#readonly","children":[]},{"level":2,"title":"Readonly plain text","slug":"readonly-plain-text","link":"#readonly-plain-text","children":[]},{"level":2,"title":"File input","slug":"file-input","link":"#file-input","children":[]},{"level":2,"title":"Color","slug":"color","link":"#color","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CFormInput","slug":"cforminput","link":"#cforminput","children":[]},{"level":3,"title":"CFormFeedback","slug":"cformfeedback","link":"#cformfeedback","children":[]},{"level":3,"title":"CFormLabel","slug":"cformlabel","link":"#cformlabel","children":[]},{"level":3,"title":"CFormText","slug":"cformtext","link":"#cformtext","children":[]}]}],"filePathRelative":"forms/input.md"}');
+export {
+  input_html as comp,
+  data
+};
diff --git a/vue/docs/assets/installation.html-9rN1EdIK.js b/vue/docs/assets/installation.html-B9oaQNAO.js
similarity index 99%
rename from vue/docs/assets/installation.html-9rN1EdIK.js
rename to vue/docs/assets/installation.html-B9oaQNAO.js
index f26470ff71f..5b4f6bcbbd8 100644
--- a/vue/docs/assets/installation.html-9rN1EdIK.js
+++ b/vue/docs/assets/installation.html-B9oaQNAO.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="tooling-setup" tabindex="-1">Tooling setup <a class="anchor-link" href="#tooling-setup" aria-hidden="true">#</a></h2><p>CoreUI Vue Admin Templates uses <a href="https://docs.npmjs.com/misc/scripts/" target="_blank" rel="noopener noreferrer">npm scripts</a> for its build system. Our <code>package.json</code> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p><p>To use our build system and run our admin template locally, you&#39;ll need a copy of source files and Node. Follow these steps and you should be ready to rock:</p><ol><li><a href="https://nodejs.org/en/download/" target="_blank" rel="noopener noreferrer">Download and install Node.js</a>, which we use to manage our dependencies.</li><li>If you prefer to use Yarn instead of NPM, you have to <a href="https://classic.yarnpkg.com/lang/en/docs/install/" target="_blank" rel="noopener noreferrer">download and install it</a></li><li><a href="https://coreui.io/product/free-vue-admin-template/" target="_blank" rel="noopener noreferrer">Download CoreUI Vue Admin Template</a> or <a href="https://coreui.io/download/" target="_blank" rel="noopener noreferrer">Download CoreUI PRO Vue Admin Template</a>.</li><li>Navigate to the root template directory and run <code>npm install</code> or <code>yarn install</code> to install our local dependencies listed in <code>package.json</code>.</li></ol><p>When completed, you&#39;ll be able to run the various commands provided from the command line.</p><h2 id="using-npm-scripts" tabindex="-1">Using npm scripts <a class="anchor-link" href="#using-npm-scripts" aria-hidden="true">#</a></h2><p>Our <code>package.json</code> includes numerous tasks for developing the project. Run <code>npm run</code> or <code>yarn run</code> to see all the npm scripts in your terminal. <strong>Primary tasks include:</strong></p><table class="table table-striped table-api"><thead><tr><th>Task</th><th>Description</th></tr></thead><tbody><tr><td><code>npm run serve</code> or <code>yarn serve</code></td><td>Compiles CSS and JavaScript, builds the documentation, and starts a local server.</td></tr><tr><td><code>npm run build</code> or <code>yarn build</code></td><td>Creates the <code>dist/</code> directory with compiled files. Uses <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">Sass</a>, <a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">Autoprefixer</a>.</td></tr><tr><td><code>npm test</code> or <code>yarn test</code></td><td>Runs tests locally</td></tr></tbody></table><h2 id="sass" tabindex="-1">Sass <a class="anchor-link" href="#sass" aria-hidden="true">#</a></h2><p>CoreUI uses <a href="https://sass-lang.com/dart-sass" target="_blank" rel="noopener noreferrer">Dart Sass</a> for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you&#39;re compiling Sass using your own asset pipeline.</p><p>Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don&#39;t lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.</p><h2 id="autoprefixer" tabindex="-1">Autoprefixer <a class="anchor-link" href="#autoprefixer" aria-hidden="true">#</a></h2><p>We uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.</p><p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <code>.browserslistrc</code>.</p><h2 id="local-template" tabindex="-1">Local template <a class="anchor-link" href="#local-template" aria-hidden="true">#</a></h2><p>Here&#39;s how to get it started:</p><ol><li>Run through the <a href="#tooling-setup">tooling setup</a> above to install all dependencies.</li><li>From the root template directory, run <code>npm run start</code> or <code>yarn start</code> in the command line.</li><li>Open <code>http://localhost:8080</code> in your browser, and voilà.</li></ol><h2 id="troubleshooting" tabindex="-1">Troubleshooting <a class="anchor-link" href="#troubleshooting" aria-hidden="true">#</a></h2><p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code>npm install</code> or <code>yarn install</code>.</p>', 19);
 const _hoisted_20 = [
diff --git a/vue/docs/assets/introduction.html-C5v0Zkqd.js b/vue/docs/assets/introduction.html-CuiibolQ.js
similarity index 90%
rename from vue/docs/assets/introduction.html-C5v0Zkqd.js
rename to vue/docs/assets/introduction.html-CuiibolQ.js
index b1fdca81b5b..eb94544f293 100644
--- a/vue/docs/assets/introduction.html-C5v0Zkqd.js
+++ b/vue/docs/assets/introduction.html-CuiibolQ.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, a as createBaseVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, e as createBaseVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "installation",
@@ -24,6 +24,7 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
 ], -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-bash line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "sh",
   "data-title": "sh"
 }, [
@@ -41,13 +42,15 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
 ], -1);
 const _hoisted_4 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-bash line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "sh",
   "data-title": "sh"
 }, [
@@ -65,7 +68,8 @@ const _hoisted_4 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
@@ -83,6 +87,7 @@ const _hoisted_5 = /* @__PURE__ */ createBaseVNode("h3", {
 ], -1);
 const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-bash line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "sh",
   "data-title": "sh"
 }, [
@@ -100,13 +105,15 @@ const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
 ], -1);
 const _hoisted_7 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-bash line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "sh",
   "data-title": "sh"
 }, [
@@ -124,7 +131,8 @@ const _hoisted_7 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
@@ -142,6 +150,7 @@ const _hoisted_8 = /* @__PURE__ */ createBaseVNode("h2", {
 ], -1);
 const _hoisted_9 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-javascript line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "js",
   "data-title": "js"
 }, [
@@ -165,13 +174,15 @@ const _hoisted_9 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
 ], -1);
 const _hoisted_10 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-javascript line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "js",
   "data-title": "js"
 }, [
@@ -195,7 +206,8 @@ const _hoisted_10 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
@@ -203,6 +215,7 @@ const _hoisted_10 = /* @__PURE__ */ createBaseVNode("div", {
 const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<h2 id="stylesheets" tabindex="-1">Stylesheets <a class="anchor-link" href="#stylesheets" aria-hidden="true">#</a></h2><p>Vue components are styled using the <code>@coreui/coreui</code> or <code>@coreui/coreui-pro</code> CSS library, but you can also use them with the bootstrap CSS library. That is possible because the <code>@coreui/coreui</code> library is compatible with Bootstrap, it just extends its functionalities. The only exceptions are custom CoreUI and CoreUI PRO components, which don&#39;t exist in the Bootstrap ecosystem.</p><h3 id="coreui-css-files" tabindex="-1">CoreUI CSS files <a class="anchor-link" href="#coreui-css-files" aria-hidden="true">#</a></h3><h6 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage" aria-hidden="true">#</a></h6>', 4);
 const _hoisted_15 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-javascript line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "js",
   "data-title": "js"
 }, [
@@ -219,13 +232,15 @@ const _hoisted_15 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
 ], -1);
 const _hoisted_16 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-javascript line-numbers-mode",
+  "data-highlighter": "prismjs",
   "data-ext": "js",
   "data-title": "js"
 }, [
@@ -242,12 +257,13 @@ const _hoisted_16 = /* @__PURE__ */ createBaseVNode("div", {
   ]),
   /* @__PURE__ */ createBaseVNode("div", {
     class: "line-numbers",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    style: { "counter-reset": "line-number 0" }
   }, [
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
 ], -1);
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<h3 id="bootstrap-css-files" tabindex="-1">Bootstrap CSS files <a class="anchor-link" href="#bootstrap-css-files" aria-hidden="true">#</a></h3><h6 id="installation-1" tabindex="-1">Installation <a class="anchor-link" href="#installation-1" aria-hidden="true">#</a></h6><div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> bootstrap</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h6 id="basic-usage-1" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage-1" aria-hidden="true">#</a></h6><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token string">&#39;bootstrap/dist/css/bootstrap.min.css&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>', 5);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<h3 id="bootstrap-css-files" tabindex="-1">Bootstrap CSS files <a class="anchor-link" href="#bootstrap-css-files" aria-hidden="true">#</a></h3><h6 id="installation-1" tabindex="-1">Installation <a class="anchor-link" href="#installation-1" aria-hidden="true">#</a></h6><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> bootstrap</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h6 id="basic-usage-1" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage-1" aria-hidden="true">#</a></h6><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token string">&#39;bootstrap/dist/css/bootstrap.min.css&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>', 5);
 function _sfc_render(_ctx, _cache) {
   const _component_CTab = resolveComponent("CTab");
   const _component_CTabList = resolveComponent("CTabList");
diff --git a/vue/docs/assets/layout.html-ISp5IgqA.js b/vue/docs/assets/layout.html-DARLKo8o.js
similarity index 54%
rename from vue/docs/assets/layout.html-ISp5IgqA.js
rename to vue/docs/assets/layout.html-DARLKo8o.js
index 492b673135f..ef47a8954e9 100644
--- a/vue/docs/assets/layout.html-ISp5IgqA.js
+++ b/vue/docs/assets/layout.html-DARLKo8o.js
@@ -1,41 +1,41 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="forms" tabindex="-1">Forms <a class="anchor-link" href="#forms" aria-hidden="true">#</a></h2><p>Every group of form fields should reside in a <code>&lt;CForm&gt;</code> element. CoreUI provides no default styling for the <code>&lt;CForm&gt;</code> element, but there are some powerful browser features that are provided by default.</p><ul><li>New to browser forms? Consider reviewing <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" target="_blank" rel="noopener noreferrer">the MDN form docs</a> for an overview and complete list of available attributes.</li><li><code>&lt;CButton&gt;</code>s within a <code>&lt;CForm&gt;</code> default to <code>type=&quot;submit&quot;</code>, so strive to be specific and always include a <code>type</code>.</li><li>You can disable every form element within a form with the <code>disabled</code> attribute on the <code>&lt;CForm&gt;</code>.</li></ul><p>Since CoreUI applies <code>display: block</code> and <code>width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p><h2 id="utilities" tabindex="-1">Utilities <a class="anchor-link" href="#utilities" aria-hidden="true">#</a></h2><p><a href="https://coreui.io/docs/utilities/spacing/" target="_blank" rel="noopener noreferrer">Margin utilities</a> are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to <code>margin-bottom</code> utilities, and using a single direction throughout the form for consistency.</p><h2 id="form-grid" tabindex="-1">Form grid <a class="anchor-link" href="#form-grid" aria-hidden="true">#</a></h2><p>More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.</p>', 8);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="gutters" tabindex="-1">Gutters <a class="anchor-link" href="#gutters" aria-hidden="true">#</a></h2><p>By adding <a href="https://coreui.io/docs/layout/gutters/" target="_blank" rel="noopener noreferrer">gutter modifier classes</a>, you can have control over the gutter width in as well the inline as block direction.</p>', 3);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="gutters" tabindex="-1">Gutters <a class="anchor-link" href="#gutters" aria-hidden="true">#</a></h2><p>By adding <a href="https://coreui.io/docs/layout/gutters/" target="_blank" rel="noopener noreferrer">gutter modifier classes</a>, you can have control over the gutter width in as well the inline as block direction.</p>', 3);
 const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>More complex layouts can also be created with the grid system.</p>', 2);
+const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last name<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>More complex layouts can also be created with the grid system.</p>', 2);
 const _hoisted_16 = { class: "docs-example rounded-top p-4" };
 const _hoisted_17 = /* @__PURE__ */ createBaseVNode("option", null, "Choose...", -1);
 const _hoisted_18 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail4<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword4<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1234 Main St<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Address 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Apartment, studio, or floor<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputCity<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputCity<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputState<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>State<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputState<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputZip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Zip<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputZip<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check me out<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sign in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal-form" tabindex="-1">Horizontal form <a class="anchor-link" href="#horizontal-form" aria-hidden="true">#</a></h2><p>Create horizontal forms with the grid by adding the <code>.row</code> class to form groups and using the <code>.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code>.col-form-label</code> to your <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically centered with their associated form controls.</p><p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we&#39;ve removed the <code>padding-top</code> on our stacked radio inputs label to better align the text baseline.</p>', 4);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail4<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword4<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1234 Main St<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Address 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputAddress2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Apartment, studio, or floor<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputCity<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputCity<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputState<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>State<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputState<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputZip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Zip<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputZip<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check me out<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sign in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal-form" tabindex="-1">Horizontal form <a class="anchor-link" href="#horizontal-form" aria-hidden="true">#</a></h2><p>Create horizontal forms with the grid by adding the <code>.row</code> class to form groups and using the <code>.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code>.col-form-label</code> to your <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically centered with their associated form controls.</p><p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we&#39;ve removed the <code>padding-top</code> on our stacked radio inputs label to better align the text baseline.</p>', 4);
 const _hoisted_23 = { class: "docs-example rounded-top p-4" };
 const _hoisted_24 = { class: "row mb-3" };
 const _hoisted_25 = /* @__PURE__ */ createBaseVNode("legend", { class: "col-form-label col-sm-2 pt-0" }, "Radios", -1);
 const _hoisted_26 = { class: "col-sm-10 offset-sm-2" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label col-sm-2 pt-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Radios<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Third disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10 offset-sm-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridCheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sign in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="horizontal-form-label-sizing" tabindex="-1">Horizontal form label sizing <a class="anchor-link" href="#horizontal-form-label-sizing" aria-hidden="true">#</a></h3><p>Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.</p>', 3);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputEmail3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label col-sm-2 pt-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Radios<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridRadios3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Third disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-10 offset-sm-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gridCheck1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sign in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="horizontal-form-label-sizing" tabindex="-1">Horizontal form label sizing <a class="anchor-link" href="#horizontal-form-label-sizing" aria-hidden="true">#</a></h3><p>Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.</p>', 3);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
-const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelSm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label col-form-label-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-control form-control-sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelSm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelLg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label col-form-label-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-control form-control-lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelLg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="column-sizing" tabindex="-1">Column sizing <a class="anchor-link" href="#column-sizing" aria-hidden="true">#</a></h2><p>As shown in the previous examples, our grid system allows you to place any number of <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They&#39;ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally split the rest, with specific column classes like <code>&lt;CCol sm=&quot;7&quot;&gt;</code>.</p>', 3);
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelSm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label col-form-label-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-control form-control-sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelSm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelLg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-sm-2 col-form-label col-form-label-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-control form-control-lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>colFormLabelLg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="column-sizing" tabindex="-1">Column sizing <a class="anchor-link" href="#column-sizing" aria-hidden="true">#</a></h2><p>As shown in the previous examples, our grid system allows you to place any number of <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They&#39;ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally split the rest, with specific column classes like <code>&lt;CCol sm=&quot;7&quot;&gt;</code>.</p>', 3);
 const _hoisted_34 = { class: "docs-example rounded-top p-4" };
-const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="auto-sizing" tabindex="-1">Auto-sizing <a class="anchor-link" href="#auto-sizing" aria-hidden="true">#</a></h2><p>The example below uses a flexbox utility to vertically center the contents and changes <code>&lt;CCol&gt;</code> to <code>&lt;CCol xs=&quot;auto&quot;&gt;</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p>', 3);
+const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="auto-sizing" tabindex="-1">Auto-sizing <a class="anchor-link" href="#auto-sizing" aria-hidden="true">#</a></h2><p>The example below uses a flexbox utility to vertically center the contents and changes <code>&lt;CCol&gt;</code> to <code>&lt;CCol xs=&quot;auto&quot;&gt;</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p>', 3);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
 const _hoisted_39 = /* @__PURE__ */ createBaseVNode("option", null, "Choose...", -1);
 const _hoisted_40 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_41 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_42 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row gy-2 gx-3 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Jane Doe<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInputGroup<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInputGroup<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Preference<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can then remix that once again with size-specific column classes.</p>', 2);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row gy-2 gx-3 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Jane Doe<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInputGroup<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingInputGroup<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Preference<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can then remix that once again with size-specific column classes.</p>', 2);
 const _hoisted_45 = { class: "docs-example rounded-top p-4" };
 const _hoisted_46 = /* @__PURE__ */ createBaseVNode("option", null, "Choose...", -1);
 const _hoisted_47 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_48 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_49 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row gx-3 gy-2 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Jane Doe<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputGroupUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputGroupUsername<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Preference<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingCheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline-forms" tabindex="-1">Inline forms <a class="anchor-link" href="#inline-forms" aria-hidden="true">#</a></h2><p>Use the <code>&lt;CCol xs=&quot;auto&quot;&gt;</code> class to create horizontal layouts. By adding <a href="https://coreui.io/docs/layout/gutters/" target="_blank" rel="noopener noreferrer">gutter modifier classes</a>, we will have gutters in horizontal and vertical directions. The <code>.align-items-center</code> aligns the form elements to the middle, making the <code>&lt;CFormCheck&gt;</code> align properly.</p>', 3);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row gx-3 gy-2 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Jane Doe<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputGroupUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeInputGroupUsername<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Preference<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>specificSizeSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoSizingCheck2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline-forms" tabindex="-1">Inline forms <a class="anchor-link" href="#inline-forms" aria-hidden="true">#</a></h2><p>Use the <code>&lt;CCol xs=&quot;auto&quot;&gt;</code> class to create horizontal layouts. By adding <a href="https://coreui.io/docs/layout/gutters/" target="_blank" rel="noopener noreferrer">gutter modifier classes</a>, we will have gutters in horizontal and vertical directions. The <code>.align-items-center</code> aligns the form elements to the middle, making the <code>&lt;CFormCheck&gt;</code> align properly.</p>', 3);
 const _hoisted_53 = { class: "docs-example rounded-top p-4" };
 const _hoisted_54 = /* @__PURE__ */ createBaseVNode("option", null, "Choose...", -1);
 const _hoisted_55 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_56 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_57 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row row-cols-lg-auto g-3 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormInputGroupUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormInputGroupUsername<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormSelectPref<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Preference<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormSelectPref<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row row-cols-lg-auto g-3 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormInputGroupUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormInputGroupUsername<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visually-hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormSelectPref<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Preference<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormSelectPref<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineFormCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Remember me<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormInput = resolveComponent("CFormInput");
   const _component_CCol = resolveComponent("CCol");
diff --git a/vue/docs/assets/link.html-CPRhnjZz.js b/vue/docs/assets/link.html-C2tbxGSf.js
similarity index 60%
rename from vue/docs/assets/link.html-CPRhnjZz.js
rename to vue/docs/assets/link.html-C2tbxGSf.js
index 71e3ec4e2b2..0216df25f69 100644
--- a/vue/docs/assets/link.html-CPRhnjZz.js
+++ b/vue/docs/assets/link.html-C2tbxGSf.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, a as createBaseVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createVNode, d as withCtx, e as createBaseVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -11,7 +11,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
     "aria-hidden": "true"
   }, "#")
 ], -1);
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span>CLink<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="additional-content" tabindex="-1">Additional content <a class="anchor-link" href="#additional-content" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span>CLink<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="additional-content" tabindex="-1">Additional content <a class="anchor-link" href="#additional-content" aria-hidden="true">#</a></h2>', 2);
 function _sfc_render(_ctx, _cache) {
   const _component_CLink = resolveComponent("CLink");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/list-group.html-CzeYoW-1.js b/vue/docs/assets/list-group.html-ChBEIPwp.js
similarity index 52%
rename from vue/docs/assets/list-group.html-CzeYoW-1.js
rename to vue/docs/assets/list-group.html-ChBEIPwp.js
index 6422dfc5512..aa1fd3b1193 100644
--- a/vue/docs/assets/list-group.html-CzeYoW-1.js
+++ b/vue/docs/assets/list-group.html-ChBEIPwp.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, F as Fragment, j as renderList, e as createTextVNode, f as createStaticVNode, t as toDisplayString } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, F as Fragment, j as renderList, f as createTextVNode, a as createStaticVNode, t as toDisplayString } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "basic-example",
@@ -13,23 +13,23 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.", -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="active-items" tabindex="-1">Active items <a class="anchor-link" href="#active-items" aria-hidden="true">#</a></h2><p>Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to show the current active selection.</p>', 3);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="active-items" tabindex="-1">Active items <a class="anchor-link" href="#active-items" aria-hidden="true">#</a></h2><p>Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to show the current active selection.</p>', 3);
 const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-items" tabindex="-1">Disabled items <a class="anchor-link" href="#disabled-items" aria-hidden="true">#</a></h2><p>Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.</p>', 3);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-items" tabindex="-1">Disabled items <a class="anchor-link" href="#disabled-items" aria-hidden="true">#</a></h2><p>Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.</p>', 3);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="links-and-buttons" tabindex="-1">Links and buttons <a class="anchor-link" href="#links-and-buttons" aria-hidden="true">#</a></h2><p>Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code>as=&quot;a|button&quot;</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or <code>&lt;div&gt;</code>s) don&#39;t provide a click or tap affordance.</p>', 3);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="links-and-buttons" tabindex="-1">Links and buttons <a class="anchor-link" href="#links-and-buttons" aria-hidden="true">#</a></h2><p>Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code>as=&quot;a|button&quot;</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or <code>&lt;div&gt;</code>s) don&#39;t provide a click or tap affordance.</p>', 3);
 const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="flush" tabindex="-1">Flush <a class="anchor-link" href="#flush" aria-hidden="true">#</a></h2><p>Add <code>flush</code> boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>', 3);
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="flush" tabindex="-1">Flush <a class="anchor-link" href="#flush" aria-hidden="true">#</a></h2><p>Add <code>flush</code> boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>', 3);
 const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal" tabindex="-1">Horizontal <a class="anchor-link" href="#horizontal" aria-hidden="true">#</a></h2><p>Add <code>layout=&quot;horizontal&quot;</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code>.layout=&quot;horizontal-{sm|md|lg|xl|xxl}&quot;</code> to make a list group horizontal starting at that breakpoint&#39;s <code>min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>', 3);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">flush</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Porta ac consectetur ac<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Vestibulum at eros<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="horizontal" tabindex="-1">Horizontal <a class="anchor-link" href="#horizontal" aria-hidden="true">#</a></h2><p>Add <code>layout=&quot;horizontal&quot;</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code>.layout=&quot;horizontal-{sm|md|lg|xl|xxl}&quot;</code> to make a list group horizontal starting at that breakpoint&#39;s <code>min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>', 3);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;&#39;, &#39;-sm&#39;, &#39;-md&#39;, &#39;-lg&#39;, &#39;-xl&#39;, &#39;-xxl&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>horizontal&#39; + item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="contextual-classes" tabindex="-1">Contextual classes <a class="anchor-link" href="#contextual-classes" aria-hidden="true">#</a></h2><p>Use contextual classes to style list items with a stateful background and color.</p>', 3);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;&#39;, &#39;-sm&#39;, &#39;-md&#39;, &#39;-lg&#39;, &#39;-xl&#39;, &#39;-xxl&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>horizontal&#39; + item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="contextual-classes" tabindex="-1">Contextual classes <a class="anchor-link" href="#contextual-classes" aria-hidden="true">#</a></h2><p>Use contextual classes to style list items with a stateful background and color.</p>', 3);
 const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;danger&#39;, &#39;warning&#39;, &#39;info&#39;, &#39;light&#39;, &#39;dark&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple {{item}} list group item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Contextual classes also work with <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present in the previous example. Also supported is the <code>active</code> state; apply it to indicate an active selection on a contextual list group item.</p>', 2);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;danger&#39;, &#39;warning&#39;, &#39;info&#39;, &#39;light&#39;, &#39;dark&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple {{item}} list group item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Contextual classes also work with <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present in the previous example. Also supported is the <code>active</code> state; apply it to indicate an active selection on a contextual list group item.</p>', 2);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;danger&#39;, &#39;warning&#39;, &#39;info&#39;, &#39;light&#39;, &#39;dark&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple {{item}} list group item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) in [&#39;primary&#39;, &#39;secondary&#39;, &#39;success&#39;, &#39;danger&#39;, &#39;warning&#39;, &#39;info&#39;, &#39;light&#39;, &#39;dark&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A simple {{item}} list group item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_34 = /* @__PURE__ */ createBaseVNode("code", null, ".visually-hidden", -1);
 const _hoisted_35 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "with-badges",
@@ -44,7 +44,7 @@ const _hoisted_35 = /* @__PURE__ */ createBaseVNode("h2", {
 ], -1);
 const _hoisted_36 = /* @__PURE__ */ createBaseVNode("p", null, "Add badges to any list group item to show unread counts, activity, and more.", -1);
 const _hoisted_37 = { class: "docs-example rounded-top p-4" };
-const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex justify-content-between align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>14<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex justify-content-between align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex justify-content-between align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-content" tabindex="-1">Custom content <a class="anchor-link" href="#custom-content" aria-hidden="true">#</a></h2><p>Add nearly any HTML within, even for linked list groups like the one below, with the help of <a href="https://coreui.io/docs/utilities/flex/" target="_blank" rel="noopener noreferrer">flexbox utilities</a>.</p>', 3);
+const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex justify-content-between align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Cras justo odio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>14<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex justify-content-between align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dapibus ac facilisis in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex justify-content-between align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Morbi leo risus<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded-pill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-content" tabindex="-1">Custom content <a class="anchor-link" href="#custom-content" aria-hidden="true">#</a></h2><p>Add nearly any HTML within, even for linked list groups like the one below, with the help of <a href="https://coreui.io/docs/utilities/flex/" target="_blank" rel="noopener noreferrer">flexbox utilities</a>.</p>', 3);
 const _hoisted_41 = { class: "docs-example rounded-top p-4" };
 const _hoisted_42 = /* @__PURE__ */ createBaseVNode("div", { class: "d-flex w-100 justify-content-between" }, [
   /* @__PURE__ */ createBaseVNode("h5", { class: "mb-1" }, "List group item heading"),
@@ -64,13 +64,13 @@ const _hoisted_48 = /* @__PURE__ */ createBaseVNode("div", { class: "d-flex w-10
 ], -1);
 const _hoisted_49 = /* @__PURE__ */ createBaseVNode("p", { class: "mb-1" }, "Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.", -1);
 const _hoisted_50 = /* @__PURE__ */ createBaseVNode("small", { class: "text-body-secondary" }, "Donec id elit non mi porta.", -1);
-const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex w-100 justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>List group item heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>3 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex w-100 justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>List group item heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex w-100 justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>List group item heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="checkboxes-and-radios" tabindex="-1">Checkboxes and radios <a class="anchor-link" href="#checkboxes-and-radios" aria-hidden="true">#</a></h2><p>Place CoreUI&#39;s checkboxes and radios within list group items and customize as needed.</p>', 3);
+const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex w-100 justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>List group item heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>3 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex w-100 justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>List group item heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex w-100 justify-content-between<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>List group item heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3 days ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Donec id elit non mi porta.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="checkboxes-and-radios" tabindex="-1">Checkboxes and radios <a class="anchor-link" href="#checkboxes-and-radios" aria-hidden="true">#</a></h2><p>Place CoreUI&#39;s checkboxes and radios within list group items and customize as needed.</p>', 3);
 const _hoisted_54 = { class: "docs-example rounded-top p-4" };
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Cras justo odio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dapibus ac facilisis in<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Morbi leo risus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>orta ac consectetur ac<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vestibulum at eros<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And if you want <code>&lt;label&gt;</code>s as the <code>.list-group-item</code> for large hit areas, you can do that, too.</p>', 2);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Cras justo odio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dapibus ac facilisis in<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Morbi leo risus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>orta ac consectetur ac<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vestibulum at eros<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And if you want <code>&lt;label&gt;</code>s as the <code>.list-group-item</code> for large hit areas, you can do that, too.</p>', 2);
 const _hoisted_57 = { class: "docs-example rounded-top p-4" };
-const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Cras justo odio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dapibus ac facilisis in<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Morbi leo risus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>orta ac consectetur ac<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vestibulum at eros<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue list groups use local CSS variables on <code>.list-group</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CListGroup <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CListGroup<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>flush</strong></td><td>Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>&lt;CCard&gt;</code>)</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type.</td><td>string</td><td><code>&#39;horizontal&#39;</code>, <code>&#39;horizontal-sm&#39;</code>, <code>&#39;horizontal-md&#39;</code>, <code>&#39;horizontal-lg&#39;</code>, <code>&#39;horizontal-xl&#39;</code>, <code>&#39;horizontal-xxl&#39;</code>, ``</td><td>-</td></tr></tbody></table><h3 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroupItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroupItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroupItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 9);
+const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Cras justo odio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Dapibus ac facilisis in<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Morbi leo risus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>orta ac consectetur ac<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">hitArea</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>full<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vestibulum at eros<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroupItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CListGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue list groups use local CSS variables on <code>.list-group</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CListGroup <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CListGroup<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>flush</strong></td><td>Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>&lt;CCard&gt;</code>)</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type.</td><td>string</td><td><code>&#39;horizontal&#39;</code>, <code>&#39;horizontal-sm&#39;</code>, <code>&#39;horizontal-md&#39;</code>, <code>&#39;horizontal-lg&#39;</code>, <code>&#39;horizontal-xl&#39;</code>, <code>&#39;horizontal-xxl&#39;</code>, ``</td><td>-</td></tr></tbody></table><h3 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CListGroupItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CListGroupItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/list-group/CListGroupItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 9);
 function _sfc_render(_ctx, _cache) {
   const _component_CListGroupItem = resolveComponent("CListGroupItem");
   const _component_CListGroup = resolveComponent("CListGroup");
diff --git a/vue/docs/assets/loading-button.html-CfSizC_p.js b/vue/docs/assets/loading-button.html-BwfYal81.js
similarity index 53%
rename from vue/docs/assets/loading-button.html-CfSizC_p.js
rename to vue/docs/assets/loading-button.html-BwfYal81.js
index cb0c1553b8e..c2ccc9b7245 100644
--- a/vue/docs/assets/loading-button.html-CfSizC_p.js
+++ b/vue/docs/assets/loading-button.html-BwfYal81.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -13,11 +13,11 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Create basic Vue Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.", -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="spinners" tabindex="-1">Spinners <a class="anchor-link" href="#spinners" aria-hidden="true">#</a></h2><h3 id="border-default" tabindex="-1">Border (Default) <a class="anchor-link" href="#border-default" aria-hidden="true">#</a></h3><p>The default option. Use loading buttons with a border spinner to indicate loading status.</p>', 4);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="spinners" tabindex="-1">Spinners <a class="anchor-link" href="#spinners" aria-hidden="true">#</a></h2><h3 id="border-default" tabindex="-1">Border (Default) <a class="anchor-link" href="#border-default" aria-hidden="true">#</a></h3><p>The default option. Use loading buttons with a border spinner to indicate loading status.</p>', 4);
 const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="grow" tabindex="-1">Grow <a class="anchor-link" href="#grow" aria-hidden="true">#</a></h3><p>Switch to a grow spinner for Vue loading buttons by adding <code>spinnerType=&quot;grow&quot;</code>.</p>', 3);
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="grow" tabindex="-1">Grow <a class="anchor-link" href="#grow" aria-hidden="true">#</a></h3><p>Switch to a grow spinner for Vue loading buttons by adding <code>spinnerType=&quot;grow&quot;</code>.</p>', 3);
 const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">spinnerType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">spinnerType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">spinnerType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cloadingbutton" tabindex="-1">CLoadingButton <a class="anchor-link" href="#cloadingbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CLoadingButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CLoadingButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/loading-button/CLoadingButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled-on-loading</strong></td><td>Makes button disabled when loading.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>Loading state (set to true to start animation).</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>spinner-type</strong></td><td>Sets type of spinner.<br><code>@default</code> &#39;border&#39;</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>timeout</strong></td><td>Automatically starts loading animation and stops after a determined amount of milliseconds.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on a component.</td><td></td></tr></tbody></table>', 8);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">spinnerType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">spinnerType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLoadingButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">spinnerType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ghost<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:timeout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLoadingButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cloadingbutton" tabindex="-1">CLoadingButton <a class="anchor-link" href="#cloadingbutton" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CLoadingButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CLoadingButton <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/loading-button/CLoadingButton&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled-on-loading</strong></td><td>Makes button disabled when loading.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>Loading state (set to true to start animation).</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>spinner-type</strong></td><td>Sets type of spinner.<br><code>@default</code> &#39;border&#39;</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>timeout</strong></td><td>Automatically starts loading animation and stops after a determined amount of milliseconds.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>click</strong></td><td>Event called when the user clicks on a component.</td><td></td></tr></tbody></table>', 8);
 function _sfc_render(_ctx, _cache) {
   const _component_CLoadingButton = resolveComponent("CLoadingButton");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/modal.html-Cpi2200D.js b/vue/docs/assets/modal.html-KOyG7M6n.js
similarity index 59%
rename from vue/docs/assets/modal.html-Cpi2200D.js
rename to vue/docs/assets/modal.html-KOyG7M6n.js
index 2146e6a1600..3c9cdb53413 100644
--- a/vue/docs/assets/modal.html-Cpi2200D.js
+++ b/vue/docs/assets/modal.html-KOyG7M6n.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, Y as resolveDirective, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode, Z as withDirectives, h as createBlock } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode, Y as withDirectives, h as createBlock } from "./app-BoHWg5jI.js";
 const _sfc_main = {
   data() {
     return {
@@ -55,11 +55,11 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("), and modal footer (optional). We ask that you include modal headers with actions whenever possible, or provide another explicit action.")
 ], -1);
 const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:keyboard</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span>Modal body text goes here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="live-demo" tabindex="-1">Live demo <a class="anchor-link" href="#live-demo" aria-hidden="true">#</a></h3><p>Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>', 3);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:keyboard</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span>Modal body text goes here.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="live-demo" tabindex="-1">Live demo <a class="anchor-link" href="#live-demo" aria-hidden="true">#</a></h3><p>Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>', 3);
 const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleLiveDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleLiveDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleLiveDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>LiveDemoExampleLabel<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>LiveDemoExampleLabel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span>Woohoo, you&#39;re reading this text in a modal!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleLiveDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleLiveDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="static-backdrop" tabindex="-1">Static backdrop <a class="anchor-link" href="#static-backdrop" aria-hidden="true">#</a></h3><p>If you set <code>backdrop</code> property to <code>static</code>, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.</p>', 3);
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleLiveDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleLiveDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleLiveDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>LiveDemoExampleLabel<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>LiveDemoExampleLabel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span>Woohoo, you&#39;re reading this text in a modal!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleLiveDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleLiveDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="static-backdrop" tabindex="-1">Static backdrop <a class="anchor-link" href="#static-backdrop" aria-hidden="true">#</a></h3><p>If you set <code>backdrop</code> property to <code>static</code>, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.</p>', 3);
 const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleStaticBackdropDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleStaticBackdropDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleStaticBackdropDemo = false }<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>StaticBackdropExampleLabel<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>StaticBackdropExampleLabel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span>Woohoo, you&#39;re reading this text in a modal!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleStaticBackdropDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleStaticBackdropDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="scrolling-long-content" tabindex="-1">Scrolling long content <a class="anchor-link" href="#scrolling-long-content" aria-hidden="true">#</a></h3><p>When modals become too long for the user&#39;s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.</p>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleStaticBackdropDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleStaticBackdropDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleStaticBackdropDemo = false }<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>StaticBackdropExampleLabel<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>StaticBackdropExampleLabel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span>Woohoo, you&#39;re reading this text in a modal!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleStaticBackdropDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleStaticBackdropDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="scrolling-long-content" tabindex="-1">Scrolling long content <a class="anchor-link" href="#scrolling-long-content" aria-hidden="true">#</a></h3><p>When modals become too long for the user&#39;s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.</p>', 3);
 const _hoisted_16 = { class: "docs-example rounded-top p-4" };
 const _hoisted_17 = /* @__PURE__ */ createBaseVNode("p", null, " Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. ", -1);
 const _hoisted_18 = /* @__PURE__ */ createBaseVNode("p", null, " Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ", -1);
@@ -79,7 +79,7 @@ const _hoisted_31 = /* @__PURE__ */ createBaseVNode("p", null, " Aenean lacinia
 const _hoisted_32 = /* @__PURE__ */ createBaseVNode("p", null, " Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. ", -1);
 const _hoisted_33 = /* @__PURE__ */ createBaseVNode("p", null, " Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ", -1);
 const _hoisted_34 = /* @__PURE__ */ createBaseVNode("p", null, " Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. ", -1);
-const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollingLongContentDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleScrollingLongContentDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollingLongContentDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleScrollingLongContentDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also create a scrollable modal that allows scroll the modal body by adding <code>scrollable</code> prop.</p>', 2);
+const _hoisted_35 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollingLongContentDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleScrollingLongContentDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollingLongContentDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleScrollingLongContentDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also create a scrollable modal that allows scroll the modal body by adding <code>scrollable</code> prop.</p>', 2);
 const _hoisted_37 = { class: "docs-example rounded-top p-4" };
 const _hoisted_38 = /* @__PURE__ */ createBaseVNode("p", null, " Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. ", -1);
 const _hoisted_39 = /* @__PURE__ */ createBaseVNode("p", null, " Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ", -1);
@@ -99,25 +99,25 @@ const _hoisted_52 = /* @__PURE__ */ createBaseVNode("p", null, " Aenean lacinia
 const _hoisted_53 = /* @__PURE__ */ createBaseVNode("p", null, " Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. ", -1);
 const _hoisted_54 = /* @__PURE__ */ createBaseVNode("p", null, " Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ", -1);
 const _hoisted_55 = /* @__PURE__ */ createBaseVNode("p", null, " Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. ", -1);
-const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollableDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">scrollable</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleScrollableDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollableDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleScrollableDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vertically-centered" tabindex="-1">Vertically centered <a class="anchor-link" href="#vertically-centered" aria-hidden="true">#</a></h3><p>Add <code>alignment=&quot;center</code> to <code>&lt;CModal&gt;</code> to vertically center the modal.</p>', 3);
+const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollableDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">scrollable</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleScrollableDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrollableDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ScrollingLongContentExampleLabel2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac</span>\n<span class="line">        facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum</span>\n<span class="line">        at eros.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis</span>\n<span class="line">        lacus vel augue laoreet rutrum faucibus dolor auctor.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel</span>\n<span class="line">        scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus</span>\n<span class="line">        auctor fringilla.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleScrollableDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vertically-centered" tabindex="-1">Vertically centered <a class="anchor-link" href="#vertically-centered" aria-hidden="true">#</a></h3><p>Add <code>alignment=&quot;center</code> to <code>&lt;CModal&gt;</code> to vertically center the modal.</p>', 3);
 const _hoisted_59 = { class: "docs-example rounded-top p-4" };
-const _hoisted_60 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleVerticallyCenteredDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleVerticallyCenteredDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_60 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleVerticallyCenteredDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleVerticallyCenteredDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_61 = { class: "docs-example rounded-top p-4" };
-const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredScrollableDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Vertically centered scrollable modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">scrollable</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleVerticallyCenteredScrollableDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredScrollableDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredScrollableDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleVerticallyCenteredScrollableDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tooltips-and-popovers" tabindex="-1">Tooltips and popovers <a class="anchor-link" href="#tooltips-and-popovers" aria-hidden="true">#</a></h3><p><code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automaticallyed.</p>', 3);
+const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredScrollableDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Vertically centered scrollable modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> </span>\n<span class="line">    <span class="token attr-name">alignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">scrollable</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleVerticallyCenteredScrollableDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredScrollableDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>VerticallyCenteredExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleVerticallyCenteredScrollableDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleVerticallyCenteredScrollableDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tooltips-and-popovers" tabindex="-1">Tooltips and popovers <a class="anchor-link" href="#tooltips-and-popovers" aria-hidden="true">#</a></h3><p><code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automaticallyed.</p>', 3);
 const _hoisted_65 = { class: "docs-example rounded-top p-4" };
 const _hoisted_66 = /* @__PURE__ */ createBaseVNode("h5", null, "Popover in a modal", -1);
 const _hoisted_67 = /* @__PURE__ */ createBaseVNode("hr", null, null, -1);
 const _hoisted_68 = /* @__PURE__ */ createBaseVNode("h5", null, "Tooltips in a modal", -1);
-const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTooltipsAndPopoversDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleTooltipsAndPopoversDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTooltipsAndPopoversDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TooltipsAndPopoverExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TooltipsAndPopoverExample<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>Popover in a modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{header: &#39;Popover title&#39;, content: &#39;Popover body content is set in this property.&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>Tooltips in a modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>that link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span> have tooltips on hover.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTooltipsAndPopoversDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleTooltipsAndPopoversDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="toggle-between-modals" tabindex="-1">Toggle between modals <a class="anchor-link" href="#toggle-between-modals" aria-hidden="true">#</a></h3><p>Toggle between multiple modals with some clever placement of the <code>visible</code> props. <strong>Please note multiple modals cannot be opened at the same time</strong> — this method simply toggles between two separate modals.</p>', 3);
+const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTooltipsAndPopoversDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Launch demo modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleTooltipsAndPopoversDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTooltipsAndPopoversDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TooltipsAndPopoverExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TooltipsAndPopoverExample<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>Popover in a modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{header: &#39;Popover title&#39;, content: &#39;Popover body content is set in this property.&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>Tooltips in a modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>that link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span> have tooltips on hover.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTooltipsAndPopoversDemo = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Close</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Save changes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleTooltipsAndPopoversDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="toggle-between-modals" tabindex="-1">Toggle between modals <a class="anchor-link" href="#toggle-between-modals" aria-hidden="true">#</a></h3><p>Toggle between multiple modals with some clever placement of the <code>visible</code> props. <strong>Please note multiple modals cannot be opened at the same time</strong> — this method simply toggles between two separate modals.</p>', 3);
 const _hoisted_72 = { class: "docs-example rounded-top p-4" };
 const _hoisted_73 = /* @__PURE__ */ createBaseVNode("p", null, "Show a second modal and hide this one with the button below.", -1);
 const _hoisted_74 = /* @__PURE__ */ createBaseVNode("p", null, "Hide this modal and show the first with the button below.", -1);
-const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleToggleBetweenModalsDemo1 = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Open first modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleToggleBetweenModalsDemo1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleToggleBetweenModalsDemo1 = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal 1 title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Show a second modal and hide this one with the button below.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> </span>\n<span class="line">        <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { </span>\n<span class="line">          visibleToggleBetweenModalsDemo1 = false</span>\n<span class="line">          visibleToggleBetweenModalsDemo2 = true</span>\n<span class="line">        }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span>Open second modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleToggleBetweenModalsDemo2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {</span>\n<span class="line">      visibleToggleBetweenModalsDemo1 = true</span>\n<span class="line">      visibleToggleBetweenModalsDemo2 = false</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal 2 title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Hide this modal and show the first with the button below.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> </span>\n<span class="line">        <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { </span>\n<span class="line">          visibleToggleBetweenModalsDemo1 = true</span>\n<span class="line">          visibleToggleBetweenModalsDemo2 = false</span>\n<span class="line">        }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span>Back to first<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleToggleBetweenModalsDemo1</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">visibleToggleBetweenModalsDemo2</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="change-animation" tabindex="-1">Change animation <a class="anchor-link" href="#change-animation" aria-hidden="true">#</a></h3><p>The variable <code>$modal-fade-transform</code> determines the transform state of React Modal component before the modal fade-in animation, whereas the variable <code>$modal-show-transform</code> determines the transform state of Modal component after the modal fade-in animation. If you want a zoom-in animation, for example, set <code>$modal-fade-transform: scale(.8)</code>.</p><h3 id="remove-animation" tabindex="-1">Remove animation <a class="anchor-link" href="#remove-animation" aria-hidden="true">#</a></h3><p>For modals that simply appear rather than fade into view, set <code>transition</code> to <code>false</code>.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> <span class="token attr-name">transition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{false}</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h3><p>Be sure to add <code>aria-labelledby=&quot;...&quot;</code>, referencing the modal title, to <code>&lt;CModal /&gt;</code> Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>&lt;CModal&gt;</code>. Note that you don’t need to add <code>role=&quot;dialog</code> since we already add it.</p><h2 id="optional-sizes" tabindex="-1">Optional sizes <a class="anchor-link" href="#optional-sizes" aria-hidden="true">#</a></h2><p>Modals have three optional sizes, available via modifier classes to be placed on a <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</p><table class="table"><thead><tr><th>Size</th><th>Property size</th><th>Modal max-width</th></tr></thead><tbody><tr><td>Small</td><td><code>&#39;sm&#39;</code></td><td><code>300px</code></td></tr><tr><td>Default</td><td class="text-body-secondary">None</td><td><code>500px</code></td></tr><tr><td>Large</td><td><code>&#39;lg&#39;</code></td><td><code>800px</code></td></tr><tr><td>Extra large</td><td><code>&#39;xl&#39;</code></td><td><code>1140px</code></td></tr></tbody></table>', 11);
+const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleToggleBetweenModalsDemo1 = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Open first modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleToggleBetweenModalsDemo1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleToggleBetweenModalsDemo1 = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal 1 title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Show a second modal and hide this one with the button below.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> </span>\n<span class="line">        <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { </span>\n<span class="line">          visibleToggleBetweenModalsDemo1 = false</span>\n<span class="line">          visibleToggleBetweenModalsDemo2 = true</span>\n<span class="line">        }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span>Open second modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleToggleBetweenModalsDemo2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {</span>\n<span class="line">      visibleToggleBetweenModalsDemo1 = true</span>\n<span class="line">      visibleToggleBetweenModalsDemo2 = false</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ToggleBetweenModalsExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal 2 title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Hide this modal and show the first with the button below.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> </span>\n<span class="line">        <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { </span>\n<span class="line">          visibleToggleBetweenModalsDemo1 = true</span>\n<span class="line">          visibleToggleBetweenModalsDemo2 = false</span>\n<span class="line">        }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span>Back to first<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleToggleBetweenModalsDemo1</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">visibleToggleBetweenModalsDemo2</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="change-animation" tabindex="-1">Change animation <a class="anchor-link" href="#change-animation" aria-hidden="true">#</a></h3><p>The variable <code>$modal-fade-transform</code> determines the transform state of React Modal component before the modal fade-in animation, whereas the variable <code>$modal-show-transform</code> determines the transform state of Modal component after the modal fade-in animation. If you want a zoom-in animation, for example, set <code>$modal-fade-transform: scale(.8)</code>.</p><h3 id="remove-animation" tabindex="-1">Remove animation <a class="anchor-link" href="#remove-animation" aria-hidden="true">#</a></h3><p>For modals that simply appear rather than fade into view, set <code>transition</code> to <code>false</code>.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span> <span class="token attr-name">transition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{false}</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h3><p>Be sure to add <code>aria-labelledby=&quot;...&quot;</code>, referencing the modal title, to <code>&lt;CModal /&gt;</code> Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>&lt;CModal&gt;</code>. Note that you don’t need to add <code>role=&quot;dialog</code> since we already add it.</p><h2 id="optional-sizes" tabindex="-1">Optional sizes <a class="anchor-link" href="#optional-sizes" aria-hidden="true">#</a></h2><p>Modals have three optional sizes, available via modifier classes to be placed on a <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</p><table class="table"><thead><tr><th>Size</th><th>Property size</th><th>Modal max-width</th></tr></thead><tbody><tr><td>Small</td><td><code>&#39;sm&#39;</code></td><td><code>300px</code></td></tr><tr><td>Default</td><td class="text-body-secondary">None</td><td><code>500px</code></td></tr><tr><td>Large</td><td><code>&#39;lg&#39;</code></td><td><code>800px</code></td></tr><tr><td>Extra large</td><td><code>&#39;xl&#39;</code></td><td><code>1140px</code></td></tr></tbody></table>', 11);
 const _hoisted_86 = { class: "docs-example rounded-top p-4" };
-const _hoisted_87 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { xlDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Extra large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { lgDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { smDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xlDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { xlDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Extra large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lgDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { lgDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>smDemo<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { smDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">xlDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">lgDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">smDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="fullscreen-modal" tabindex="-1">Fullscreen Modal <a class="anchor-link" href="#fullscreen-modal" aria-hidden="true">#</a></h2><p>Another override is the option to pop up a modal that covers the user viewport, available via property <code>fullscreen</code>.</p><table class="table"><thead><tr><th>Property fullscreen</th><th>Availability</th></tr></thead><tbody><tr><td><code>true</code></td><td>Always</td></tr><tr><td><code>&#39;sm&#39;</code></td><td>Below <code>576px</code></td></tr><tr><td><code>&#39;md&#39;</code></td><td>Below <code>768px</code></td></tr><tr><td><code>&#39;lg&#39;</code></td><td>Below <code>992px</code></td></tr><tr><td><code>&#39;xl&#39;</code></td><td>Below <code>1200px</code></td></tr><tr><td><code>&#39;xxl&#39;</code></td><td>Below <code>1400px</code></td></tr></tbody></table>', 4);
+const _hoisted_87 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { xlDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Extra large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { lgDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { smDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xlDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { xlDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Extra large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lgDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { lgDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>smDemo<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { smDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>OptionalSizesExample3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">xlDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">lgDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">smDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="fullscreen-modal" tabindex="-1">Fullscreen Modal <a class="anchor-link" href="#fullscreen-modal" aria-hidden="true">#</a></h2><p>Another override is the option to pop up a modal that covers the user viewport, available via property <code>fullscreen</code>.</p><table class="table"><thead><tr><th>Property fullscreen</th><th>Availability</th></tr></thead><tbody><tr><td><code>true</code></td><td>Always</td></tr><tr><td><code>&#39;sm&#39;</code></td><td>Below <code>576px</code></td></tr><tr><td><code>&#39;md&#39;</code></td><td>Below <code>768px</code></td></tr><tr><td><code>&#39;lg&#39;</code></td><td>Below <code>992px</code></td></tr><tr><td><code>&#39;xl&#39;</code></td><td>Below <code>1200px</code></td></tr><tr><td><code>&#39;xxl&#39;</code></td><td>Below <code>1400px</code></td></tr></tbody></table>', 4);
 const _hoisted_91 = { class: "docs-example rounded-top p-4" };
-const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenSmDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenMdDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below md<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenLgDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below lg<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXlDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXxlDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xxl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenSmDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenSmDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenMdDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenMdDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below md<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenLgDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenLgDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample4<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below lg<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenXlDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXlDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample5<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenXxlDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXxlDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xxl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">fullscreenDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenSmDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenMdDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenLgDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenXlDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenXxlDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue modals use local CSS variables on <code>.modal</code> and <code>.modal-backdrop</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_96 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CModal <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CModal<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenSmDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenMdDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below md<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenLgDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below lg<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXlDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXxlDemo = true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xxl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenSmDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenSmDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below sm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenMdDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenMdDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below md<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenLgDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenLgDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample4<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below lg<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenXlDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXlDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample5<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModal</span></span>\n<span class="line">    <span class="token attr-name">fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fullscreenXxlDemo<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { fullscreenXxlDemo = false }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalTitle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>FullscreenExample6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Full screen below xxl<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      ...</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModalBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CModal</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">fullscreenDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenSmDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenMdDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenLgDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenXlDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">fullscreenXxlDemo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue modals use local CSS variables on <code>.modal</code> and <code>.modal-backdrop</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_96 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CModal <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CModal<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
 const _hoisted_99 = /* @__PURE__ */ createBaseVNode("h3", {
   id: "sass-loops",
   tabindex: "-1"
@@ -137,7 +137,7 @@ const _hoisted_100 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, "scss/_modal.scss"),
   /* @__PURE__ */ createTextVNode(".")
 ], -1);
-const _hoisted_101 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModal <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModal&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Align the modal in the center or top of the screen.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;center&#39;</code></td><td>&#39;top&#39;</td></tr><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>content-class-name</strong></td><td>A string of all className you want applied to the modal content component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>focus</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Puts the focus on the modal when shown.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>fullscreen</strong></td><td>Set modal to covers the entire user viewport</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the modal when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>scrollable</strong></td><td>Create a scrollable modal that allows scrolling the modal body.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Remove animation to create modal that simply appear rather than fade in to view.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>unmount-on-close</strong></td><td>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>close-prevented</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</td><td></td></tr></tbody></table><h3 id="cmodalheader" tabindex="-1">CModalHeader <a class="anchor-link" href="#cmodalheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Add a close button component to the header.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h3 id="cmodaltitle" tabindex="-1">CModalTitle <a class="anchor-link" href="#cmodaltitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 15);
+const _hoisted_101 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModal <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModal&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>alignment</strong></td><td>Align the modal in the center or top of the screen.</td><td>string</td><td><code>&#39;top&#39;</code>, <code>&#39;center&#39;</code></td><td>&#39;top&#39;</td></tr><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>content-class-name</strong></td><td>A string of all className you want applied to the modal content component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>focus</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Puts the focus on the modal when shown.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>fullscreen</strong></td><td>Set modal to covers the entire user viewport</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the modal when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>scrollable</strong></td><td>Create a scrollable modal that allows scrolling the modal body.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Remove animation to create modal that simply appear rather than fade in to view.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>unmount-on-close</strong></td><td>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of alert component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>close-prevented</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</td><td></td></tr></tbody></table><h3 id="cmodalheader" tabindex="-1">CModalHeader <a class="anchor-link" href="#cmodalheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Add a close button component to the header.</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h3 id="cmodaltitle" tabindex="-1">CModalTitle <a class="anchor-link" href="#cmodaltitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CModalTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CModalTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/modal/CModalTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 15);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CModalTitle = resolveComponent("CModalTitle");
   const _component_CModalHeader = resolveComponent("CModalHeader");
diff --git a/vue/docs/assets/multi-select.html-Cj9cgsAk.js b/vue/docs/assets/multi-select.html-Cj9cgsAk.js
deleted file mode 100644
index ae0e5824126..00000000000
--- a/vue/docs/assets/multi-select.html-Cj9cgsAk.js
+++ /dev/null
@@ -1,434 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode, t as toDisplayString } from "./app-Dv803XR0.js";
-import { c as cifDe, a as cifEs, b as cifGb, d as cifPl, e as cifUs } from "./cif-us-C2ywU_oW.js";
-const _sfc_main = {
-  data: () => {
-    return {
-      cities: [
-        {
-          label: "United States",
-          code: "us",
-          options: [
-            {
-              value: "au",
-              label: "Austin"
-            },
-            {
-              value: "ch",
-              label: "Chicago"
-            },
-            {
-              value: "la",
-              label: "Los Angeles"
-            },
-            {
-              value: "ny",
-              label: "New York"
-            },
-            {
-              value: "sa",
-              label: "San Jose"
-            }
-          ]
-        },
-        {
-          label: "United Kingdom",
-          code: "gb",
-          options: [
-            {
-              value: "li",
-              label: "Liverpool"
-            },
-            {
-              value: "lo",
-              label: "London"
-            },
-            {
-              value: "ma",
-              label: "Manchester"
-            }
-          ]
-        }
-      ],
-      countries: [
-        {
-          value: "pl",
-          label: "Poland"
-        },
-        {
-          value: "de",
-          label: "Germany"
-        },
-        {
-          value: "us",
-          label: "United States"
-        },
-        {
-          value: "es",
-          label: "Spain"
-        },
-        {
-          value: "gb",
-          label: "United Kingdom"
-        }
-      ],
-      flags: {
-        de: cifDe,
-        es: cifEs,
-        gb: cifGb,
-        pl: cifPl,
-        us: cifUs
-      },
-      loading: false,
-      options: [
-        {
-          value: 0,
-          label: "Angular"
-        },
-        {
-          value: 1,
-          label: "Bootstrap"
-        },
-        {
-          value: 2,
-          label: "React.js"
-        },
-        {
-          value: 3,
-          label: "Vue.js"
-        },
-        {
-          label: "backend",
-          options: [
-            {
-              value: 4,
-              label: "Django"
-            },
-            {
-              value: 5,
-              label: "Laravel"
-            },
-            {
-              value: 6,
-              label: "Node.js"
-            }
-          ]
-        }
-      ],
-      options2: [
-        {
-          value: 0,
-          label: "Angular",
-          selected: true
-        },
-        {
-          value: 1,
-          label: "Bootstrap",
-          selected: true,
-          disabled: true
-        },
-        {
-          value: 2,
-          label: "React.js"
-        },
-        {
-          value: 3,
-          label: "Vue.js"
-        },
-        {
-          label: "backend",
-          options: [
-            {
-              value: 4,
-              label: "Django"
-            },
-            {
-              value: 5,
-              label: "Laravel",
-              selected: true
-            },
-            {
-              value: 6,
-              label: "Node.js"
-            }
-          ]
-        }
-      ],
-      users: []
-    };
-  },
-  methods: {
-    async getUsers(name = "") {
-      this.setLoading(true);
-      fetch(`https://apitest.coreui.io/demos/users?first_name=${name}`).then((response) => response.json()).then((result) => {
-        this.setLoading(false);
-        this.setUsers(
-          result.records.map((record) => {
-            return {
-              value: record.id,
-              label: record.first_name
-            };
-          })
-        );
-      });
-    },
-    setLoading(loading) {
-      this.loading = loading;
-    },
-    setUsers(users) {
-      this.users = users;
-    }
-  }
-  // mounted() {
-  //   this.getUsers()
-  // }
-};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "examples",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Examples "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "A clear demonstration of implementing a basic Vue Multi Select dropdown, highlighting essential options and configurations.", -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Framework<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select your framework.<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options2<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="modes" tabindex="-1">Modes <a class="anchor-link" href="#modes" aria-hidden="true">#</a></h2><h3 id="allow-create-options" tabindex="-1">Allow create options <a class="anchor-link" href="#allow-create-options" aria-hidden="true">#</a></h3><p>Users can create new options as well as choose from a list of pre-existing options by using the <code>allowCreateOptions</code> property in the Vue Multi Select component.</p><p>If this propety is set to <code>true</code>, the user can enter a new option in the multiselect component&#39;s search input field, and if it doesn&#39;t already exist in the list, it will be created and added there. This can be useful when the list of available options is not comprehensive or when the user needs to select an option that is not already available.</p>', 5);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">allowCreateOptions</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token operator">...</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="clear-search-on-select" tabindex="-1">Clear search on select <a class="anchor-link" href="#clear-search-on-select" aria-hidden="true">#</a></h3><p>The <code>clearSearchOnSelect</code> property is a Boolean attribute that can be used with the MultiSelect component in the CoreUI Vue library.</p><p>The MultiSelect component&#39;s search input field will be cleared as soon as the user chooses an item from the dropdown list if the property <code>clearSearchOnSelect</code> is set to <code>true</code>. This indicates that the user can instantly begin a fresh search after the search query is reset.</p><p>By default, the search input field will keep the user&#39;s search query even after an option has been picked because the value of the <code>clearSearchOnSelect</code> property is set to <code>false</code>. When a user must choose from a dropdown list several items that all match the same search term, this can be helpful.</p><p>You only need to specify the <code>clearSearchOnSelect</code> property to &#39;true&#39; or &#39;false&#39; as necessary in your code to use the MultiSelect component of the CoreUI Vue package. For example:</p>', 6);
-const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">clearSearchOnSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token operator">...</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In this example, the <code>clearSearchOnSelect</code> property is set to <code>true</code>, which means that the search input field will be cleared as soon as the user selects an option from the dropdown list.</p><h2 id="selection-types" tabindex="-1">Selection types <a class="anchor-link" href="#selection-types" aria-hidden="true">#</a></h2><p>Users can present selected items in a variety of ways by using the Vue Multi Select component. Selected things can be shown to users as a counter, tags, or a list of values separated by commas.</p><p>Use the <code>selectionType</code> property to set the presentation type to alter how the selected items are displayed.</p><h3 id="counter" tabindex="-1">Counter <a class="anchor-link" href="#counter" aria-hidden="true">#</a></h3><p>The items from the list that are chosen for the example below are counted and shown as a counter. Set the <code>selectionType</code> property to &quot;counter&quot; in order to use this option.</p><p>The <code>selectionTypeCounterText</code> property lets you set the text that appears after the counter, allowing for even more customization of the counter.</p>', 8);
-const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tags" tabindex="-1">Tags <a class="anchor-link" href="#tags" aria-hidden="true">#</a></h3><p>The <code>selectionType</code> property is set to &#39;tags&#39; by default, which causes the selected options to be shown as tags. The &quot;X&quot; button can be used to delete a selected option.</p>', 3);
-const _hoisted_31 = { class: "docs-example rounded-top p-4" };
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tags<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="text" tabindex="-1">Text <a class="anchor-link" href="#text" aria-hidden="true">#</a></h3><p>Set the <code>selectionType</code> property to &#39;&quot;text&quot;&#39; to show the list of selected options as comma-separated text values.</p>', 3);
-const _hoisted_35 = { class: "docs-example rounded-top p-4" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="single-selection" tabindex="-1">Single Selection <a class="anchor-link" href="#single-selection" aria-hidden="true">#</a></h2><p>Set the <code>multiple</code> boolean property to <code>false</code> and allow select only one element.</p>', 3);
-const _hoisted_39 = { class: "docs-example rounded-top p-4" };
-const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-options-and-options-group-labels" tabindex="-1">Custom options and options group labels <a class="anchor-link" href="#custom-options-and-options-group-labels" aria-hidden="true">#</a></h2><p>The CoreUI Vue Multi Select component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the <code>&lt;template #options=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code>, and for groups, you can use <code>&lt;template #options-groups=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code>, as demonstrated in the examples below:</p><p>By using custom templates, the CoreUI Vue Multi Select component gives users the freedom to customize the options and group labels. The <code>&lt;template #options=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code> allows for customization of options and <code>&lt;template #options-groups=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code> for groups, as shown in the following examples:</p>', 4);
-const _hoisted_44 = { class: "docs-example rounded-top p-4" };
-const _hoisted_45 = { class: "d-flex" };
-const _hoisted_46 = { class: "d-flex align-items-center" };
-const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select country<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>countries<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">optionsStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ option }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flags[option.value]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> {{option.text}}</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CMultiSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select city<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cities<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#options-groups</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ option }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flags[option.code]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> {{option.label}}</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CMultiSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> cifPl<span class="token punctuation">,</span> cifDe<span class="token punctuation">,</span> cifUs<span class="token punctuation">,</span> cifEs<span class="token punctuation">,</span> cifGb <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span></span>\n<span class="line">  <span class="token keyword">import</span> CIcon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">cities</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United States&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">&#39;us&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;au&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Austin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;ch&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Chicago&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;la&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Los Angeles&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;ny&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;New York&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;sa&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;San Jose&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United Kingdom&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">&#39;gb&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;li&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Liverpool&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;lo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;London&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;ma&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Manchester&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">countries</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;pl&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Poland&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;de&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Germany&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;us&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United States&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;es&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Spain&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;gb&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United Kingdom&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">flags</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">de</span><span class="token operator">:</span> cifDe<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">es</span><span class="token operator">:</span> cifEs<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">gb</span><span class="token operator">:</span> cifGb<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">pl</span><span class="token operator">:</span> cifPl<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">us</span><span class="token operator">:</span> cifUs</span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.</p>', 3);
-const _hoisted_50 = { class: "docs-example rounded-top p-4" };
-const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>You may also choose from small and large multi selects to match our similarly sized text inputs.</p>', 3);
-const _hoisted_54 = { class: "docs-example rounded-top p-4" };
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="external-data" tabindex="-1">External Data <a class="anchor-link" href="#external-data" aria-hidden="true">#</a></h2><p>One of the key features of Vue Multi Select component is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don&#39;t want to load all at once. To load external data into a Vue MultiSelect, you can use the Fetch API to the data source.</p><p>Here is an example of how you might use Vue Multi Select with external data:</p>', 4);
-const _hoisted_59 = { class: "docs-example rounded-top p-4" };
-const _hoisted_60 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Users<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>users<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select your user.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">virtual-scroller</span></span>\n<span class="line">    <span class="token attr-name">@show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; getUsers()<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; getUsers(value)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue multi selects use local CSS variables on <code>.form-multi-select</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CMultiSelect <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CMultiSelect<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-create-options</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Allow users to create options if they are not in the list of options.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>cleaner</strong></td><td>Enables selection cleaner element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>clear-search-on-select</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Clear current search on selecting an item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When set, the options list will have a loading style: loading spinner and reduced opacity.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>multiple</strong></td><td>It specifies that multiple options can be selected at once.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>options</strong></td><td>List of option elements.</td><td>(Option | OptionsGroup)[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>options-max-height</strong></td><td>Sets maxHeight of options list.<br><code>@default</code> &#39;auto&#39;</td><td>number|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>options-style</strong></td><td>Sets option style.<br><code>@default</code> &#39;checkbox&#39;</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the search input.<br><code>@default</code> &#39;Select...&#39;&#39;</td><td>string</td><td>-</td><td>&#39;Select...&#39;</td></tr><tr><td><strong>required</strong></td><td>When it is present, it indicates that the user must choose a value before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>search</strong></td><td>Enables search input element.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>search-no-results-label</strong></td><td>Sets the label for no results when filtering.</td><td>string</td><td>-</td><td>&#39;no items&#39;</td></tr><tr><td><strong>select-all</strong></td><td>Enables select all button.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>select-all-label</strong></td><td>Sets the select all button label.<br><code>@default</code> &#39;Select all options&#39;</td><td>string</td><td>-</td><td>&#39;Select all options&#39;</td></tr><tr><td><strong>selection-type</strong></td><td>Sets the selection style.<br><code>@default</code> &#39;tags&#39;</td><td>string</td><td><code>&#39;counter&#39;</code>, <code>&#39;tags&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;tags&#39;</td></tr><tr><td><strong>selection-type-counter-text</strong></td><td>Sets the counter selection label.<br><code>@default</code> &#39;item(s) selected&#39;</td><td>string</td><td>-</td><td>&#39;item(s) selected&#39;</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>virtual-scroller</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enable virtual scroller for the options list.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of multi select dropdown.<br><code>@default</code> false</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible-items</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Amount of visible items when virtualScroller is set to <code>true</code>.</td><td>number</td><td>-</td><td>10</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected option. [docs]</td><td></td></tr><tr><td><strong>filter-change</strong></td><td>Execute a function when the filter value changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>The callback is fired when the Multi Select component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>The callback is fired when the Multi Select component requests to be shown.</td><td></td></tr></tbody></table>', 7);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CMultiSelect = resolveComponent("CMultiSelect");
-  const _component_CCallout = resolveComponent("CCallout");
-  const _component_CIcon = resolveComponent("CIcon");
-  const _component_CCol = resolveComponent("CCol");
-  const _component_CRow = resolveComponent("CRow");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    createBaseVNode("div", _hoisted_3, [
-      createVNode(_component_CMultiSelect, {
-        label: "Framework",
-        options: _ctx.options,
-        text: "Please select your framework."
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_5, [
-      createVNode(_component_CMultiSelect, { options: _ctx.options2 }, null, 8, ["options"])
-    ]),
-    _hoisted_6,
-    createVNode(_component_CCallout, { color: "info" }, {
-      default: withCtx(() => [
-        createTextVNode(" It's worth noting that this feature may not always be appropriate, depending on the specific use case of the multiselect component. In some cases, it may be preferable to restrict the user to selecting only pre-existing options, while in other cases, allowing for the creation of new options may be essential. It's important to consider the specific requirements of your application when deciding whether to enable this feature. ")
-      ]),
-      _: 1
-    }),
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CMultiSelect, {
-        allowCreateOptions: "",
-        options: _ctx.options
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_12,
-    createBaseVNode("div", _hoisted_18, [
-      createVNode(_component_CMultiSelect, {
-        clearSearchOnSelect: "",
-        options: _ctx.options
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_19,
-    createBaseVNode("div", _hoisted_27, [
-      createVNode(_component_CMultiSelect, {
-        options: _ctx.options2,
-        selectionType: "counter"
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_28,
-    createBaseVNode("div", _hoisted_31, [
-      createVNode(_component_CMultiSelect, {
-        options: _ctx.options2,
-        selectionType: "tags"
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_32,
-    createBaseVNode("div", _hoisted_35, [
-      createVNode(_component_CMultiSelect, {
-        options: _ctx.options2,
-        selectionType: "text"
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_36,
-    createBaseVNode("div", _hoisted_39, [
-      createVNode(_component_CMultiSelect, {
-        multiple: false,
-        options: _ctx.options
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_40,
-    createBaseVNode("div", _hoisted_44, [
-      createVNode(_component_CRow, null, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, { md: 6 }, {
-            default: withCtx(() => [
-              createVNode(_component_CMultiSelect, {
-                label: "Select country",
-                options: _ctx.countries,
-                optionsStyle: "text"
-              }, {
-                options: withCtx(({ option }) => [
-                  createBaseVNode("div", _hoisted_45, [
-                    createVNode(_component_CIcon, {
-                      class: "me-3",
-                      icon: _ctx.flags[option.value],
-                      size: "xl"
-                    }, null, 8, ["icon"]),
-                    createTextVNode(" " + toDisplayString(option.text), 1)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["options"])
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: 6 }, {
-            default: withCtx(() => [
-              createVNode(_component_CMultiSelect, {
-                label: "Select city",
-                options: _ctx.cities
-              }, {
-                "options-groups": withCtx(({ option }) => [
-                  createBaseVNode("div", _hoisted_46, [
-                    createVNode(_component_CIcon, {
-                      class: "me-3",
-                      icon: _ctx.flags[option.code],
-                      size: "xl"
-                    }, null, 8, ["icon"]),
-                    createTextVNode(" " + toDisplayString(option.label), 1)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["options"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_47,
-    createBaseVNode("div", _hoisted_50, [
-      createVNode(_component_CMultiSelect, {
-        options: _ctx.options2,
-        disabled: ""
-      }, null, 8, ["options"])
-    ]),
-    _hoisted_51,
-    createBaseVNode("div", _hoisted_54, [
-      createVNode(_component_CRow, null, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, {
-            md: 6,
-            class: "mb-3"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CMultiSelect, {
-                options: _ctx.options,
-                selectionType: "counter",
-                size: "lg"
-              }, null, 8, ["options"])
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, {
-            md: 6,
-            class: "mb-3"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CMultiSelect, {
-                options: _ctx.options,
-                size: "lg"
-              }, null, 8, ["options"])
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: 6 }, {
-            default: withCtx(() => [
-              createVNode(_component_CMultiSelect, {
-                options: _ctx.options,
-                selectionType: "counter",
-                size: "sm"
-              }, null, 8, ["options"])
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: 6 }, {
-            default: withCtx(() => [
-              createVNode(_component_CMultiSelect, {
-                options: _ctx.options,
-                size: "sm"
-              }, null, 8, ["options"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_55,
-    createBaseVNode("div", _hoisted_59, [
-      createVNode(_component_CMultiSelect, {
-        label: "Users",
-        loading: _ctx.loading,
-        options: _ctx.users,
-        text: "Please select your user.",
-        "virtual-scroller": "",
-        onShow: _cache[0] || (_cache[0] = () => $options.getUsers()),
-        onFilterChange: _cache[1] || (_cache[1] = (value) => $options.getUsers(value))
-      }, null, 8, ["loading", "options"])
-    ]),
-    _hoisted_60,
-    createVNode(_component_ScssDocs, {
-      file: "forms/_form-multi-select.scss",
-      capture: "form-multi-select-css-vars"
-    }),
-    _hoisted_64,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-multi-select-variables"
-    }),
-    _hoisted_67
-  ]);
-}
-const multiSelect_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "multi-select.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/multi-select.html","title":"Vue Multi Select","lang":"en-US","frontmatter":{"title":"Vue Multi Select","description":"Customize the native <select>s with a powerful Vue Multi Select component that changes the element’s initial appearance and brings some new functionalities.","other_frameworks":"multi-select","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/multi-select.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[]},{"level":2,"title":"Modes","slug":"modes","link":"#modes","children":[{"level":3,"title":"Allow create options","slug":"allow-create-options","link":"#allow-create-options","children":[]},{"level":3,"title":"Clear search on select","slug":"clear-search-on-select","link":"#clear-search-on-select","children":[]}]},{"level":2,"title":"Selection types","slug":"selection-types","link":"#selection-types","children":[{"level":3,"title":"Counter","slug":"counter","link":"#counter","children":[]},{"level":3,"title":"Tags","slug":"tags","link":"#tags","children":[]},{"level":3,"title":"Text","slug":"text","link":"#text","children":[]}]},{"level":2,"title":"Single Selection","slug":"single-selection","link":"#single-selection","children":[]},{"level":2,"title":"Custom options and options group labels","slug":"custom-options-and-options-group-labels","link":"#custom-options-and-options-group-labels","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"External Data","slug":"external-data","link":"#external-data","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CMultiSelect","slug":"cmultiselect","link":"#cmultiselect","children":[]}]}],"filePathRelative":"forms/multi-select.md"}');
-export {
-  multiSelect_html as comp,
-  data
-};
diff --git a/vue/docs/assets/multi-select.html-DP6UryqG.js b/vue/docs/assets/multi-select.html-DP6UryqG.js
new file mode 100644
index 00000000000..7ff7b1a32a3
--- /dev/null
+++ b/vue/docs/assets/multi-select.html-DP6UryqG.js
@@ -0,0 +1,539 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode, t as toDisplayString } from "./app-BoHWg5jI.js";
+import { c as cifDe, a as cifEs, b as cifGb, d as cifPl, e as cifUs } from "./cif-us-C2ywU_oW.js";
+const _sfc_main = {
+  data: () => {
+    return {
+      cities: [
+        {
+          label: "United States",
+          code: "us",
+          options: [
+            {
+              value: "au",
+              label: "Austin"
+            },
+            {
+              value: "ch",
+              label: "Chicago"
+            },
+            {
+              value: "la",
+              label: "Los Angeles"
+            },
+            {
+              value: "ny",
+              label: "New York"
+            },
+            {
+              value: "sa",
+              label: "San Jose"
+            }
+          ]
+        },
+        {
+          label: "United Kingdom",
+          code: "gb",
+          options: [
+            {
+              value: "li",
+              label: "Liverpool"
+            },
+            {
+              value: "lo",
+              label: "London"
+            },
+            {
+              value: "ma",
+              label: "Manchester"
+            }
+          ]
+        }
+      ],
+      cities2: [],
+      countries: [
+        {
+          value: "pl",
+          label: "Poland"
+        },
+        {
+          value: "de",
+          label: "Germany"
+        },
+        {
+          value: "us",
+          label: "United States"
+        },
+        {
+          value: "es",
+          label: "Spain"
+        },
+        {
+          value: "gb",
+          label: "United Kingdom"
+        }
+      ],
+      countries2: [
+        {
+          value: "pl",
+          label: "Poland",
+          cities: [
+            { value: "warszawa", label: "Warszawa" },
+            { value: "krakow", label: "Kraków" },
+            { value: "lodz", label: "Łódź" },
+            { value: "wroclaw", label: "Wrocław" },
+            { value: "poznan", label: "Poznań" }
+          ]
+        },
+        {
+          value: "de",
+          label: "Germany",
+          cities: [
+            { value: "berlin", label: "Berlin" },
+            { value: "hamburg", label: "Hamburg" },
+            { value: "munich", label: "Munich" },
+            { value: "cologne", label: "Cologne" },
+            { value: "frankfurt", label: "Frankfurt" }
+          ]
+        },
+        {
+          value: "us",
+          label: "United States",
+          cities: [
+            { value: "new_york", label: "New York" },
+            { value: "los_angeles", label: "Los Angeles" },
+            { value: "chicago", label: "Chicago" },
+            { value: "houston", label: "Houston" },
+            { value: "phoenix", label: "Phoenix" }
+          ]
+        },
+        {
+          value: "es",
+          label: "Spain",
+          cities: [
+            { value: "madrid", label: "Madrid" },
+            { value: "barcelona", label: "Barcelona" },
+            { value: "valencia", label: "Valencia" },
+            { value: "seville", label: "Seville" },
+            { value: "zaragoza", label: "Zaragoza" }
+          ]
+        },
+        {
+          value: "gb",
+          label: "United Kingdom",
+          cities: [
+            { value: "london", label: "London" },
+            { value: "birmingham", label: "Birmingham" },
+            { value: "manchester", label: "Manchester" },
+            { value: "glasgow", label: "Glasgow" },
+            { value: "liverpool", label: "Liverpool" }
+          ]
+        }
+      ],
+      flags: {
+        de: cifDe,
+        es: cifEs,
+        gb: cifGb,
+        pl: cifPl,
+        us: cifUs
+      },
+      loading: false,
+      options: [
+        {
+          value: 0,
+          label: "Angular"
+        },
+        {
+          value: 1,
+          label: "Bootstrap"
+        },
+        {
+          value: 2,
+          label: "React.js"
+        },
+        {
+          value: 3,
+          label: "Vue.js"
+        },
+        {
+          label: "backend",
+          options: [
+            {
+              value: 4,
+              label: "Django"
+            },
+            {
+              value: 5,
+              label: "Laravel"
+            },
+            {
+              value: 6,
+              label: "Node.js"
+            }
+          ]
+        }
+      ],
+      options2: [
+        {
+          value: 0,
+          label: "Angular",
+          selected: true
+        },
+        {
+          value: 1,
+          label: "Bootstrap",
+          selected: true,
+          disabled: true
+        },
+        {
+          value: 2,
+          label: "React.js"
+        },
+        {
+          value: 3,
+          label: "Vue.js"
+        },
+        {
+          label: "backend",
+          options: [
+            {
+              value: 4,
+              label: "Django"
+            },
+            {
+              value: 5,
+              label: "Laravel",
+              selected: true
+            },
+            {
+              value: 6,
+              label: "Node.js"
+            }
+          ]
+        }
+      ],
+      users: []
+    };
+  },
+  methods: {
+    async getUsers(name = "") {
+      this.setLoading(true);
+      fetch(`https://apitest.coreui.io/demos/users?first_name=${name}`).then((response) => response.json()).then((result) => {
+        this.setLoading(false);
+        this.setUsers(
+          result.records.map((record) => {
+            return {
+              value: record.id,
+              label: record.first_name
+            };
+          })
+        );
+      });
+    },
+    setCities(cities) {
+      this.cities2 = cities;
+    },
+    setLoading(loading) {
+      this.loading = loading;
+    },
+    setUsers(users) {
+      this.users = users;
+    }
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "A clear demonstration of implementing a basic Vue Multi Select dropdown, highlighting essential options and configurations.", -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Framework<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select your framework.<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_5 = { class: "docs-example rounded-top p-4" };
+const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options2<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="modes" tabindex="-1">Modes <a class="anchor-link" href="#modes" aria-hidden="true">#</a></h2><h3 id="allow-create-options" tabindex="-1">Allow create options <a class="anchor-link" href="#allow-create-options" aria-hidden="true">#</a></h3><p>Users can create new options as well as choose from a list of pre-existing options by using the <code>allowCreateOptions</code> property in the Vue Multi Select component.</p><p>If this propety is set to <code>true</code>, the user can enter a new option in the multiselect component&#39;s search input field, and if it doesn&#39;t already exist in the list, it will be created and added there. This can be useful when the list of available options is not comprehensive or when the user needs to select an option that is not already available.</p>', 5);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">allowCreateOptions</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token operator">...</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="clear-search-on-select" tabindex="-1">Clear search on select <a class="anchor-link" href="#clear-search-on-select" aria-hidden="true">#</a></h3><p>The <code>clearSearchOnSelect</code> property is a Boolean attribute that can be used with the MultiSelect component in the CoreUI Vue library.</p><p>The MultiSelect component&#39;s search input field will be cleared as soon as the user chooses an item from the dropdown list if the property <code>clearSearchOnSelect</code> is set to <code>true</code>. This indicates that the user can instantly begin a fresh search after the search query is reset.</p><p>By default, the search input field will keep the user&#39;s search query even after an option has been picked because the value of the <code>clearSearchOnSelect</code> property is set to <code>false</code>. When a user must choose from a dropdown list several items that all match the same search term, this can be helpful.</p><p>You only need to specify the <code>clearSearchOnSelect</code> property to &#39;true&#39; or &#39;false&#39; as necessary in your code to use the MultiSelect component of the CoreUI Vue package. For example:</p>', 6);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">clearSearchOnSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token operator">...</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In this example, the <code>clearSearchOnSelect</code> property is set to <code>true</code>, which means that the search input field will be cleared as soon as the user selects an option from the dropdown list.</p><h2 id="selection-types" tabindex="-1">Selection types <a class="anchor-link" href="#selection-types" aria-hidden="true">#</a></h2><p>Users can present selected items in a variety of ways by using the Vue Multi Select component. Selected things can be shown to users as a counter, tags, or a list of values separated by commas.</p><p>Use the <code>selectionType</code> property to set the presentation type to alter how the selected items are displayed.</p><h3 id="counter" tabindex="-1">Counter <a class="anchor-link" href="#counter" aria-hidden="true">#</a></h3><p>The items from the list that are chosen for the example below are counted and shown as a counter. Set the <code>selectionType</code> property to &quot;counter&quot; in order to use this option.</p><p>The <code>selectionTypeCounterText</code> property lets you set the text that appears after the counter, allowing for even more customization of the counter.</p>', 8);
+const _hoisted_27 = { class: "docs-example rounded-top p-4" };
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tags" tabindex="-1">Tags <a class="anchor-link" href="#tags" aria-hidden="true">#</a></h3><p>The <code>selectionType</code> property is set to &#39;tags&#39; by default, which causes the selected options to be shown as tags. The &quot;X&quot; button can be used to delete a selected option.</p>', 3);
+const _hoisted_31 = { class: "docs-example rounded-top p-4" };
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tags<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="text" tabindex="-1">Text <a class="anchor-link" href="#text" aria-hidden="true">#</a></h3><p>Set the <code>selectionType</code> property to &#39;&quot;text&quot;&#39; to show the list of selected options as comma-separated text values.</p>', 3);
+const _hoisted_35 = { class: "docs-example rounded-top p-4" };
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="single-selection" tabindex="-1">Single Selection <a class="anchor-link" href="#single-selection" aria-hidden="true">#</a></h2><p>Set the <code>multiple</code> boolean property to <code>false</code> and allow select only one element.</p>', 3);
+const _hoisted_39 = { class: "docs-example rounded-top p-4" };
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-options-and-options-group-labels" tabindex="-1">Custom options and options group labels <a class="anchor-link" href="#custom-options-and-options-group-labels" aria-hidden="true">#</a></h2><p>The CoreUI Vue Multi Select component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the <code>&lt;template #options=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code>, and for groups, you can use <code>&lt;template #options-groups=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code>, as demonstrated in the examples below:</p><p>By using custom templates, the CoreUI Vue Multi Select component gives users the freedom to customize the options and group labels. The <code>&lt;template #options=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code> allows for customization of options and <code>&lt;template #options-groups=&quot;{ option }&quot;&gt;...&lt;/template&gt;</code> for groups, as shown in the following examples:</p>', 4);
+const _hoisted_44 = { class: "docs-example rounded-top p-4" };
+const _hoisted_45 = { class: "d-flex" };
+const _hoisted_46 = { class: "d-flex align-items-center" };
+const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select country<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>countries<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">optionsStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ option }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flags[option.value]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> {{option.text}}</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CMultiSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select city<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cities<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#options-groups</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ option }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flags[option.code]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> {{option.label}}</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CMultiSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> cifPl<span class="token punctuation">,</span> cifDe<span class="token punctuation">,</span> cifUs<span class="token punctuation">,</span> cifEs<span class="token punctuation">,</span> cifGb <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span></span>\n<span class="line">  <span class="token keyword">import</span> CIcon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">cities</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United States&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">&#39;us&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;au&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Austin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;ch&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Chicago&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;la&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Los Angeles&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;ny&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;New York&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;sa&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;San Jose&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United Kingdom&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">&#39;gb&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;li&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Liverpool&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;lo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;London&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;ma&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Manchester&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">countries</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;pl&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Poland&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;de&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Germany&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;us&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United States&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;es&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Spain&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;gb&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United Kingdom&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">flags</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">de</span><span class="token operator">:</span> cifDe<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">es</span><span class="token operator">:</span> cifEs<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">gb</span><span class="token operator">:</span> cifGb<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">pl</span><span class="token operator">:</span> cifPl<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">us</span><span class="token operator">:</span> cifUs</span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="coordinated-selection" tabindex="-1">Coordinated selection <a class="anchor-link" href="#coordinated-selection" aria-hidden="true">#</a></h2><p>The selection of Vue select components can be coordinated by dynamically updating city options based on the selected country. Use the <code>resetSelectionOnOptionsChange</code> prop on the city select component to reset the selected city whenever the country changes, ensuring synchronized selections.</p>', 3);
+const _hoisted_50 = { class: "docs-example rounded-top p-4" };
+const _hoisted_51 = { class: "d-flex" };
+const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select country<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>countries2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">optionsStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(country) =&gt; setCities(country.length ? country[0].cities : [])<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ option }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flags[option.value]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> {{ option.label }}</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CMultiSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select city<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cities2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">optionsStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">resetSelectionOnOptionsChange</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> cifPl<span class="token punctuation">,</span> cifDe<span class="token punctuation">,</span> cifUs<span class="token punctuation">,</span> cifEs<span class="token punctuation">,</span> cifGb <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons&#39;</span></span>\n<span class="line">  <span class="token keyword">import</span> CIcon <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">cities2</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">countries2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;pl&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Poland&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">cities</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;warszawa&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Warszawa&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;krakow&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Kraków&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;lodz&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Łódź&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;wroclaw&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Wrocław&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;poznan&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Poznań&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">            <span class="token punctuation">]</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;de&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Germany&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">cities</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;berlin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Berlin&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;hamburg&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Hamburg&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;munich&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Munich&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;cologne&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Cologne&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;frankfurt&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Frankfurt&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">            <span class="token punctuation">]</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;us&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United States&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">cities</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;new_york&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;New York&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;los_angeles&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Los Angeles&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;chicago&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Chicago&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;houston&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Houston&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;phoenix&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Phoenix&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">            <span class="token punctuation">]</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;es&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Spain&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">cities</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;madrid&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Madrid&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;barcelona&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Barcelona&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;valencia&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Valencia&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;seville&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Seville&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;zaragoza&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Zaragoza&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">            <span class="token punctuation">]</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;gb&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;United Kingdom&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">cities</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;london&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;London&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;birmingham&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Birmingham&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;manchester&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Manchester&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;glasgow&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Glasgow&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;liverpool&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Liverpool&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">            <span class="token punctuation">]</span></span>\n<span class="line">          <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">flags</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">de</span><span class="token operator">:</span> cifDe<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">es</span><span class="token operator">:</span> cifEs<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">gb</span><span class="token operator">:</span> cifGb<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">pl</span><span class="token operator">:</span> cifPl<span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">us</span><span class="token operator">:</span> cifUs</span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">setCities</span><span class="token punctuation">(</span><span class="token parameter">cities</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>cities2 <span class="token operator">=</span> cities</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.</p>', 3);
+const _hoisted_55 = { class: "docs-example rounded-top p-4" };
+const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>You may also choose from small and large multi selects to match our similarly sized text inputs.</p>', 3);
+const _hoisted_59 = { class: "docs-example rounded-top p-4" };
+const _hoisted_60 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selectionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Angular&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bootstrap&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;React.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Vue.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;backend&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Django&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Laravel&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Node.js&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="external-data" tabindex="-1">External Data <a class="anchor-link" href="#external-data" aria-hidden="true">#</a></h2><p>One of the key features of Vue Multi Select component is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don&#39;t want to load all at once. To load external data into a Vue MultiSelect, you can use the Fetch API to the data source.</p><p>Here is an example of how you might use Vue Multi Select with external data:</p>', 4);
+const _hoisted_64 = { class: "docs-example rounded-top p-4" };
+const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CMultiSelect</span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Users<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>users<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select your user.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">virtual-scroller</span></span>\n<span class="line">    <span class="token attr-name">@show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; getUsers()<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; getUsers(value)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue multi selects use local CSS variables on <code>.form-multi-select</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_69 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CMultiSelect <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CMultiSelect<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_72 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CMultiSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/multi-select/CMultiSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-create-options</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Allow users to create options if they are not in the list of options.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>cleaner</strong></td><td>Enables selection cleaner element.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>clear-search-on-select</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Clear current search on selecting an item.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>Set the id attribute for the native select element.<br><br><strong>[Deprecated since v5.3.0]</strong> The name attribute for the native select element is generated based on the <code>id</code> property:<br>- <code>&lt;select name=&quot;\\{id\\}-multi-select&quot; /&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When set, the options list will have a loading style: loading spinner and reduced opacity.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>multiple</strong></td><td>It specifies that multiple options can be selected at once.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>The name attribute for the select element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>List of option elements.</td><td>(Option | OptionsGroup)[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>options-max-height</strong></td><td>Sets maxHeight of options list.<br><code>@default</code> &#39;auto&#39;</td><td>number|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>options-style</strong></td><td>Sets option style.<br><code>@default</code> &#39;checkbox&#39;</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the search input.<br><code>@default</code> &#39;Select...&#39;&#39;</td><td>string</td><td>-</td><td>&#39;Select...&#39;</td></tr><tr><td><strong>required</strong></td><td>When it is present, it indicates that the user must choose a value before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>reset-selection-on-options-change</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>Determines whether the selected options should be cleared when the options list is updated. When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>search</strong></td><td>Enables search input element.</td><td>boolean|string</td><td>-</td><td>true</td></tr><tr><td><strong>search-no-results-label</strong></td><td>Sets the label for no results when filtering.</td><td>string</td><td>-</td><td>&#39;no items&#39;</td></tr><tr><td><strong>select-all</strong></td><td>Enables select all button.<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>select-all-label</strong></td><td>Sets the select all button label.<br><code>@default</code> &#39;Select all options&#39;</td><td>string</td><td>-</td><td>&#39;Select all options&#39;</td></tr><tr><td><strong>selection-type</strong></td><td>Sets the selection style.<br><code>@default</code> &#39;tags&#39;</td><td>string</td><td><code>&#39;counter&#39;</code>, <code>&#39;tags&#39;</code>, <code>&#39;text&#39;</code></td><td>&#39;tags&#39;</td></tr><tr><td><strong>selection-type-counter-text</strong></td><td>Sets the counter selection label.<br><code>@default</code> &#39;item(s) selected&#39;</td><td>string</td><td>-</td><td>&#39;item(s) selected&#39;</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>virtual-scroller</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enable virtual scroller for the options list.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of multi select dropdown.<br><code>@default</code> false</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible-items</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Amount of visible items when virtualScroller is set to <code>true</code>.</td><td>number</td><td>-</td><td>10</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected option. [docs]</td><td></td></tr><tr><td><strong>filter-change</strong></td><td>Execute a function when the filter value changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>The callback is fired when the Multi Select component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>The callback is fired when the Multi Select component requests to be shown.</td><td></td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CMultiSelect = resolveComponent("CMultiSelect");
+  const _component_CCallout = resolveComponent("CCallout");
+  const _component_CIcon = resolveComponent("CIcon");
+  const _component_CCol = resolveComponent("CCol");
+  const _component_CRow = resolveComponent("CRow");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CMultiSelect, {
+        label: "Framework",
+        options: _ctx.options,
+        text: "Please select your framework."
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_5, [
+      createVNode(_component_CMultiSelect, { options: _ctx.options2 }, null, 8, ["options"])
+    ]),
+    _hoisted_6,
+    createVNode(_component_CCallout, { color: "info" }, {
+      default: withCtx(() => [
+        createTextVNode(" It's worth noting that this feature may not always be appropriate, depending on the specific use case of the multiselect component. In some cases, it may be preferable to restrict the user to selecting only pre-existing options, while in other cases, allowing for the creation of new options may be essential. It's important to consider the specific requirements of your application when deciding whether to enable this feature. ")
+      ]),
+      _: 1
+    }),
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CMultiSelect, {
+        allowCreateOptions: "",
+        options: _ctx.options
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CMultiSelect, {
+        clearSearchOnSelect: "",
+        options: _ctx.options
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_27, [
+      createVNode(_component_CMultiSelect, {
+        options: _ctx.options2,
+        selectionType: "counter"
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_28,
+    createBaseVNode("div", _hoisted_31, [
+      createVNode(_component_CMultiSelect, {
+        options: _ctx.options2,
+        selectionType: "tags"
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_35, [
+      createVNode(_component_CMultiSelect, {
+        options: _ctx.options2,
+        selectionType: "text"
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_36,
+    createBaseVNode("div", _hoisted_39, [
+      createVNode(_component_CMultiSelect, {
+        multiple: false,
+        options: _ctx.options
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_40,
+    createBaseVNode("div", _hoisted_44, [
+      createVNode(_component_CRow, null, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                label: "Select country",
+                options: _ctx.countries,
+                optionsStyle: "text"
+              }, {
+                options: withCtx(({ option }) => [
+                  createBaseVNode("div", _hoisted_45, [
+                    createVNode(_component_CIcon, {
+                      class: "me-3",
+                      icon: _ctx.flags[option.value],
+                      size: "xl"
+                    }, null, 8, ["icon"]),
+                    createTextVNode(" " + toDisplayString(option.text), 1)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["options"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                label: "Select city",
+                options: _ctx.cities
+              }, {
+                "options-groups": withCtx(({ option }) => [
+                  createBaseVNode("div", _hoisted_46, [
+                    createVNode(_component_CIcon, {
+                      class: "me-3",
+                      icon: _ctx.flags[option.code],
+                      size: "xl"
+                    }, null, 8, ["icon"]),
+                    createTextVNode(" " + toDisplayString(option.label), 1)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["options"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_47,
+    createBaseVNode("div", _hoisted_50, [
+      createVNode(_component_CRow, null, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                label: "Select country",
+                multiple: false,
+                options: _ctx.countries2,
+                optionsStyle: "text",
+                onChange: _cache[0] || (_cache[0] = (country) => $options.setCities(country.length ? country[0].cities : []))
+              }, {
+                options: withCtx(({ option }) => [
+                  createBaseVNode("div", _hoisted_51, [
+                    createVNode(_component_CIcon, {
+                      class: "me-3",
+                      icon: _ctx.flags[option.value],
+                      size: "xl"
+                    }, null, 8, ["icon"]),
+                    createTextVNode(" " + toDisplayString(option.label), 1)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["options"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                label: "Select city",
+                multiple: false,
+                options: _ctx.cities2,
+                optionsStyle: "text",
+                resetSelectionOnOptionsChange: ""
+              }, null, 8, ["options"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_52,
+    createBaseVNode("div", _hoisted_55, [
+      createVNode(_component_CMultiSelect, {
+        options: _ctx.options2,
+        disabled: ""
+      }, null, 8, ["options"])
+    ]),
+    _hoisted_56,
+    createBaseVNode("div", _hoisted_59, [
+      createVNode(_component_CRow, null, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, {
+            md: 6,
+            class: "mb-3"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                options: _ctx.options,
+                selectionType: "counter",
+                size: "lg"
+              }, null, 8, ["options"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            md: 6,
+            class: "mb-3"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                options: _ctx.options,
+                size: "lg"
+              }, null, 8, ["options"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                options: _ctx.options,
+                selectionType: "counter",
+                size: "sm"
+              }, null, 8, ["options"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                options: _ctx.options,
+                size: "sm"
+              }, null, 8, ["options"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_60,
+    createBaseVNode("div", _hoisted_64, [
+      createVNode(_component_CMultiSelect, {
+        label: "Users",
+        loading: _ctx.loading,
+        options: _ctx.users,
+        text: "Please select your user.",
+        "virtual-scroller": "",
+        onShow: _cache[1] || (_cache[1] = () => $options.getUsers()),
+        onFilterChange: _cache[2] || (_cache[2] = (value) => $options.getUsers(value))
+      }, null, 8, ["loading", "options"])
+    ]),
+    _hoisted_65,
+    createVNode(_component_ScssDocs, {
+      file: "forms/_form-multi-select.scss",
+      capture: "form-multi-select-css-vars"
+    }),
+    _hoisted_69,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-multi-select-variables"
+    }),
+    _hoisted_72
+  ]);
+}
+const multiSelect_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "multi-select.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/multi-select.html","title":"Vue Multi Select","lang":"en-US","frontmatter":{"title":"Vue Multi Select","description":"Customize the native <select>s with a powerful Vue Multi Select component that changes the element’s initial appearance and brings some new functionalities.","other_frameworks":"multi-select","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/multi-select.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[]},{"level":2,"title":"Modes","slug":"modes","link":"#modes","children":[{"level":3,"title":"Allow create options","slug":"allow-create-options","link":"#allow-create-options","children":[]},{"level":3,"title":"Clear search on select","slug":"clear-search-on-select","link":"#clear-search-on-select","children":[]}]},{"level":2,"title":"Selection types","slug":"selection-types","link":"#selection-types","children":[{"level":3,"title":"Counter","slug":"counter","link":"#counter","children":[]},{"level":3,"title":"Tags","slug":"tags","link":"#tags","children":[]},{"level":3,"title":"Text","slug":"text","link":"#text","children":[]}]},{"level":2,"title":"Single Selection","slug":"single-selection","link":"#single-selection","children":[]},{"level":2,"title":"Custom options and options group labels","slug":"custom-options-and-options-group-labels","link":"#custom-options-and-options-group-labels","children":[]},{"level":2,"title":"Coordinated selection","slug":"coordinated-selection","link":"#coordinated-selection","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"External Data","slug":"external-data","link":"#external-data","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CMultiSelect","slug":"cmultiselect","link":"#cmultiselect","children":[]}]}],"filePathRelative":"forms/multi-select.md"}');
+export {
+  multiSelect_html as comp,
+  data
+};
diff --git a/vue/docs/assets/navbar.html-CPFx4VxT.js b/vue/docs/assets/navbar.html-BCzYXKko.js
similarity index 58%
rename from vue/docs/assets/navbar.html-CPFx4VxT.js
rename to vue/docs/assets/navbar.html-BCzYXKko.js
index 1b2072ad9e6..4dccfc4b691 100644
--- a/vue/docs/assets/navbar.html-CPFx4VxT.js
+++ b/vue/docs/assets/navbar.html-BCzYXKko.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {
   data() {
     return {
@@ -11,64 +11,64 @@ const _sfc_main = {
 };
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="supported-content" tabindex="-1">Supported content <a class="anchor-link" href="#supported-content" aria-hidden="true">#</a></h2><p><code>&lt;CNavbar&gt;</code> come with built-in support for a handful of sub-components. Choose from the following as needed:</p><ul><li><code>&lt;CNavbarBrand&gt;</code> for your company, product, or project name.</li><li><code>&lt;CNavbarNav&gt;</code> for a full-height and lightweight navigation (including support for dropdowns).</li><li><code>&lt;CNavbarToggler&gt;</code> for use with our collapse plugin and other <a href="#responsive-behaviors">navigation toggling</a> behaviors.</li><li>Flex and spacing utilities for any form controls and actions.</li><li><code>&lt;CNavbarText&gt;</code> for adding vertically centered strings of text.</li><li><code>&lt;CCollapse&gt;</code> for grouping and hiding navbar contents by a parent breakpoint.</li></ul><p>Here&#39;s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the <code>lg</code> (large) breakpoint.</p><h2 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage" aria-hidden="true">#</a></h2>', 5);
 const _hoisted_6 = { class: "docs-example rounded-top p-4" };
-const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="brand" tabindex="-1">Brand <a class="anchor-link" href="#brand" aria-hidden="true">#</a></h3><p>The <code>&lt;CNavbarBrand&gt;</code> can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.</p>', 3);
+const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="brand" tabindex="-1">Brand <a class="anchor-link" href="#brand" aria-hidden="true">#</a></h3><p>The <code>&lt;CNavbarBrand&gt;</code> can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.</p>', 3);
 const _hoisted_10 = { class: "docs-example rounded-top p-4" };
 const _hoisted_11 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// As a link</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">// As a heading</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0 h1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Adding images to the <code>&lt;CNavbarBrand&gt;</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>', 2);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// As a link</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">// As a heading</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0 h1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Adding images to the <code>&lt;CNavbarBrand&gt;</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>', 2);
 const _hoisted_14 = { class: "docs-example rounded-top p-4" };
 const _hoisted_15 = ["src"];
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Just an image</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/brand/coreui-signet.svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>22<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Just an image</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/brand/coreui-signet.svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>22<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
 const _hoisted_18 = ["src"];
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Image and text</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/brand/coreui-signet.svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>22<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-block align-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nav" tabindex="-1">Nav <a class="anchor-link" href="#nav" aria-hidden="true">#</a></h3><p><code>&lt;CNavbar&gt;</code> navigation is based on <code>&lt;CNavbarNav&gt;</code>. <strong>Navigation in navbars will also grow to occupy as much horizontal space as possible</strong> to keep your navbar contents securely aligned.</p>', 3);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Image and text</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/brand/coreui-signet.svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>22<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-block align-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nav" tabindex="-1">Nav <a class="anchor-link" href="#nav" aria-hidden="true">#</a></h3><p><code>&lt;CNavbar&gt;</code> navigation is based on <code>&lt;CNavbarNav&gt;</code>. <strong>Navigation in navbars will also grow to occupy as much horizontal space as possible</strong> to keep your navbar contents securely aligned.</p>', 3);
 const _hoisted_22 = { class: "docs-example rounded-top p-4" };
-const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Features<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Pricing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And because we use classes for our navs, you can avoid the list-based approach entirely if you like.</p>', 2);
+const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Features<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Pricing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>And because we use classes for our navs, you can avoid the list-based approach entirely if you like.</p>', 2);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Features<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Pricing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also use dropdowns in your navbar. Please note that <code>&lt;CDropdown&gt;</code> component requires <code>variant=&quot;nav-item&quot;</code>.</p>', 2);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Features<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Pricing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also use dropdowns in your navbar. Please note that <code>&lt;CDropdown&gt;</code> component requires <code>variant=&quot;nav-item&quot;</code>.</p>', 2);
 const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Features<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Pricing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span>Dropdown link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="forms" tabindex="-1">Forms <a class="anchor-link" href="#forms" aria-hidden="true">#</a></h3><p>Place various form controls and components within a navbar:</p>', 3);
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Features<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Pricing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span>Dropdown link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="forms" tabindex="-1">Forms <a class="anchor-link" href="#forms" aria-hidden="true">#</a></h3><p>Place various form controls and components within a navbar:</p>', 3);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Immediate child elements of <code>&lt;CNavbar&gt;</code> use flex layout and will default to <code>justify-content: space-between</code>. Use additional <a href="https://coreui.io/docs/4.0/utilities/flex/" target="_blank" rel="noopener noreferrer">flex utilities</a> as needed to adjust this behavior.</p>', 2);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Immediate child elements of <code>&lt;CNavbar&gt;</code> use flex layout and will default to <code>justify-content: space-between</code>. Use additional <a href="https://coreui.io/docs/4.0/utilities/flex/" target="_blank" rel="noopener noreferrer">flex utilities</a> as needed to adjust this behavior.</p>', 2);
 const _hoisted_35 = { class: "docs-example rounded-top p-4" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the <code>&lt;CForm&gt;</code> element as the container and save some HTML.</p>', 2);
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the <code>&lt;CForm&gt;</code> element as the container and save some HTML.</p>', 2);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container-fluid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.</p>', 2);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container-fluid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-addon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.</p>', 2);
 const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container-fluid justify-content-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Main button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Smaller button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="text" tabindex="-1">Text <a class="anchor-link" href="#text" aria-hidden="true">#</a></h3><p>Navbars may contain bits of text with the help of <code>&lt;CNavbarText&gt;</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>', 3);
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container-fluid justify-content-start<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Main button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Smaller button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="text" tabindex="-1">Text <a class="anchor-link" href="#text" aria-hidden="true">#</a></h3><p>Navbars may contain bits of text with the help of <code>&lt;CNavbarText&gt;</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>', 3);
 const _hoisted_45 = { class: "docs-example rounded-top p-4" };
-const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarText</span><span class="token punctuation">&gt;</span></span>Navbar text with an inline element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="color-schemes" tabindex="-1">Color schemes <a class="anchor-link" href="#color-schemes" aria-hidden="true">#</a></h2><p>Theming the navbar has never been easier thanks to the combination of theming classes and <code>background-color</code> utilities. Set <code>color-scheme=&quot;light&quot;</code> for use with light background colors, or <code>color-scheme=&quot;dark&quot;</code> for dark background colors. Then, customize with <code>.bg-*</code> utilities.</p>', 3);
+const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarText</span><span class="token punctuation">&gt;</span></span>Navbar text with an inline element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="color-schemes" tabindex="-1">Color schemes <a class="anchor-link" href="#color-schemes" aria-hidden="true">#</a></h2><p>Theming the navbar has never been easier thanks to the combination of theming classes and <code>background-color</code> utilities. Set <code>color-scheme=&quot;light&quot;</code> for use with light background colors, or <code>color-scheme=&quot;dark&quot;</code> for dark background colors. Then, customize with <code>.bg-*</code> utilities.</p>', 3);
 const _hoisted_49 = { class: "docs-example rounded-top p-4" };
 const _hoisted_50 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
 const _hoisted_51 = /* @__PURE__ */ createBaseVNode("br", null, null, -1);
-const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> #e3f2fd</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="containers" tabindex="-1">Containers <a class="anchor-link" href="#containers" aria-hidden="true">#</a></h2><p>Although it&#39;s not required, you can wrap a <code>&lt;CNavbar&gt;</code> in a <code>&lt;CContainer&gt;</code> to center it on a page–though note that an inner container is still required. Or you can add a container inside the <code>&lt;CNavbar&gt;</code> to only center the contents of a <a href="#placement">fixed or static top navbar</a>.</p>', 3);
+const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> #e3f2fd</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="containers" tabindex="-1">Containers <a class="anchor-link" href="#containers" aria-hidden="true">#</a></h2><p>Although it&#39;s not required, you can wrap a <code>&lt;CNavbar&gt;</code> in a <code>&lt;CContainer&gt;</code> to center it on a page–though note that an inner container is still required. Or you can add a container inside the <code>&lt;CNavbar&gt;</code> to only center the contents of a <a href="#placement">fixed or static top navbar</a>.</p>', 3);
 const _hoisted_55 = { class: "docs-example rounded-top p-4" };
-const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Use any of the responsive containers to change how wide the content in your navbar is presented.</p>', 2);
+const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Use any of the responsive containers to change how wide the content in your navbar is presented.</p>', 2);
 const _hoisted_58 = { class: "docs-example rounded-top p-4" };
-const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">breakpoint</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="placement" tabindex="-1">Placement <a class="anchor-link" href="#placement" aria-hidden="true">#</a></h2><p>Use our <code>placement</code> properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code>position: fixed</code>, meaning they&#39;re pulled from the normal flow of the DOM and may require custom CSS (e.g., <code>padding-top</code> on the <code>&lt;body&gt;</code>) to prevent overlap with other elements.</p><p>Also note that <strong><code>.sticky-top</code> uses <code>position: sticky</code>, which <a href="https://caniuse.com/css-sticky" target="_blank" rel="noopener noreferrer">isn&#39;t fully supported in every browser</a></strong>.</p>', 4);
+const _hoisted_59 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">breakpoint</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="placement" tabindex="-1">Placement <a class="anchor-link" href="#placement" aria-hidden="true">#</a></h2><p>Use our <code>placement</code> properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code>position: fixed</code>, meaning they&#39;re pulled from the normal flow of the DOM and may require custom CSS (e.g., <code>padding-top</code> on the <code>&lt;body&gt;</code>) to prevent overlap with other elements.</p><p>Also note that <strong><code>.sticky-top</code> uses <code>position: sticky</code>, which <a href="https://caniuse.com/css-sticky" target="_blank" rel="noopener noreferrer">isn&#39;t fully supported in every browser</a></strong>.</p>', 4);
 const _hoisted_63 = { class: "docs-example rounded-top p-4" };
-const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_65 = { class: "docs-example rounded-top p-4" };
-const _hoisted_66 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fixed-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Fixed top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_66 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fixed-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Fixed top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_67 = { class: "docs-example rounded-top p-4" };
-const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fixed-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Fixed bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fixed-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Fixed bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_69 = { class: "docs-example rounded-top p-4" };
-const _hoisted_70 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sticky-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sticky top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-behaviors" tabindex="-1">Responsive behaviors <a class="anchor-link" href="#responsive-behaviors" aria-hidden="true">#</a></h2><p>Navbars can use <code>&lt;CNavbarToggler&gt;</code>, <code>&lt;CCollapse&gt;</code>, and <code>expand=&quot;{sm|md|lg|xl|xxl}&quot;</code> property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.</p><p>For navbars that never collapse, add the <code>expand</code> boolean property on the <code>&lt;CNavbar&gt;</code>. For navbars that always collapse, don&#39;t add any property.</p><h3 id="toggler" tabindex="-1">Toggler <a class="anchor-link" href="#toggler" aria-hidden="true">#</a></h3><p>Navbar togglers are left-aligned by default, but should they follow a sibling element like a <code>&lt;CNavbarBrand&gt;</code>, they&#39;ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.</p><p>With no <code>&lt;CNavbarBrand&gt;</code> shown at the smallest breakpoint:</p>', 7);
+const _hoisted_70 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sticky-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sticky top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-behaviors" tabindex="-1">Responsive behaviors <a class="anchor-link" href="#responsive-behaviors" aria-hidden="true">#</a></h2><p>Navbars can use <code>&lt;CNavbarToggler&gt;</code>, <code>&lt;CCollapse&gt;</code>, and <code>expand=&quot;{sm|md|lg|xl|xxl}&quot;</code> property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.</p><p>For navbars that never collapse, add the <code>expand</code> boolean property on the <code>&lt;CNavbar&gt;</code>. For navbars that always collapse, don&#39;t add any property.</p><h3 id="toggler" tabindex="-1">Toggler <a class="anchor-link" href="#toggler" aria-hidden="true">#</a></h3><p>Navbar togglers are left-aligned by default, but should they follow a sibling element like a <code>&lt;CNavbarBrand&gt;</code>, they&#39;ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.</p><p>With no <code>&lt;CNavbarBrand&gt;</code> shown at the smallest breakpoint:</p>', 7);
 const _hoisted_77 = { class: "docs-example rounded-top p-4" };
-const _hoisted_78 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Hidden brand<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto mb-2 mb-lg-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>With a brand name shown on the left and toggler on the right:</p>', 2);
+const _hoisted_78 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Hidden brand<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto mb-2 mb-lg-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>With a brand name shown on the left and toggler on the right:</p>', 2);
 const _hoisted_80 = { class: "docs-example rounded-top p-4" };
-const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto mb-2 mb-lg-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>With a toggler on the left and brand name on the right:</p>', 2);
+const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto mb-2 mb-lg-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>With a toggler on the left and brand name on the right:</p>', 2);
 const _hoisted_83 = { class: "docs-example rounded-top p-4" };
-const _hoisted_84 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto mb-2 mb-lg-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="external-content" tabindex="-1">External content <a class="anchor-link" href="#external-content" aria-hidden="true">#</a></h3><p>Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the <code>&lt;CNavbar&gt;</code>.</p>', 3);
+const _hoisted_84 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color-scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{visible}</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = !visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbar-collapse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto mb-2 mb-lg-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Home</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            Disabled</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="external-content" tabindex="-1">External content <a class="anchor-link" href="#external-content" aria-hidden="true">#</a></h3><p>Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the <code>&lt;CNavbar&gt;</code>.</p>', 3);
 const _hoisted_87 = { class: "docs-example rounded-top p-4" };
 const _hoisted_88 = /* @__PURE__ */ createBaseVNode("div", { class: "bg-dark p-4" }, [
   /* @__PURE__ */ createBaseVNode("h5", { class: "text-body-emphasis h4" }, "Collapsed content"),
   /* @__PURE__ */ createBaseVNode("span", { class: "text-body-secondary" }, "Toggleable via the navbar brand.")
 ], -1);
-const _hoisted_89 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbarToggleExternalContent<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleExternalContent<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-coreui-theme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark p-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-emphasis h4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Collapsed content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggleable via the navbar brand.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span></span>\n<span class="line">        <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbarToggleExternalContent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleExternalContent = !visibleExternalContent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleExternalContent</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="offcanvas" tabindex="-1">Offcanvas <a class="anchor-link" href="#offcanvas" aria-hidden="true">#</a></h3><p>Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our <code>expand=&quot;*&quot;</code> prop to create a dynamic and flexible navigation sidebar.</p><p>In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the <code>expand=&quot;*&quot;</code> prop entirely.</p>', 4);
+const _hoisted_89 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbarToggleExternalContent<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleExternalContent<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-coreui-theme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark p-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-emphasis h4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Collapsed content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggleable via the navbar brand.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span></span>\n<span class="line">        <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navbarToggleExternalContent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleExternalContent = !visibleExternalContent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleExternalContent</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="offcanvas" tabindex="-1">Offcanvas <a class="anchor-link" href="#offcanvas" aria-hidden="true">#</a></h3><p>Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our <code>expand=&quot;*&quot;</code> prop to create a dynamic and flexible navigation sidebar.</p><p>In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the <code>expand=&quot;*&quot;</code> prop entirely.</p>', 4);
 const _hoisted_93 = { class: "docs-example rounded-top p-4" };
-const _hoisted_94 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span>Offcanvas navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span></span>\n<span class="line">        <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas = !visibleOffcanvas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas = false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Home</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Disabled</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              Search</span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleOffcanvas</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like <code>xxl</code>, use <code>expand=&quot;xxl&quot;</code> property.</p>', 2);
+const _hoisted_94 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span>Offcanvas navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span></span>\n<span class="line">        <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas = !visibleOffcanvas<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas = false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Home</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Disabled</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              Search</span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleOffcanvas</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like <code>xxl</code>, use <code>expand=&quot;xxl&quot;</code> property.</p>', 2);
 const _hoisted_96 = { class: "docs-example rounded-top p-4" };
-const _hoisted_97 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span>Offcanvas navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span></span>\n<span class="line">        <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2 = !visibleOffcanvas2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2 = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2 = false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Home</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Disabled</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              Search</span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleOffcanvas2</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue navbars use local CSS variables on <code>.navbar</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_97 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">expand</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CContainer</span> <span class="token attr-name">fluid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span>Offcanvas navbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarToggler</span></span>\n<span class="line">        <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Toggle navigation<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2 = !visibleOffcanvas2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>offcanvasNavbar2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2 = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleOffcanvas2 = false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Home</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:popper</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownDivider</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">                Disabled</span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              Search</span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CContainer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavbar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleOffcanvas2</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue navbars use local CSS variables on <code>.navbar</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
 const _hoisted_101 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("Some additional CSS variables are also present on "),
   /* @__PURE__ */ createBaseVNode("code", null, ".navbar-nav"),
@@ -79,7 +79,7 @@ const _hoisted_102 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, ".navbar-dark"),
   /* @__PURE__ */ createTextVNode(" class where we override specific values without adding duplicate CSS selectors.")
 ], -1);
-const _hoisted_103 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CNavbar <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CNavbar<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3><p>Variables for all navbars:</p>', 4);
+const _hoisted_103 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CNavbar <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CNavbar<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3><p>Variables for all navbars:</p>', 4);
 const _hoisted_107 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("Variables for the "),
   /* @__PURE__ */ createBaseVNode("a", { href: "#color-schemes" }, "dark navbar"),
@@ -106,7 +106,7 @@ const _hoisted_109 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, "scss/_navbar.scss"),
   /* @__PURE__ */ createTextVNode(".")
 ], -1);
-const _hoisted_110 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;nav&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>expand</strong></td><td>Defines the responsive breakpoint to determine when content collapses.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Place component in non-static positions.</td><td>string</td><td><code>&#39;fixed-top&#39;</code>, <code>&#39;fixed-bottom&#39;</code>, <code>&#39;sticky-top&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cnavbarbrand" tabindex="-1">CNavbarBrand <a class="anchor-link" href="#cnavbarbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 13);
+const _hoisted_110 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;nav&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>container</strong></td><td>Defines optional container wrapping children elements.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code>, <code>&#39;fluid&#39;</code></td><td>-</td></tr><tr><td><strong>expand</strong></td><td>Defines the responsive breakpoint to determine when content collapses.</td><td>boolean|string</td><td><code>boolean</code>, <code>&#39;sm&#39;</code>, <code>&#39;md&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;xxl&#39;</code></td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Place component in non-static positions.</td><td>string</td><td><code>&#39;fixed-top&#39;</code>, <code>&#39;fixed-bottom&#39;</code>, <code>&#39;sticky-top&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cnavbarbrand" tabindex="-1">CNavbarBrand <a class="anchor-link" href="#cnavbarbrand" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarBrand <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarBrand <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarBrand&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavbarNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavbarNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/navbar/CNavbarNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr></tbody></table>', 13);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CNavbarBrand = resolveComponent("CNavbarBrand");
   const _component_CNavbarToggler = resolveComponent("CNavbarToggler");
diff --git a/vue/docs/assets/navs-tabs.html-DNEhKyKa.js b/vue/docs/assets/navs-tabs.html-BwFsuHAs.js
similarity index 62%
rename from vue/docs/assets/navs-tabs.html-DNEhKyKa.js
rename to vue/docs/assets/navs-tabs.html-BwFsuHAs.js
index 599dfcdec4c..2c131cdeb7b 100644
--- a/vue/docs/assets/navs-tabs.html-DNEhKyKa.js
+++ b/vue/docs/assets/navs-tabs.html-BwFsuHAs.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {
   data() {
     return {
@@ -29,37 +29,37 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(" component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.")
 ], -1);
 const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Classes are used throughout, so your markup can be super flexible. Use <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.</p>', 2);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Classes are used throughout, so your markup can be super flexible. Use <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.</p>', 2);
 const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="available-styles" tabindex="-1">Available styles <a class="anchor-link" href="#available-styles" aria-hidden="true">#</a></h2><p>Change the style of <code>.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p><h3 id="horizontal-alignment" tabindex="-1">Horizontal alignment <a class="anchor-link" href="#horizontal-alignment" aria-hidden="true">#</a></h3><p>Change the horizontal alignment of your nav with <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment" target="_blank" rel="noopener noreferrer">flexbox utilities</a>. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p><p>Centered with <code>.justify-content-center</code>:</p>', 6);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="available-styles" tabindex="-1">Available styles <a class="anchor-link" href="#available-styles" aria-hidden="true">#</a></h2><p>Change the style of <code>.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p><h3 id="horizontal-alignment" tabindex="-1">Horizontal alignment <a class="anchor-link" href="#horizontal-alignment" aria-hidden="true">#</a></h3><p>Change the horizontal alignment of your nav with <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment" target="_blank" rel="noopener noreferrer">flexbox utilities</a>. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p><p>Centered with <code>.justify-content-center</code>:</p>', 6);
 const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Right-aligned with <code>.justify-content-end</code>:</p>', 2);
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Right-aligned with <code>.justify-content-end</code>:</p>', 2);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vertical" tabindex="-1">Vertical <a class="anchor-link" href="#vertical" aria-hidden="true">#</a></h3><p>Stack your navigation by changing the flex item direction with the <code>.flex-column</code> utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).</p>', 3);
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justify-content-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vertical" tabindex="-1">Vertical <a class="anchor-link" href="#vertical" aria-hidden="true">#</a></h3><p>Stack your navigation by changing the flex item direction with the <code>.flex-column</code> utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).</p>', 3);
 const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-column<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tabs" tabindex="-1">Tabs <a class="anchor-link" href="#tabs" aria-hidden="true">#</a></h3><p>Takes the basic nav from above and adds the <code>variant=&quot;tabs&quot;</code> class to generate a tabbed interface</p>', 3);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-column<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tabs" tabindex="-1">Tabs <a class="anchor-link" href="#tabs" aria-hidden="true">#</a></h3><p>Takes the basic nav from above and adds the <code>variant=&quot;tabs&quot;</code> class to generate a tabbed interface</p>', 3);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pills" tabindex="-1">Pills <a class="anchor-link" href="#pills" aria-hidden="true">#</a></h3><p>Take that same HTML, but use <code>variant=&quot;pills&quot;</code> instead:</p>', 3);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pills" tabindex="-1">Pills <a class="anchor-link" href="#pills" aria-hidden="true">#</a></h3><p>Take that same HTML, but use <code>variant=&quot;pills&quot;</code> instead:</p>', 3);
 const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline" tabindex="-1">Underline <a class="anchor-link" href="#underline" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline&quot;</code> instead:</p>', 3);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline" tabindex="-1">Underline <a class="anchor-link" href="#underline" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline&quot;</code> instead:</p>', 3);
 const _hoisted_33 = { class: "docs-example rounded-top p-4" };
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline-border" tabindex="-1">Underline border <a class="anchor-link" href="#underline-border" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline-border&quot;</code> instead:</p>', 3);
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline-border" tabindex="-1">Underline border <a class="anchor-link" href="#underline-border" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline-border&quot;</code> instead:</p>', 3);
 const _hoisted_37 = { class: "docs-example rounded-top p-4" };
-const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline-border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="fill-and-justify" tabindex="-1">Fill and justify <a class="anchor-link" href="#fill-and-justify" aria-hidden="true">#</a></h3><p>Force your <code>.nav</code>&#39;s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code>.nav-item</code>s, use <code>layout=&quot;fill&quot;</code>. Notice that all horizontal space is occupied, but not every nav item has the same width.</p>', 3);
+const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline-border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="fill-and-justify" tabindex="-1">Fill and justify <a class="anchor-link" href="#fill-and-justify" aria-hidden="true">#</a></h3><p>Force your <code>.nav</code>&#39;s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code>.nav-item</code>s, use <code>layout=&quot;fill&quot;</code>. Notice that all horizontal space is occupied, but not every nav item has the same width.</p>', 3);
 const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For equal-width elements, use <code>layout=&quot;justified&quot;</code>. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.</p>', 2);
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For equal-width elements, use <code>layout=&quot;justified&quot;</code>. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.</p>', 2);
 const _hoisted_44 = { class: "docs-example rounded-top p-4" };
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justified<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="working-with-flex-utilities" tabindex="-1">Working with flex utilities <a class="anchor-link" href="#working-with-flex-utilities" aria-hidden="true">#</a></h2><p>If you need responsive nav variations, consider using a series of <a href="https://coreui.io/docs/utilities/flex" target="_blank" rel="noopener noreferrer">flexbox utilities</a>. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.</p>', 3);
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justified<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="working-with-flex-utilities" tabindex="-1">Working with flex utilities <a class="anchor-link" href="#working-with-flex-utilities" aria-hidden="true">#</a></h2><p>If you need responsive nav variations, consider using a series of <a href="https://coreui.io/docs/utilities/flex" target="_blank" rel="noopener noreferrer">flexbox utilities</a>. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.</p>', 3);
 const _hoisted_48 = { class: "docs-example rounded-top p-4" };
-const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-column flex-sm-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Active</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Disabled</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="regarding-accessibility" tabindex="-1">Regarding accessibility <a class="anchor-link" href="#regarding-accessibility" aria-hidden="true">#</a></h2><p>If you&#39;re using navs to provide a navigation bar, be sure to add a <code>role=&quot;navigation&quot;</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p><p>Note that navigation bars, even if visually styled as tabs with the <code>.nav-tabs</code> class, should <strong>not</strong> be given <code>role=&quot;tablist&quot;</code>, <code>role=&quot;tab&quot;</code> or <code>role=&quot;tabpanel&quot;</code> attributes. These are only appropriate for dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>. See <a href="#javascript-behavior">JavaScript behavior</a> for dynamic tabbed interfaces in this section for an example. The <code>aria-current</code> attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding <code>aria-selected=&quot;true&quot;</code> on the active tab.</p><h2 id="using-dropdowns" tabindex="-1">Using dropdowns <a class="anchor-link" href="#using-dropdowns" aria-hidden="true">#</a></h2><p>Add dropdown menus with a little extra HTML.</p><h3 id="tabs-with-dropdowns" tabindex="-1">Tabs with dropdowns <a class="anchor-link" href="#tabs-with-dropdowns" aria-hidden="true">#</a></h3>', 7);
+const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-column flex-sm-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Active</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Disabled</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="regarding-accessibility" tabindex="-1">Regarding accessibility <a class="anchor-link" href="#regarding-accessibility" aria-hidden="true">#</a></h2><p>If you&#39;re using navs to provide a navigation bar, be sure to add a <code>role=&quot;navigation&quot;</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p><p>Note that navigation bars, even if visually styled as tabs with the <code>.nav-tabs</code> class, should <strong>not</strong> be given <code>role=&quot;tablist&quot;</code>, <code>role=&quot;tab&quot;</code> or <code>role=&quot;tabpanel&quot;</code> attributes. These are only appropriate for dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>. See <a href="#javascript-behavior">JavaScript behavior</a> for dynamic tabbed interfaces in this section for an example. The <code>aria-current</code> attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding <code>aria-selected=&quot;true&quot;</code> on the active tab.</p><h2 id="using-dropdowns" tabindex="-1">Using dropdowns <a class="anchor-link" href="#using-dropdowns" aria-hidden="true">#</a></h2><p>Add dropdown menus with a little extra HTML.</p><h3 id="tabs-with-dropdowns" tabindex="-1">Tabs with dropdowns <a class="anchor-link" href="#tabs-with-dropdowns" aria-hidden="true">#</a></h3>', 7);
 const _hoisted_56 = { class: "docs-example rounded-top p-4" };
-const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pills-with-dropdowns" tabindex="-1">Pills with dropdowns <a class="anchor-link" href="#pills-with-dropdowns" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pills-with-dropdowns" tabindex="-1">Pills with dropdowns <a class="anchor-link" href="#pills-with-dropdowns" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_59 = { class: "docs-example rounded-top p-4" };
-const _hoisted_60 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="tab-panes" tabindex="-1">Tab panes <a class="anchor-link" href="#tab-panes" aria-hidden="true">#</a></h2><p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code>role=&quot;tablist&quot;</code>, <code>role=&quot;tab&quot;</code>, <code>role=&quot;tabpanel&quot;</code>, and additional <code>aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p><p>Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab&#39;s trigger element is not immediately visible (as it&#39;s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.</p>', 4);
+const _hoisted_60 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Active</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dropdown button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="tab-panes" tabindex="-1">Tab panes <a class="anchor-link" href="#tab-panes" aria-hidden="true">#</a></h2><p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code>role=&quot;tablist&quot;</code>, <code>role=&quot;tab&quot;</code>, <code>role=&quot;tabpanel&quot;</code>, and additional <code>aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p><p>Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab&#39;s trigger element is not immediately visible (as it&#39;s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.</p>', 4);
 const _hoisted_64 = { class: "docs-example rounded-top p-4" };
-const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tablist<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPaneActiveKey = 1}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Home</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPaneActiveKey = 2}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Profile</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPaneActiveKey = 3}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Contact</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown</span>\n<span class="line">      aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan</span>\n<span class="line">      helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh</span>\n<span class="line">      mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan</span>\n<span class="line">      aliquip quis cardigan american apparel, butcher voluptate nisi qui.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee squid.</span>\n<span class="line">      Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan</span>\n<span class="line">      four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft</span>\n<span class="line">      beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,</span>\n<span class="line">      assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero</span>\n<span class="line">      magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,</span>\n<span class="line">      sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party</span>\n<span class="line">      scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s organic</span>\n<span class="line">      lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork</span>\n<span class="line">      tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie</span>\n<span class="line">      helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</span>\n<span class="line">      Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro</span>\n<span class="line">      mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer blog</span>\n<span class="line">      stumptown. Pitchfork sustainable tofu synth chambray yr.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">tabPaneActiveKey</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The tabs also works with pills.</p>', 2);
+const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tablist<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPaneActiveKey = 1}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Home</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPaneActiveKey = 2}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Profile</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPaneActiveKey = 3}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Contact</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown</span>\n<span class="line">      aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan</span>\n<span class="line">      helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh</span>\n<span class="line">      mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan</span>\n<span class="line">      aliquip quis cardigan american apparel, butcher voluptate nisi qui.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee squid.</span>\n<span class="line">      Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan</span>\n<span class="line">      four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft</span>\n<span class="line">      beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,</span>\n<span class="line">      assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero</span>\n<span class="line">      magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,</span>\n<span class="line">      sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party</span>\n<span class="line">      scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPaneActiveKey === 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s organic</span>\n<span class="line">      lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork</span>\n<span class="line">      tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie</span>\n<span class="line">      helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</span>\n<span class="line">      Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro</span>\n<span class="line">      mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer blog</span>\n<span class="line">      stumptown. Pitchfork sustainable tofu synth chambray yr.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">tabPaneActiveKey</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The tabs also works with pills.</p>', 2);
 const _hoisted_67 = { class: "docs-example rounded-top p-4" };
-const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tablist<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPanePillsActiveKey = 1}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Home</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPanePillsActiveKey = 2}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Profile</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPanePillsActiveKey = 3}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Contact</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown</span>\n<span class="line">      aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan</span>\n<span class="line">      helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh</span>\n<span class="line">      mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan</span>\n<span class="line">      aliquip quis cardigan american apparel, butcher voluptate nisi qui.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee squid.</span>\n<span class="line">      Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan</span>\n<span class="line">      four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft</span>\n<span class="line">      beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,</span>\n<span class="line">      assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero</span>\n<span class="line">      magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,</span>\n<span class="line">      sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party</span>\n<span class="line">      scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s organic</span>\n<span class="line">      lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork</span>\n<span class="line">      tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie</span>\n<span class="line">      helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</span>\n<span class="line">      Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro</span>\n<span class="line">      mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer blog</span>\n<span class="line">      stumptown. Pitchfork sustainable tofu synth chambray yr.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">tabPanePillsActiveKey</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue cards use local CSS variables on <code>.nav</code>, <code>.nav-tabs</code>, and <code>.nav-pills</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p><p>On the <code>.nav</code> base class:</p>', 5);
+const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNav</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tablist<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPanePillsActiveKey = 1}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Home</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPanePillsActiveKey = 2}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Profile</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavLink</span></span>\n<span class="line">        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript:void(0);<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {tabPanePillsActiveKey = 3}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Contact</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown</span>\n<span class="line">      aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan</span>\n<span class="line">      helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh</span>\n<span class="line">      mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan</span>\n<span class="line">      aliquip quis cardigan american apparel, butcher voluptate nisi qui.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee squid.</span>\n<span class="line">      Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan</span>\n<span class="line">      four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft</span>\n<span class="line">      beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,</span>\n<span class="line">      assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero</span>\n<span class="line">      magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,</span>\n<span class="line">      sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party</span>\n<span class="line">      scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPane</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabpanel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabPanePillsActiveKey === 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s organic</span>\n<span class="line">      lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork</span>\n<span class="line">      tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie</span>\n<span class="line">      helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</span>\n<span class="line">      Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro</span>\n<span class="line">      mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer blog</span>\n<span class="line">      stumptown. Pitchfork sustainable tofu synth chambray yr.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPane</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">tabPanePillsActiveKey</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue cards use local CSS variables on <code>.nav</code>, <code>.nav-tabs</code>, and <code>.nav-pills</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p><p>On the <code>.nav</code> base class:</p>', 5);
 const _hoisted_73 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("On the "),
   /* @__PURE__ */ createBaseVNode("code", null, ".nav-tabs"),
@@ -70,8 +70,8 @@ const _hoisted_74 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, ".nav-pills"),
   /* @__PURE__ */ createTextVNode(" modifier class:")
 ], -1);
-const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CNav <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CNav<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_78 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cnavgroup" tabindex="-1">CNavGroup <a class="anchor-link" href="#cnavgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>compact</strong></td><td>Make nav group more compact by cutting all <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Show nav group items.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>visible-change</strong></td><td></td><td></td></tr></tbody></table><h3 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr></tbody></table><p><code>CNavItem</code> and <code>CNavLink</code> have the same properties. If you set the <code>href</code> property on <code>CNavItem</code> then, <code>CNavLink</code> will be generated inside <code>CNavItem</code>.</p><h3 id="cnavlink" tabindex="-1">CNavLink <a class="anchor-link" href="#cnavlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 20);
+const _hoisted_75 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CNav <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CNav<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_78 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNav <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNav <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNav&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;ul&#39;</td></tr><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cnavgroup" tabindex="-1">CNavGroup <a class="anchor-link" href="#cnavgroup" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavGroup <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavGroup&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr><tr><td><strong>compact</strong></td><td>Make nav group more compact by cutting all <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Show nav group items.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>visible-change</strong></td><td></td><td></td></tr></tbody></table><h3 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;li&#39;</td></tr></tbody></table><p><code>CNavItem</code> and <code>CNavLink</code> have the same properties. If you set the <code>href</code> property on <code>CNavItem</code> then, <code>CNavLink</code> will be generated inside <code>CNavItem</code>.</p><h3 id="cnavlink" tabindex="-1">CNavLink <a class="anchor-link" href="#cnavlink" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CNavLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CNavLink <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/nav/CNavLink&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;a&#39;</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table>', 20);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CNavLink = resolveComponent("CNavLink");
   const _component_CNavItem = resolveComponent("CNavItem");
diff --git a/vue/docs/assets/offcanvas.html-D6TxFWNe.js b/vue/docs/assets/offcanvas.html-D6TxFWNe.js
new file mode 100644
index 00000000000..61daa910671
--- /dev/null
+++ b/vue/docs/assets/offcanvas.html-D6TxFWNe.js
@@ -0,0 +1,570 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  data() {
+    return {
+      visible: false,
+      visibleTop: false,
+      visibleEnd: false,
+      visibleBottom: false,
+      visibleScrolling: false,
+      visibleResponsiveBackdrop: false,
+      visibleWithStaticBackdrop: false,
+      visibleWithBothOptions: false
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "offcanvas-components",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Offcanvas components "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#offcanvas-components",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("Below is an offcanvas example that is shown by default (via "),
+  /* @__PURE__ */ createBaseVNode("code", null, ':visible="true"'),
+  /* @__PURE__ */ createTextVNode("). Offcanvas includes support for a header with a close button and an optional body class for some initial "),
+  /* @__PURE__ */ createBaseVNode("code", null, "padding"),
+  /* @__PURE__ */ createTextVNode(". We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.")
+], -1);
+const _hoisted_4 = { class: "docs-example rounded-top p-4" };
+const _hoisted_5 = { class: "docs-example-offcanvas bg-light" };
+const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">    custom elements here.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="live-demo" tabindex="-1">Live demo <a class="anchor-link" href="#live-demo" aria-hidden="true">#</a></h3><p>Use the buttons below to show and hide an offcanvas component.</p><ul><li><code>:visible=&quot;false&quot;</code> hides content (default)</li><li><code>visible</code> or <code>:visible=&quot;true&quot;</code> shows content</li></ul>', 4);
+const _hoisted_10 = { class: "docs-example rounded-top p-4" };
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visible = !visible }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visible = !visible }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visible = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="body-scrolling" tabindex="-1">Body scrolling <a class="anchor-link" href="#body-scrolling" aria-hidden="true">#</a></h3><p>Scrolling the <code>&lt;body&gt;</code> element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle <code>&lt;body&gt;</code> scrolling and backdrop to toggle the backdrop.</p>', 3);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = /* @__PURE__ */ createBaseVNode("p", null, "Try scrolling the rest of the page to see this option in action.", -1);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrolling = !visibleScrolling }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Enable body scrolling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleScrolling<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrolling = !visibleScrolling }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrolling = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Try scrolling the rest of the page to see this option in action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleScrolling</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="body-scrolling-and-backdrop" tabindex="-1">Body scrolling and backdrop <a class="anchor-link" href="#body-scrolling-and-backdrop" aria-hidden="true">#</a></h3><p>You can also enable <code>&lt;body&gt;</code> scrolling with a visible backdrop.</p>', 3);
+const _hoisted_19 = { class: "docs-example rounded-top p-4" };
+const _hoisted_20 = /* @__PURE__ */ createBaseVNode("p", null, "Try scrolling the rest of the page to see this option in action.", -1);
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithBothOptions = !visibleWithBothOptions }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Enable both scrolling <span class="token entity named-entity" title="&amp;">&amp;amp;</span> backdrop<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleWithBothOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithBothOptions = !visibleWithBothOptions }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithBothOptions = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Try scrolling the rest of the page to see this option in action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">visibleWithBothOptions</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="static-backdrop" tabindex="-1">Static backdrop <a class="anchor-link" href="#static-backdrop" aria-hidden="true">#</a></h3><p>If you set a <code>backdrop</code> to <code>static</code>, your Vue offcanvas component will not close when clicking outside of it.</p>', 3);
+const _hoisted_24 = { class: "docs-example rounded-top p-4" };
+const _hoisted_25 = /* @__PURE__ */ createBaseVNode("p", null, "I will not close if you click outside of me.", -1);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithStaticBackdrop = !visibleWithStaticBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle static offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleWithStaticBackdrop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithStaticBackdrop = !visibleWithStaticBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithStaticBackdrop = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>I will not close if you click outside of me.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleWithStaticBackdrop</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-offcanvas" tabindex="-1">Dark offcanvas <a class="anchor-link" href="#dark-offcanvas" aria-hidden="true">#</a></h2><p>Change the appearance of offcanvases with <code>dark</code> boolean property to better match them to different contexts like dark navbars.</p>', 3);
+const _hoisted_29 = { class: "docs-example rounded-top p-4" };
+const _hoisted_30 = { class: "docs-example-offcanvas bg-body-secondary p-0 overflow-hidden" };
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dark</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Content for the offcanvas goes here. You can place just about any React component or custom elements here.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive" tabindex="-1">Responsive <a class="anchor-link" href="#responsive" aria-hidden="true">#</a></h2><p>Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, <code>responsive=&quot;lg&quot;</code> hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.</p>', 3);
+const _hoisted_34 = { class: "docs-example rounded-top p-4" };
+const _hoisted_35 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("This is content within an "),
+  /* @__PURE__ */ createBaseVNode("code", null, ".offcanvas-lg")
+], -1);
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleResponsiveBackdrop = !visibleResponsiveBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle static offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-lg-block<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Resize your browser to show the responsive offcanvas toggle.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleResponsiveBackdrop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleResponsiveBackdrop = !visibleResponsiveBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Responsive offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleResponsiveBackdrop = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This is content within an <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.offcanvas-lg<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleResponsiveBackdrop</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="placement" tabindex="-1">Placement <a class="anchor-link" href="#placement" aria-hidden="true">#</a></h2><p>There&#39;s no default placement for offcanvas components, so you must add one of the modifier classes below;</p><ul><li><code>placement=&quot;start&quot;</code> places offcanvas on the left of the viewport (shown above)</li><li><code>placement=&quot;end&quot;</code> places offcanvas on the right of the viewport</li><li><code>placement=&quot;top&quot;</code> places offcanvas on the top of the viewport</li><li><code>placement=&quot;bottom&quot;</code> places offcanvas on the bottom of the viewport</li></ul><p>Try the top, right, and bottom examples out below.</p>', 5);
+const _hoisted_41 = { class: "docs-example rounded-top p-4" };
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTop = !visibleTop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle top offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleTop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTop = !visibleTop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTop = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleTop</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_43 = { class: "docs-example rounded-top p-4" };
+const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleEnd = !visibleEnd }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle right offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleEnd<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleEnd = !visibleEnd }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleEnd = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleEnd</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_45 = { class: "docs-example rounded-top p-4" };
+const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleBottom = !visibleBottom }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle bottom offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleBottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleBottom = !visibleBottom }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleBottom = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleBottom</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h2><p>Since the offcanvas panel is conceptually a modal dialog, be sure to add <code>aria-labelledby=&quot;...&quot;</code>—referencing the offcanvas title—to <code>&lt;COffcanvas&gt;</code>. Note that you don’t need to add <code>role=&quot;dialog&quot;</code> since we already add it automatically.</p><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue offcanvas uses local CSS variables on <code>.offcanvas</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 6);
+const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>COffcanvas <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>COffcanvas<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="coffcanvas" tabindex="-1">COffcanvas <a class="anchor-link" href="#coffcanvas" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvas <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvas <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvas&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the offcanvas when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr><tr><td><strong>responsive</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</td><td>boolean|string</td><td><code>boolean | &#39;sm&#39; | &#39;md&#39; | &#39;lg&#39; | &#39;xl&#39; | &#39;xxl&#39;</code></td><td>true</td></tr><tr><td><strong>scroll</strong></td><td>Allow body scrolling while offcanvas is open</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of offcanvas component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="coffcanvastitle" tabindex="-1">COffcanvasTitle <a class="anchor-link" href="#coffcanvastitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 11);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_COffcanvasTitle = resolveComponent("COffcanvasTitle");
+  const _component_CCloseButton = resolveComponent("CCloseButton");
+  const _component_COffcanvasHeader = resolveComponent("COffcanvasHeader");
+  const _component_COffcanvasBody = resolveComponent("COffcanvasBody");
+  const _component_COffcanvas = resolveComponent("COffcanvas");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CAlert = resolveComponent("CAlert");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    _hoisted_3,
+    createBaseVNode("div", _hoisted_4, [
+      createBaseVNode("div", _hoisted_5, [
+        createVNode(_component_COffcanvas, {
+          backdrop: false,
+          placement: "start",
+          visible: true
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_COffcanvasHeader, null, {
+              default: withCtx(() => [
+                createVNode(_component_COffcanvasTitle, null, {
+                  default: withCtx(() => [
+                    createTextVNode("Offcanvas")
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_CCloseButton, { class: "text-reset" })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_COffcanvasBody, null, {
+              default: withCtx(() => [
+                createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    _hoisted_6,
+    createBaseVNode("div", _hoisted_10, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[0] || (_cache[0] = () => {
+          $data.visible = !$data.visible;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "start",
+        visible: $data.visible,
+        onHide: _cache[2] || (_cache[2] = () => {
+          $data.visible = !$data.visible;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[1] || (_cache[1] = () => {
+                  $data.visible = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_11,
+    createBaseVNode("div", _hoisted_14, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[3] || (_cache[3] = () => {
+          $data.visibleScrolling = !$data.visibleScrolling;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Enable body scrolling")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        backdrop: false,
+        placement: "start",
+        scroll: "",
+        visible: $data.visibleScrolling,
+        onHide: _cache[5] || (_cache[5] = () => {
+          $data.visibleScrolling = !$data.visibleScrolling;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[4] || (_cache[4] = () => {
+                  $data.visibleScrolling = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              _hoisted_15
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_16,
+    createBaseVNode("div", _hoisted_19, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[6] || (_cache[6] = () => {
+          $data.visibleWithBothOptions = !$data.visibleWithBothOptions;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Enable both scrolling & backdrop")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "start",
+        scroll: "",
+        visible: $data.visibleWithBothOptions,
+        onHide: _cache[8] || (_cache[8] = () => {
+          $data.visibleWithBothOptions = !$data.visibleWithBothOptions;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[7] || (_cache[7] = () => {
+                  $data.visibleWithBothOptions = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              _hoisted_20
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_21,
+    createBaseVNode("div", _hoisted_24, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[9] || (_cache[9] = () => {
+          $data.visibleWithStaticBackdrop = !$data.visibleWithStaticBackdrop;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle static offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        backdrop: "static",
+        placement: "start",
+        visible: $data.visibleWithStaticBackdrop,
+        onHide: _cache[11] || (_cache[11] = () => {
+          $data.visibleWithStaticBackdrop = !$data.visibleWithStaticBackdrop;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[10] || (_cache[10] = () => {
+                  $data.visibleWithStaticBackdrop = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              _hoisted_25
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_26,
+    createBaseVNode("div", _hoisted_29, [
+      createBaseVNode("div", _hoisted_30, [
+        createVNode(_component_COffcanvas, {
+          backdrop: false,
+          dark: "",
+          placement: "start",
+          visible: true
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_COffcanvasHeader, null, {
+              default: withCtx(() => [
+                createVNode(_component_COffcanvasTitle, null, {
+                  default: withCtx(() => [
+                    createTextVNode("Offcanvas")
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_CCloseButton, { class: "text-reset" })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_COffcanvasBody, null, {
+              default: withCtx(() => [
+                createTextVNode(" Content for the offcanvas goes here. You can place just about any React component or custom elements here. ")
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    _hoisted_31,
+    createBaseVNode("div", _hoisted_34, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[12] || (_cache[12] = () => {
+          $data.visibleResponsiveBackdrop = !$data.visibleResponsiveBackdrop;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CAlert, {
+        class: "d-none d-lg-block",
+        color: "info"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Resize your browser to show the responsive offcanvas toggle.")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "start",
+        responsive: "lg",
+        visible: $data.visibleResponsiveBackdrop,
+        onHide: _cache[14] || (_cache[14] = () => {
+          $data.visibleResponsiveBackdrop = !$data.visibleResponsiveBackdrop;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Responsive offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[13] || (_cache[13] = () => {
+                  $data.visibleResponsiveBackdrop = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              _hoisted_35,
+              createTextVNode(". ")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_36,
+    createBaseVNode("div", _hoisted_41, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[15] || (_cache[15] = () => {
+          $data.visibleTop = !$data.visibleTop;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle top offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "top",
+        visible: $data.visibleTop,
+        onHide: _cache[17] || (_cache[17] = () => {
+          $data.visibleTop = !$data.visibleTop;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[16] || (_cache[16] = () => {
+                  $data.visibleTop = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_42,
+    createBaseVNode("div", _hoisted_43, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[18] || (_cache[18] = () => {
+          $data.visibleEnd = !$data.visibleEnd;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle right offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "end",
+        visible: $data.visibleEnd,
+        onHide: _cache[20] || (_cache[20] = () => {
+          $data.visibleEnd = !$data.visibleEnd;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[19] || (_cache[19] = () => {
+                  $data.visibleEnd = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_44,
+    createBaseVNode("div", _hoisted_45, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[21] || (_cache[21] = () => {
+          $data.visibleBottom = !$data.visibleBottom;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle bottom offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "bottom",
+        visible: $data.visibleBottom,
+        onHide: _cache[23] || (_cache[23] = () => {
+          $data.visibleBottom = !$data.visibleBottom;
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_COffcanvasHeader, null, {
+            default: withCtx(() => [
+              createVNode(_component_COffcanvasTitle, null, {
+                default: withCtx(() => [
+                  createTextVNode("Offcanvas")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CCloseButton, {
+                class: "text-reset",
+                onClick: _cache[22] || (_cache[22] = () => {
+                  $data.visibleBottom = false;
+                })
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_COffcanvasBody, null, {
+            default: withCtx(() => [
+              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["visible"])
+    ]),
+    _hoisted_46,
+    createVNode(_component_ScssDocs, {
+      file: "_offcanvas.scss",
+      capture: "offcanvas-css-vars"
+    }),
+    _hoisted_52,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "offcanvas-variables"
+    }),
+    _hoisted_55
+  ]);
+}
+const offcanvas_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "offcanvas.html.vue"]]);
+const data = JSON.parse('{"path":"/components/offcanvas.html","title":"Vue Offcanvas Component","lang":"en-US","frontmatter":{"title":"Vue Offcanvas Component","name":"Offcanvas","description":"Vue alert component allows build hidden sidebars into your project for navigation, shopping carts.","other_frameworks":"offcanvas","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/offcanvas.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Offcanvas components","slug":"offcanvas-components","link":"#offcanvas-components","children":[]},{"level":3,"title":"Live demo","slug":"live-demo","link":"#live-demo","children":[]},{"level":3,"title":"Body scrolling","slug":"body-scrolling","link":"#body-scrolling","children":[]},{"level":3,"title":"Body scrolling and backdrop","slug":"body-scrolling-and-backdrop","link":"#body-scrolling-and-backdrop","children":[]},{"level":3,"title":"Static backdrop","slug":"static-backdrop","link":"#static-backdrop","children":[]}]},{"level":2,"title":"Dark offcanvas","slug":"dark-offcanvas","link":"#dark-offcanvas","children":[]},{"level":2,"title":"Responsive","slug":"responsive","link":"#responsive","children":[]},{"level":2,"title":"Placement","slug":"placement","link":"#placement","children":[]},{"level":2,"title":"Accessibility","slug":"accessibility","link":"#accessibility","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"COffcanvas","slug":"coffcanvas","link":"#coffcanvas","children":[]},{"level":3,"title":"COffcanvasTitle","slug":"coffcanvastitle","link":"#coffcanvastitle","children":[]}]}],"filePathRelative":"components/offcanvas.md"}');
+export {
+  offcanvas_html as comp,
+  data
+};
diff --git a/vue/docs/assets/offcanvas.html-snulfaYO.js b/vue/docs/assets/offcanvas.html-snulfaYO.js
deleted file mode 100644
index a8fbd94d2ac..00000000000
--- a/vue/docs/assets/offcanvas.html-snulfaYO.js
+++ /dev/null
@@ -1,570 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  data() {
-    return {
-      visible: false,
-      visibleTop: false,
-      visibleEnd: false,
-      visibleBottom: false,
-      visibleScrolling: false,
-      visibleResponsiveBackdrop: false,
-      visibleWithStaticBackdrop: false,
-      visibleWithBothOptions: false
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "examples",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Examples "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "offcanvas-components",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Offcanvas components "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#offcanvas-components",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("Below is an offcanvas example that is shown by default (via "),
-  /* @__PURE__ */ createBaseVNode("code", null, ':visible="true"'),
-  /* @__PURE__ */ createTextVNode("). Offcanvas includes support for a header with a close button and an optional body class for some initial "),
-  /* @__PURE__ */ createBaseVNode("code", null, "padding"),
-  /* @__PURE__ */ createTextVNode(". We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.")
-], -1);
-const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = { class: "docs-example-offcanvas bg-light" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">    custom elements here.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="live-demo" tabindex="-1">Live demo <a class="anchor-link" href="#live-demo" aria-hidden="true">#</a></h3><p>Use the buttons below to show and hide an offcanvas component.</p><ul><li><code>:visible=&quot;false&quot;</code> hides content (default)</li><li><code>visible</code> or <code>:visible=&quot;true&quot;</code> shows content</li></ul>', 4);
-const _hoisted_10 = { class: "docs-example rounded-top p-4" };
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visible = !visible }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visible = !visible }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visible = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="body-scrolling" tabindex="-1">Body scrolling <a class="anchor-link" href="#body-scrolling" aria-hidden="true">#</a></h3><p>Scrolling the <code>&lt;body&gt;</code> element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle <code>&lt;body&gt;</code> scrolling and backdrop to toggle the backdrop.</p>', 3);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createBaseVNode("p", null, "Try scrolling the rest of the page to see this option in action.", -1);
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrolling = !visibleScrolling }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Enable body scrolling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleScrolling<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrolling = !visibleScrolling }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleScrolling = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Try scrolling the rest of the page to see this option in action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleScrolling</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="body-scrolling-and-backdrop" tabindex="-1">Body scrolling and backdrop <a class="anchor-link" href="#body-scrolling-and-backdrop" aria-hidden="true">#</a></h3><p>You can also enable <code>&lt;body&gt;</code> scrolling with a visible backdrop.</p>', 3);
-const _hoisted_19 = { class: "docs-example rounded-top p-4" };
-const _hoisted_20 = /* @__PURE__ */ createBaseVNode("p", null, "Try scrolling the rest of the page to see this option in action.", -1);
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithBothOptions = !visibleWithBothOptions }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Enable both scrolling <span class="token entity named-entity" title="&amp;">&amp;amp;</span> backdrop<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleWithBothOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithBothOptions = !visibleWithBothOptions }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithBothOptions = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Try scrolling the rest of the page to see this option in action.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">visibleWithBothOptions</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="static-backdrop" tabindex="-1">Static backdrop <a class="anchor-link" href="#static-backdrop" aria-hidden="true">#</a></h3><p>If you set a <code>backdrop</code> to <code>static</code>, your Vue offcanvas component will not close when clicking outside of it.</p>', 3);
-const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = /* @__PURE__ */ createBaseVNode("p", null, "I will not close if you click outside of me.", -1);
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithStaticBackdrop = !visibleWithStaticBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle static offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleWithStaticBackdrop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithStaticBackdrop = !visibleWithStaticBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleWithStaticBackdrop = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>I will not close if you click outside of me.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleWithStaticBackdrop</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-offcanvas" tabindex="-1">Dark offcanvas <a class="anchor-link" href="#dark-offcanvas" aria-hidden="true">#</a></h2><p>Change the appearance of offcanvases with <code>dark</code> boolean property to better match them to different contexts like dark navbars.</p>', 3);
-const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = { class: "docs-example-offcanvas bg-body-secondary p-0 overflow-hidden" };
-const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">:backdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dark</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Content for the offcanvas goes here. You can place just about any React component or custom elements here.</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive" tabindex="-1">Responsive <a class="anchor-link" href="#responsive" aria-hidden="true">#</a></h2><p>Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, <code>responsive=&quot;lg&quot;</code> hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.</p>', 3);
-const _hoisted_34 = { class: "docs-example rounded-top p-4" };
-const _hoisted_35 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("This is content within an "),
-  /* @__PURE__ */ createBaseVNode("code", null, ".offcanvas-lg")
-], -1);
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleResponsiveBackdrop = !visibleResponsiveBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle static offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAlert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-none d-lg-block<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Resize your browser to show the responsive offcanvas toggle.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CAlert</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleResponsiveBackdrop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleResponsiveBackdrop = !visibleResponsiveBackdrop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Responsive offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleResponsiveBackdrop = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This is content within an <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>.offcanvas-lg<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleResponsiveBackdrop</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="placement" tabindex="-1">Placement <a class="anchor-link" href="#placement" aria-hidden="true">#</a></h2><p>There&#39;s no default placement for offcanvas components, so you must add one of the modifier classes below;</p><ul><li><code>placement=&quot;start&quot;</code> places offcanvas on the left of the viewport (shown above)</li><li><code>placement=&quot;end&quot;</code> places offcanvas on the right of the viewport</li><li><code>placement=&quot;top&quot;</code> places offcanvas on the top of the viewport</li><li><code>placement=&quot;bottom&quot;</code> places offcanvas on the bottom of the viewport</li></ul><p>Try the top, right, and bottom examples out below.</p>', 5);
-const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTop = !visibleTop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle top offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleTop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTop = !visibleTop }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleTop = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleTop</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_43 = { class: "docs-example rounded-top p-4" };
-const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleEnd = !visibleEnd }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle right offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleEnd<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleEnd = !visibleEnd }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleEnd = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleEnd</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_45 = { class: "docs-example rounded-top p-4" };
-const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleBottom = !visibleBottom }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle bottom offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvas</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visibleBottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@hide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleBottom = !visibleBottom }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span>Offcanvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCloseButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-reset<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; { visibleBottom = false }<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Content for the offcanvas goes here. You can place just about any Bootstrap component or</span>\n<span class="line">      custom elements here.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvasBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>COffcanvas</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">        <span class="token literal-property property">visibleBottom</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h2><p>Since the offcanvas panel is conceptually a modal dialog, be sure to add <code>aria-labelledby=&quot;...&quot;</code>—referencing the offcanvas title—to <code>&lt;COffcanvas&gt;</code>. Note that you don’t need to add <code>role=&quot;dialog&quot;</code> since we already add it automatically.</p><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue offcanvas uses local CSS variables on <code>.offcanvas</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 6);
-const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>COffcanvas <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>COffcanvas<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="coffcanvas" tabindex="-1">COffcanvas <a class="anchor-link" href="#coffcanvas" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvas <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvas <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvas&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>backdrop</strong></td><td>Apply a backdrop on body while offcanvas is open.</td><td>boolean|string</td><td><code>boolean | &#39;static&#39;</code></td><td>true</td></tr><tr><td><strong>dark</strong></td><td>Sets a darker color scheme.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>keyboard</strong></td><td>Closes the offcanvas when escape key is pressed.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;bottom&#39;</code></td><td>-</td></tr><tr><td><strong>responsive</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</td><td>boolean|string</td><td><code>boolean | &#39;sm&#39; | &#39;md&#39; | &#39;lg&#39; | &#39;xl&#39; | &#39;xxl&#39;</code></td><td>true</td></tr><tr><td><strong>scroll</strong></td><td>Allow body scrolling while offcanvas is open</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of offcanvas component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="coffcanvastitle" tabindex="-1">COffcanvasTitle <a class="anchor-link" href="#coffcanvastitle" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> COffcanvasTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> COffcanvasTitle <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/offcanvas/COffcanvasTitle&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;h5&#39;</td></tr></tbody></table>', 11);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_COffcanvasTitle = resolveComponent("COffcanvasTitle");
-  const _component_CCloseButton = resolveComponent("CCloseButton");
-  const _component_COffcanvasHeader = resolveComponent("COffcanvasHeader");
-  const _component_COffcanvasBody = resolveComponent("COffcanvasBody");
-  const _component_COffcanvas = resolveComponent("COffcanvas");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CAlert = resolveComponent("CAlert");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    createBaseVNode("div", _hoisted_4, [
-      createBaseVNode("div", _hoisted_5, [
-        createVNode(_component_COffcanvas, {
-          backdrop: false,
-          placement: "start",
-          visible: true
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_COffcanvasHeader, null, {
-              default: withCtx(() => [
-                createVNode(_component_COffcanvasTitle, null, {
-                  default: withCtx(() => [
-                    createTextVNode("Offcanvas")
-                  ]),
-                  _: 1
-                }),
-                createVNode(_component_CCloseButton, { class: "text-reset" })
-              ]),
-              _: 1
-            }),
-            createVNode(_component_COffcanvasBody, null, {
-              default: withCtx(() => [
-                createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })
-      ])
-    ]),
-    _hoisted_6,
-    createBaseVNode("div", _hoisted_10, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[0] || (_cache[0] = () => {
-          $data.visible = !$data.visible;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle offcanvas")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        placement: "start",
-        visible: $data.visible,
-        onHide: _cache[2] || (_cache[2] = () => {
-          $data.visible = !$data.visible;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[1] || (_cache[1] = () => {
-                  $data.visible = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_11,
-    createBaseVNode("div", _hoisted_14, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[3] || (_cache[3] = () => {
-          $data.visibleScrolling = !$data.visibleScrolling;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Enable body scrolling")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        backdrop: false,
-        placement: "start",
-        scroll: "",
-        visible: $data.visibleScrolling,
-        onHide: _cache[5] || (_cache[5] = () => {
-          $data.visibleScrolling = !$data.visibleScrolling;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[4] || (_cache[4] = () => {
-                  $data.visibleScrolling = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              _hoisted_15
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_16,
-    createBaseVNode("div", _hoisted_19, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[6] || (_cache[6] = () => {
-          $data.visibleWithBothOptions = !$data.visibleWithBothOptions;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Enable both scrolling & backdrop")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        placement: "start",
-        scroll: "",
-        visible: $data.visibleWithBothOptions,
-        onHide: _cache[8] || (_cache[8] = () => {
-          $data.visibleWithBothOptions = !$data.visibleWithBothOptions;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[7] || (_cache[7] = () => {
-                  $data.visibleWithBothOptions = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              _hoisted_20
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_21,
-    createBaseVNode("div", _hoisted_24, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[9] || (_cache[9] = () => {
-          $data.visibleWithStaticBackdrop = !$data.visibleWithStaticBackdrop;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle static offcanvas")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        backdrop: "static",
-        placement: "start",
-        visible: $data.visibleWithStaticBackdrop,
-        onHide: _cache[11] || (_cache[11] = () => {
-          $data.visibleWithStaticBackdrop = !$data.visibleWithStaticBackdrop;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[10] || (_cache[10] = () => {
-                  $data.visibleWithStaticBackdrop = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              _hoisted_25
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_26,
-    createBaseVNode("div", _hoisted_29, [
-      createBaseVNode("div", _hoisted_30, [
-        createVNode(_component_COffcanvas, {
-          backdrop: false,
-          dark: "",
-          placement: "start",
-          visible: true
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_COffcanvasHeader, null, {
-              default: withCtx(() => [
-                createVNode(_component_COffcanvasTitle, null, {
-                  default: withCtx(() => [
-                    createTextVNode("Offcanvas")
-                  ]),
-                  _: 1
-                }),
-                createVNode(_component_CCloseButton, { class: "text-reset" })
-              ]),
-              _: 1
-            }),
-            createVNode(_component_COffcanvasBody, null, {
-              default: withCtx(() => [
-                createTextVNode(" Content for the offcanvas goes here. You can place just about any React component or custom elements here. ")
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })
-      ])
-    ]),
-    _hoisted_31,
-    createBaseVNode("div", _hoisted_34, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[12] || (_cache[12] = () => {
-          $data.visibleResponsiveBackdrop = !$data.visibleResponsiveBackdrop;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle offcanvas")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CAlert, {
-        class: "d-none d-lg-block",
-        color: "info"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Resize your browser to show the responsive offcanvas toggle.")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        placement: "start",
-        responsive: "lg",
-        visible: $data.visibleResponsiveBackdrop,
-        onHide: _cache[14] || (_cache[14] = () => {
-          $data.visibleResponsiveBackdrop = !$data.visibleResponsiveBackdrop;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Responsive offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[13] || (_cache[13] = () => {
-                  $data.visibleResponsiveBackdrop = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              _hoisted_35,
-              createTextVNode(". ")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_36,
-    createBaseVNode("div", _hoisted_41, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[15] || (_cache[15] = () => {
-          $data.visibleTop = !$data.visibleTop;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle top offcanvas")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        placement: "top",
-        visible: $data.visibleTop,
-        onHide: _cache[17] || (_cache[17] = () => {
-          $data.visibleTop = !$data.visibleTop;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[16] || (_cache[16] = () => {
-                  $data.visibleTop = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_42,
-    createBaseVNode("div", _hoisted_43, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[18] || (_cache[18] = () => {
-          $data.visibleEnd = !$data.visibleEnd;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle right offcanvas")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        placement: "end",
-        visible: $data.visibleEnd,
-        onHide: _cache[20] || (_cache[20] = () => {
-          $data.visibleEnd = !$data.visibleEnd;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[19] || (_cache[19] = () => {
-                  $data.visibleEnd = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_44,
-    createBaseVNode("div", _hoisted_45, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: _cache[21] || (_cache[21] = () => {
-          $data.visibleBottom = !$data.visibleBottom;
-        })
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Toggle bottom offcanvas")
-        ]),
-        _: 1
-      }),
-      createVNode(_component_COffcanvas, {
-        placement: "bottom",
-        visible: $data.visibleBottom,
-        onHide: _cache[23] || (_cache[23] = () => {
-          $data.visibleBottom = !$data.visibleBottom;
-        })
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_COffcanvasHeader, null, {
-            default: withCtx(() => [
-              createVNode(_component_COffcanvasTitle, null, {
-                default: withCtx(() => [
-                  createTextVNode("Offcanvas")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CCloseButton, {
-                class: "text-reset",
-                onClick: _cache[22] || (_cache[22] = () => {
-                  $data.visibleBottom = false;
-                })
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_COffcanvasBody, null, {
-            default: withCtx(() => [
-              createTextVNode(" Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. ")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["visible"])
-    ]),
-    _hoisted_46,
-    createVNode(_component_ScssDocs, {
-      file: "_offcanvas.scss",
-      capture: "offcanvas-css-vars"
-    }),
-    _hoisted_52,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "offcanvas-variables"
-    }),
-    _hoisted_55
-  ]);
-}
-const offcanvas_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "offcanvas.html.vue"]]);
-const data = JSON.parse('{"path":"/components/offcanvas.html","title":"Vue Offcanvas Component","lang":"en-US","frontmatter":{"title":"Vue Offcanvas Component","name":"Offcanvas","description":"Vue alert component allows build hidden sidebars into your project for navigation, shopping carts.","other_frameworks":"offcanvas","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/offcanvas.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Offcanvas components","slug":"offcanvas-components","link":"#offcanvas-components","children":[]},{"level":3,"title":"Live demo","slug":"live-demo","link":"#live-demo","children":[]},{"level":3,"title":"Body scrolling","slug":"body-scrolling","link":"#body-scrolling","children":[]},{"level":3,"title":"Body scrolling and backdrop","slug":"body-scrolling-and-backdrop","link":"#body-scrolling-and-backdrop","children":[]},{"level":3,"title":"Static backdrop","slug":"static-backdrop","link":"#static-backdrop","children":[]}]},{"level":2,"title":"Dark offcanvas","slug":"dark-offcanvas","link":"#dark-offcanvas","children":[]},{"level":2,"title":"Responsive","slug":"responsive","link":"#responsive","children":[]},{"level":2,"title":"Placement","slug":"placement","link":"#placement","children":[]},{"level":2,"title":"Accessibility","slug":"accessibility","link":"#accessibility","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"COffcanvas","slug":"coffcanvas","link":"#coffcanvas","children":[]},{"level":3,"title":"COffcanvasTitle","slug":"coffcanvastitle","link":"#coffcanvastitle","children":[]}]}],"filePathRelative":"components/offcanvas.md"}');
-export {
-  offcanvas_html as comp,
-  data
-};
diff --git a/vue/docs/assets/options.html-DG8yKKPo.js b/vue/docs/assets/options.html-B9kdngTZ.js
similarity index 99%
rename from vue/docs/assets/options.html-DG8yKKPo.js
rename to vue/docs/assets/options.html-B9kdngTZ.js
index f11ff51bac1..cb3347c344d 100644
--- a/vue/docs/assets/options.html-DG8yKKPo.js
+++ b/vue/docs/assets/options.html-B9kdngTZ.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>Customize CoreUI for Vue with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable&#39;s value and recompile with <code>npm run test</code> as needed.</p><p>You can find and customize these variables for key global options in CoreUI&#39;s <code>@coreui/coreui/scss/_variables.scss</code> file.</p><table class="table table-striped table-api"><thead><tr><th>Variable</th><th>Values</th><th>Description</th></tr></thead><tbody><tr><td><code>$spacer</code></td><td><code>1rem</code> (default), or any value &gt; 0</td><td>Specifies the default spacer value to programmatically generate our <a href="https://coreui.io/docs/utilities/spacing" target="_blank" rel="noopener noreferrer">spacer utilities</a>.</td></tr><tr><td><code>$enable-rounded</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables predefined <code>border-radius</code> styles on various components.</td></tr><tr><td><code>$enable-shadows</code></td><td><code>true</code> or <code>false</code> (default)</td><td>Enables predefined decorative <code>box-shadow</code> styles on various components. Does not affect <code>box-shadow</code>s used for focus states.</td></tr><tr><td><code>$enable-gradients</code></td><td><code>true</code> or <code>false</code> (default)</td><td>Enables predefined gradients via <code>background-image</code> styles on various components.</td></tr><tr><td><code>$enable-transitions</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables predefined <code>transition</code>s on various components.</td></tr><tr><td><code>$enable-reduced-motion</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the <a href="https://coreui.io/docs/getting-started/accessibility#reduced-motion" target="_blank" rel="noopener noreferrer"><code>prefers-reduced-motion</code> media query</a>, which suppresses certain animations/transitions based on the users&#39; browser/operating system preferences.</td></tr><tr><td><code>$enable-grid-classes</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the generation of CSS classes for the grid system (e.g. <code>.row</code>, <code>.col-md-1</code>, etc.).</td></tr><tr><td><code>$enable-container-classes</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the generation of CSS classes for layout containers. (New in v4.2.0)</td></tr><tr><td><code>$enable-caret</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables pseudo element caret on <code>.dropdown-toggle</code>.</td></tr><tr><td><code>$enable-button-pointers</code></td><td><code>true</code> (default) or <code>false</code></td><td>Add &quot;hand&quot; cursor to non-disabled button elements.</td></tr><tr><td><code>$enable-rfs</code></td><td><code>true</code> (default) or <code>false</code></td><td>Globally enables <a href="https://coreui.io/docs/getting-started/rfs" target="_blank" rel="noopener noreferrer">RFS</a>.</td></tr><tr><td><code>$enable-validation-icons</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables <code>background-image</code> icons within textual inputs and some custom forms for validation states.</td></tr><tr><td><code>$enable-negative-margins</code></td><td><code>true</code> or <code>false</code> (default)</td><td>Enables the generation of <a href="https://coreui.io/docs/utilities/spacing#negative-margin" target="_blank" rel="noopener noreferrer">negative margin utilities</a>.</td></tr><tr><td><code>$enable-deprecation-messages</code></td><td><code>true</code> (default) or <code>false</code></td><td>Set to <code>false</code> to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in <code>v6</code>.</td></tr><tr><td><code>$enable-important-utilities</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables the <code>!important</code> suffix in utility classes.</td></tr><tr><td><code>$enable-smooth-scroll</code></td><td><code>true</code> (default) or <code>false</code></td><td>Applies <code>scroll-behavior: smooth</code> globally, except for users asking for reduced motion through <a href="https://coreui.io/docs/getting-started/accessibility#reduced-motion" target="_blank" rel="noopener noreferrer"><code>prefers-reduced-motion</code> media query</a></td></tr><tr><td><code>$enable-ltr</code></td><td><code>false</code> or <code>false</code> (default)</td><td>Enables Left-to-Right</td></tr><tr><td><code>$enable-rtl</code></td><td><code>true</code> (default) or <code>false</code></td><td>Enables Right-to-Left</td></tr></tbody></table>', 3);
 const _hoisted_4 = [
diff --git a/vue/docs/assets/overview.html-CDgnvTPY.js b/vue/docs/assets/overview.html-CDgnvTPY.js
deleted file mode 100644
index da570be6647..00000000000
--- a/vue/docs/assets/overview.html-CDgnvTPY.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "overview",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Overview "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#overview",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "CoreUI’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.", -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("Be sure to use an appropriate "),
-  /* @__PURE__ */ createBaseVNode("code", null, "type"),
-  /* @__PURE__ */ createTextVNode(" attribute on all inputs (e.g., "),
-  /* @__PURE__ */ createBaseVNode("code", null, "email"),
-  /* @__PURE__ */ createTextVNode(" for email address or "),
-  /* @__PURE__ */ createBaseVNode("code", null, "number"),
-  /* @__PURE__ */ createTextVNode(" for numerical information) to take advantage of newer input controls like email verification, number selection, and more.")
-], -1);
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, "Here’s a quick example to demonstrate CoreUI’s form styles. Keep reading for documentation on required classes, form layout, and more.", -1);
-const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = { class: "mb-3" };
-const _hoisted_7 = { class: "mb-3" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputEmail1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputEmail1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>emailHelp<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>emailHelp<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>We&#39;ll never share your email with anyone else.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputPassword1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputPassword1<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check me out<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Submit</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="form-text" tabindex="-1">Form text <a class="anchor-link" href="#form-text" aria-hidden="true">#</a></h2><p>Block-level or inline-level form text can be created using <code>&lt;CFormText&gt;</code>.</p><p>Associating form text with form controls Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.</p><p>Form text below inputs can be styled with <code>&lt;CFormText&gt;</code>. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.</p>', 5);
-const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = { class: "mb-3" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpBlock<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpBlock<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Your password must be 8-20 characters long, contain letters and numbers, and must not</span>\n<span class="line">      contain spaces, special characters, or emoji.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Inline text can use any typical inline HTML element (be it a <code>&lt;span&gt;</code>, <code>&lt;small&gt;</code>, or something else) with nothing more than the <code>.form-text</code> class.</p>', 2);
-const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-3 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Password</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpInline<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpInline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Must be 8-20 characters long.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-forms" tabindex="-1">Disabled forms <a class="anchor-link" href="#disabled-forms" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input here...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within. Browsers treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them.</p><p>However, if your form also includes custom button-like elements such as <code>&lt;CButton&gt;...&lt;/CButton&gt;</code>, these will only be given a style of <code>pointer-events: none</code>, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding <code>tabindex=&quot;-1&quot;</code> to prevent them from receiving focus and <code>aria-disabled=&quot;disabled&quot;</code> to signal their state to assistive technologies.</p>', 6);
-const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = { disabled: "" };
-const _hoisted_26 = /* @__PURE__ */ createBaseVNode("legend", null, "Disabled fieldset example", -1);
-const _hoisted_27 = { class: "mb-3" };
-const _hoisted_28 = { class: "mb-3" };
-const _hoisted_29 = /* @__PURE__ */ createBaseVNode("option", null, "Disabled select", -1);
-const _hoisted_30 = { class: "mb-3" };
-const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">&gt;</span></span>Disabled fieldset example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledTextInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledTextInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Disabled select<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledFieldsetCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Can&#39;t check this<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-function _sfc_render(_ctx, _cache) {
-  const _component_CFormLabel = resolveComponent("CFormLabel");
-  const _component_CFormInput = resolveComponent("CFormInput");
-  const _component_CFormText = resolveComponent("CFormText");
-  const _component_CFormCheck = resolveComponent("CFormCheck");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CForm = resolveComponent("CForm");
-  const _component_CCol = resolveComponent("CCol");
-  const _component_CRow = resolveComponent("CRow");
-  const _component_CFormSelect = resolveComponent("CFormSelect");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_5, [
-      createVNode(_component_CForm, null, {
-        default: withCtx(() => [
-          createBaseVNode("div", _hoisted_6, [
-            createVNode(_component_CFormLabel, { for: "exampleInputEmail1" }, {
-              default: withCtx(() => [
-                createTextVNode("Email address")
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CFormInput, {
-              type: "email",
-              id: "exampleInputEmail1",
-              "aria-describedby": "emailHelp"
-            }),
-            createVNode(_component_CFormText, { id: "emailHelp" }, {
-              default: withCtx(() => [
-                createTextVNode("We'll never share your email with anyone else.")
-              ]),
-              _: 1
-            })
-          ]),
-          createBaseVNode("div", _hoisted_7, [
-            createVNode(_component_CFormLabel, { for: "exampleInputPassword1" }, {
-              default: withCtx(() => [
-                createTextVNode("Email Password")
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CFormInput, {
-              type: "password",
-              id: "exampleInputPassword1"
-            })
-          ]),
-          createVNode(_component_CFormCheck, {
-            class: "mb-3",
-            label: "Check me out"
-          }),
-          createVNode(_component_CButton, {
-            type: "submit",
-            color: "primary"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(" Submit ")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_8,
-    createBaseVNode("div", _hoisted_13, [
-      createVNode(_component_CForm, null, {
-        default: withCtx(() => [
-          createBaseVNode("div", _hoisted_14, [
-            createVNode(_component_CFormLabel, { for: "inputPassword5" }, {
-              default: withCtx(() => [
-                createTextVNode("Password")
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CFormInput, {
-              type: "password",
-              id: "inputPassword5",
-              "aria-describedby": "passwordHelpBlock"
-            }),
-            createVNode(_component_CFormText, { id: "passwordHelpBlock" }, {
-              default: withCtx(() => [
-                createTextVNode(" Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. ")
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_15,
-    createBaseVNode("div", _hoisted_17, [
-      createVNode(_component_CRow, { class: "g-3 align-items-center" }, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, { xs: "auto" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormLabel, {
-                for: "inputPassword6",
-                class: "col-form-label"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(" Password ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "auto" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                type: "password",
-                id: "inputPassword6",
-                "aria-describedby": "passwordHelpInline"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "auto" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormText, {
-                as: "span",
-                id: "passwordHelpInline"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(" Must be 8-20 characters long. ")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_18,
-    createBaseVNode("div", _hoisted_24, [
-      createVNode(_component_CForm, null, {
-        default: withCtx(() => [
-          createBaseVNode("fieldset", _hoisted_25, [
-            _hoisted_26,
-            createBaseVNode("div", _hoisted_27, [
-              createVNode(_component_CFormLabel, { for: "disabledTextInput" }, {
-                default: withCtx(() => [
-                  createTextVNode("Disabled input")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CFormInput, {
-                id: "disabledTextInput",
-                placeholder: "Disabled input"
-              })
-            ]),
-            createBaseVNode("div", _hoisted_28, [
-              createVNode(_component_CFormLabel, { for: "disabledSelect" }, {
-                default: withCtx(() => [
-                  createTextVNode("Disabled select menu")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CFormSelect, { id: "disabledSelect" }, {
-                default: withCtx(() => [
-                  _hoisted_29
-                ]),
-                _: 1
-              })
-            ]),
-            createBaseVNode("div", _hoisted_30, [
-              createVNode(_component_CFormCheck, {
-                id: "disabledFieldsetCheck",
-                label: "Can't check this",
-                disabled: ""
-              })
-            ]),
-            createVNode(_component_CButton, {
-              color: "primary",
-              type: "submit"
-            }, {
-              default: withCtx(() => [
-                createTextVNode("Submit")
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_31
-  ]);
-}
-const overview_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "overview.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/overview.html","title":"Vue Form Components","lang":"en-US","frontmatter":{"title":"Vue Form Components","name":"Overview","description":"Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/overview.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"Form text","slug":"form-text","link":"#form-text","children":[]},{"level":2,"title":"Disabled forms","slug":"disabled-forms","link":"#disabled-forms","children":[]}],"filePathRelative":"forms/overview.md"}');
-export {
-  overview_html as comp,
-  data
-};
diff --git a/vue/docs/assets/overview.html-DEHhVOWL.js b/vue/docs/assets/overview.html-DEHhVOWL.js
new file mode 100644
index 00000000000..003d40730c5
--- /dev/null
+++ b/vue/docs/assets/overview.html-DEHhVOWL.js
@@ -0,0 +1,242 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "overview",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Overview "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#overview",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "CoreUI’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.", -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("Be sure to use an appropriate "),
+  /* @__PURE__ */ createBaseVNode("code", null, "type"),
+  /* @__PURE__ */ createTextVNode(" attribute on all inputs (e.g., "),
+  /* @__PURE__ */ createBaseVNode("code", null, "email"),
+  /* @__PURE__ */ createTextVNode(" for email address or "),
+  /* @__PURE__ */ createBaseVNode("code", null, "number"),
+  /* @__PURE__ */ createTextVNode(" for numerical information) to take advantage of newer input controls like email verification, number selection, and more.")
+], -1);
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, "Here’s a quick example to demonstrate CoreUI’s form styles. Keep reading for documentation on required classes, form layout, and more.", -1);
+const _hoisted_5 = { class: "docs-example rounded-top p-4" };
+const _hoisted_6 = { class: "mb-3" };
+const _hoisted_7 = { class: "mb-3" };
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputEmail1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email address<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputEmail1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>emailHelp<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>emailHelp<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>We&#39;ll never share your email with anyone else.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputPassword1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleInputPassword1<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check me out<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Submit</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="form-text" tabindex="-1">Form text <a class="anchor-link" href="#form-text" aria-hidden="true">#</a></h2><p>Block-level or inline-level form text can be created using <code>&lt;CFormText&gt;</code>.</p><p>Associating form text with form controls Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.</p><p>Form text below inputs can be styled with <code>&lt;CFormText&gt;</code>. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.</p>', 5);
+const _hoisted_13 = { class: "docs-example rounded-top p-4" };
+const _hoisted_14 = { class: "mb-3" };
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpBlock<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpBlock<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Your password must be 8-20 characters long, contain letters and numbers, and must not</span>\n<span class="line">      contain spaces, special characters, or emoji.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Inline text can use any typical inline HTML element (be it a <code>&lt;span&gt;</code>, <code>&lt;small&gt;</code>, or something else) with nothing more than the <code>.form-text</code> class.</p>', 2);
+const _hoisted_17 = { class: "docs-example rounded-top p-4" };
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g-3 align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Password</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputPassword6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpInline<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpInline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Must be 8-20 characters long.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-forms" tabindex="-1">Disabled forms <a class="anchor-link" href="#disabled-forms" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input here...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within. Browsers treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them.</p><p>However, if your form also includes custom button-like elements such as <code>&lt;CButton&gt;...&lt;/CButton&gt;</code>, these will only be given a style of <code>pointer-events: none</code>, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding <code>tabindex=&quot;-1&quot;</code> to prevent them from receiving focus and <code>aria-disabled=&quot;disabled&quot;</code> to signal their state to assistive technologies.</p>', 6);
+const _hoisted_24 = { class: "docs-example rounded-top p-4" };
+const _hoisted_25 = { disabled: "" };
+const _hoisted_26 = /* @__PURE__ */ createBaseVNode("legend", null, "Disabled fieldset example", -1);
+const _hoisted_27 = { class: "mb-3" };
+const _hoisted_28 = { class: "mb-3" };
+const _hoisted_29 = /* @__PURE__ */ createBaseVNode("option", null, "Disabled select", -1);
+const _hoisted_30 = { class: "mb-3" };
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">&gt;</span></span>Disabled fieldset example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledTextInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledTextInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled input<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Disabled select<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledFieldsetCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Can&#39;t check this<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+function _sfc_render(_ctx, _cache) {
+  const _component_CFormLabel = resolveComponent("CFormLabel");
+  const _component_CFormInput = resolveComponent("CFormInput");
+  const _component_CFormText = resolveComponent("CFormText");
+  const _component_CFormCheck = resolveComponent("CFormCheck");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CForm = resolveComponent("CForm");
+  const _component_CCol = resolveComponent("CCol");
+  const _component_CRow = resolveComponent("CRow");
+  const _component_CFormSelect = resolveComponent("CFormSelect");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    _hoisted_3,
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_5, [
+      createVNode(_component_CForm, null, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_6, [
+            createVNode(_component_CFormLabel, { for: "exampleInputEmail1" }, {
+              default: withCtx(() => [
+                createTextVNode("Email address")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CFormInput, {
+              type: "email",
+              id: "exampleInputEmail1",
+              "aria-describedby": "emailHelp"
+            }),
+            createVNode(_component_CFormText, { id: "emailHelp" }, {
+              default: withCtx(() => [
+                createTextVNode("We'll never share your email with anyone else.")
+              ]),
+              _: 1
+            })
+          ]),
+          createBaseVNode("div", _hoisted_7, [
+            createVNode(_component_CFormLabel, { for: "exampleInputPassword1" }, {
+              default: withCtx(() => [
+                createTextVNode("Email Password")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CFormInput, {
+              type: "password",
+              id: "exampleInputPassword1"
+            })
+          ]),
+          createVNode(_component_CFormCheck, {
+            class: "mb-3",
+            label: "Check me out"
+          }),
+          createVNode(_component_CButton, {
+            type: "submit",
+            color: "primary"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(" Submit ")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_8,
+    createBaseVNode("div", _hoisted_13, [
+      createVNode(_component_CForm, null, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_14, [
+            createVNode(_component_CFormLabel, { for: "inputPassword5" }, {
+              default: withCtx(() => [
+                createTextVNode("Password")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CFormInput, {
+              type: "password",
+              id: "inputPassword5",
+              "aria-describedby": "passwordHelpBlock"
+            }),
+            createVNode(_component_CFormText, { id: "passwordHelpBlock" }, {
+              default: withCtx(() => [
+                createTextVNode(" Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. ")
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_15,
+    createBaseVNode("div", _hoisted_17, [
+      createVNode(_component_CRow, { class: "g-3 align-items-center" }, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { xs: "auto" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormLabel, {
+                for: "inputPassword6",
+                class: "col-form-label"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" Password ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "auto" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                type: "password",
+                id: "inputPassword6",
+                "aria-describedby": "passwordHelpInline"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "auto" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormText, {
+                as: "span",
+                id: "passwordHelpInline"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" Must be 8-20 characters long. ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_18,
+    createBaseVNode("div", _hoisted_24, [
+      createVNode(_component_CForm, null, {
+        default: withCtx(() => [
+          createBaseVNode("fieldset", _hoisted_25, [
+            _hoisted_26,
+            createBaseVNode("div", _hoisted_27, [
+              createVNode(_component_CFormLabel, { for: "disabledTextInput" }, {
+                default: withCtx(() => [
+                  createTextVNode("Disabled input")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CFormInput, {
+                id: "disabledTextInput",
+                placeholder: "Disabled input"
+              })
+            ]),
+            createBaseVNode("div", _hoisted_28, [
+              createVNode(_component_CFormLabel, { for: "disabledSelect" }, {
+                default: withCtx(() => [
+                  createTextVNode("Disabled select menu")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CFormSelect, { id: "disabledSelect" }, {
+                default: withCtx(() => [
+                  _hoisted_29
+                ]),
+                _: 1
+              })
+            ]),
+            createBaseVNode("div", _hoisted_30, [
+              createVNode(_component_CFormCheck, {
+                id: "disabledFieldsetCheck",
+                label: "Can't check this",
+                disabled: ""
+              })
+            ]),
+            createVNode(_component_CButton, {
+              color: "primary",
+              type: "submit"
+            }, {
+              default: withCtx(() => [
+                createTextVNode("Submit")
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_31
+  ]);
+}
+const overview_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "overview.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/overview.html","title":"Vue Form Components","lang":"en-US","frontmatter":{"title":"Vue Form Components","name":"Overview","description":"Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/overview.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"Form text","slug":"form-text","link":"#form-text","children":[]},{"level":2,"title":"Disabled forms","slug":"disabled-forms","link":"#disabled-forms","children":[]}],"filePathRelative":"forms/overview.md"}');
+export {
+  overview_html as comp,
+  data
+};
diff --git a/vue/docs/assets/pagination.html-BlNq3AJ1.js b/vue/docs/assets/pagination.html-BlNq3AJ1.js
new file mode 100644
index 00000000000..5e9abe122c1
--- /dev/null
+++ b/vue/docs/assets/pagination.html-BlNq3AJ1.js
@@ -0,0 +1,341 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to screen readers and other assistive technologies.</p><p>In addition, as pages likely have more than one such navigation section, it&#39;s advisable to provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label=&quot;Search results pages&quot;</code>.</p>', 3);
+const _hoisted_4 = { class: "docs-example rounded-top p-4" };
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="working-with-icons" tabindex="-1">Working with icons <a class="anchor-link" href="#working-with-icons" aria-hidden="true">#</a></h2><p>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with <code>aria</code> attributes.</p>', 3);
+const _hoisted_8 = { class: "docs-example rounded-top p-4" };
+const _hoisted_9 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "«", -1);
+const _hoisted_10 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "»", -1);
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Previous<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="«">&amp;laquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Next<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="»">&amp;raquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-and-active-states" tabindex="-1">Disabled and active states <a class="anchor-link" href="#disabled-and-active-states" aria-hidden="true">#</a></h2><p>Pagination links are customizable for different circumstances. Use <code>disabled</code> for links that appear un-clickable and <code>.active</code> to indicate the current page.</p><p>While the <code>disabled</code> prop uses <code>pointer-events: none</code> to <em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS property is not yet standardized and doesn&#39;t account for keyboard navigation. As such, we always add <code>tabindex=&quot;-1&quot;</code> on disabled links and use custom JavaScript to fully disable their functionality.</p>', 4);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "«", -1);
+const _hoisted_17 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "»", -1);
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Previous<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="«">&amp;laquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Next<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="»">&amp;raquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Fancy larger or smaller pagination? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
+const _hoisted_21 = { class: "docs-example rounded-top p-4" };
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_23 = { class: "docs-example rounded-top p-4" };
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="alignment" tabindex="-1">Alignment <a class="anchor-link" href="#alignment" aria-hidden="true">#</a></h2><p>Change the alignment of pagination components with <code>align</code> property.</p>', 3);
+const _hoisted_27 = { class: "docs-example rounded-top p-4" };
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_29 = { class: "docs-example rounded-top p-4" };
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue pagination use local CSS variables on <code>.pagination</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CPagination <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CCard<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cpagination" tabindex="-1">CPagination <a class="anchor-link" href="#cpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the alignment of pagination components.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cpaginationitem" tabindex="-1">CPaginationItem <a class="anchor-link" href="#cpaginationitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPaginationItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPaginationItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPaginationItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 9);
+function _sfc_render(_ctx, _cache) {
+  const _component_CPaginationItem = resolveComponent("CPaginationItem");
+  const _component_CPagination = resolveComponent("CPagination");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_4, [
+      createVNode(_component_CPagination, { "aria-label": "Page navigation example" }, {
+        default: withCtx(() => [
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Previous")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("1")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("2")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("3")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Next")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_5,
+    createBaseVNode("div", _hoisted_8, [
+      createVNode(_component_CPagination, { "aria-label": "Page navigation example" }, {
+        default: withCtx(() => [
+          createVNode(_component_CPaginationItem, {
+            "aria-label": "Previous",
+            href: "#"
+          }, {
+            default: withCtx(() => [
+              _hoisted_9
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("1")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("2")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("3")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, {
+            "aria-label": "Next",
+            href: "#"
+          }, {
+            default: withCtx(() => [
+              _hoisted_10
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_11,
+    createBaseVNode("div", _hoisted_15, [
+      createVNode(_component_CPagination, { "aria-label": "Page navigation example" }, {
+        default: withCtx(() => [
+          createVNode(_component_CPaginationItem, {
+            "aria-label": "Previous",
+            href: "#",
+            disabled: ""
+          }, {
+            default: withCtx(() => [
+              _hoisted_16
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, {
+            href: "#",
+            active: ""
+          }, {
+            default: withCtx(() => [
+              createTextVNode("1")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("2")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("3")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, {
+            "aria-label": "Next",
+            href: "#"
+          }, {
+            default: withCtx(() => [
+              _hoisted_17
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_18,
+    createBaseVNode("div", _hoisted_21, [
+      createVNode(_component_CPagination, {
+        size: "lg",
+        "aria-label": "Page navigation example"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Previous")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("1")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("2")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("3")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Next")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_22,
+    createBaseVNode("div", _hoisted_23, [
+      createVNode(_component_CPagination, {
+        size: "sm",
+        "aria-label": "Page navigation example"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Previous")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("1")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("2")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("3")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Next")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_24,
+    createBaseVNode("div", _hoisted_27, [
+      createVNode(_component_CPagination, {
+        align: "center",
+        "aria-label": "Page navigation example"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CPaginationItem, { disabled: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Previous")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("1")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("2")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("3")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Next")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_28,
+    createBaseVNode("div", _hoisted_29, [
+      createVNode(_component_CPagination, {
+        align: "end",
+        "aria-label": "Page navigation example"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CPaginationItem, { disabled: "" }, {
+            default: withCtx(() => [
+              createTextVNode("Previous")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("1")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("2")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("3")
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CPaginationItem, { href: "#" }, {
+            default: withCtx(() => [
+              createTextVNode("Next")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_30,
+    createVNode(_component_ScssDocs, {
+      file: "_pagination.scss",
+      capture: "pagination-css-vars"
+    }),
+    _hoisted_34,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "pagination-variables"
+    }),
+    _hoisted_37
+  ]);
+}
+const pagination_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "pagination.html.vue"]]);
+const data = JSON.parse('{"path":"/components/pagination.html","title":"Vue Pagination Component","lang":"en-US","frontmatter":{"title":"Vue Pagination Component","name":"Pagination","description":"Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.","other_frameworks":"pagination","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/pagination.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"Working with icons","slug":"working-with-icons","link":"#working-with-icons","children":[]},{"level":2,"title":"Disabled and active states","slug":"disabled-and-active-states","link":"#disabled-and-active-states","children":[]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Alignment","slug":"alignment","link":"#alignment","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CPagination","slug":"cpagination","link":"#cpagination","children":[]},{"level":3,"title":"CPaginationItem","slug":"cpaginationitem","link":"#cpaginationitem","children":[]}]}],"filePathRelative":"components/pagination.md"}');
+export {
+  pagination_html as comp,
+  data
+};
diff --git a/vue/docs/assets/pagination.html-CrGjPQzq.js b/vue/docs/assets/pagination.html-CrGjPQzq.js
deleted file mode 100644
index c1b08183621..00000000000
--- a/vue/docs/assets/pagination.html-CrGjPQzq.js
+++ /dev/null
@@ -1,341 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to screen readers and other assistive technologies.</p><p>In addition, as pages likely have more than one such navigation section, it&#39;s advisable to provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label=&quot;Search results pages&quot;</code>.</p>', 3);
-const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="working-with-icons" tabindex="-1">Working with icons <a class="anchor-link" href="#working-with-icons" aria-hidden="true">#</a></h2><p>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with <code>aria</code> attributes.</p>', 3);
-const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "«", -1);
-const _hoisted_10 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "»", -1);
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Previous<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="«">&amp;laquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Next<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="»">&amp;raquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled-and-active-states" tabindex="-1">Disabled and active states <a class="anchor-link" href="#disabled-and-active-states" aria-hidden="true">#</a></h2><p>Pagination links are customizable for different circumstances. Use <code>disabled</code> for links that appear un-clickable and <code>.active</code> to indicate the current page.</p><p>While the <code>disabled</code> prop uses <code>pointer-events: none</code> to <em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS property is not yet standardized and doesn&#39;t account for keyboard navigation. As such, we always add <code>tabindex=&quot;-1&quot;</code> on disabled links and use custom JavaScript to fully disable their functionality.</p>', 4);
-const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "«", -1);
-const _hoisted_17 = /* @__PURE__ */ createBaseVNode("span", { "aria-hidden": "true" }, "»", -1);
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Previous<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="«">&amp;laquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Next<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="»">&amp;raquo;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Fancy larger or smaller pagination? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
-const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="alignment" tabindex="-1">Alignment <a class="anchor-link" href="#alignment" aria-hidden="true">#</a></h2><p>Change the alignment of pagination components with <code>align</code> property.</p>', 3);
-const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPagination</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Page navigation example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPaginationItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPaginationItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPagination</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue pagination use local CSS variables on <code>.pagination</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CPagination <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CCard<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cpagination" tabindex="-1">CPagination <a class="anchor-link" href="#cpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the alignment of pagination components.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr></tbody></table><h3 id="cpaginationitem" tabindex="-1">CPaginationItem <a class="anchor-link" href="#cpaginationitem" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPaginationItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPaginationItem <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/pagination/CPaginationItem&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Toggle the active state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>href</strong></td><td>The href attribute specifies the URL of the page the link goes to.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table>', 9);
-function _sfc_render(_ctx, _cache) {
-  const _component_CPaginationItem = resolveComponent("CPaginationItem");
-  const _component_CPagination = resolveComponent("CPagination");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_4, [
-      createVNode(_component_CPagination, { "aria-label": "Page navigation example" }, {
-        default: withCtx(() => [
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Previous")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("1")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("2")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("3")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Next")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_5,
-    createBaseVNode("div", _hoisted_8, [
-      createVNode(_component_CPagination, { "aria-label": "Page navigation example" }, {
-        default: withCtx(() => [
-          createVNode(_component_CPaginationItem, {
-            "aria-label": "Previous",
-            href: "#"
-          }, {
-            default: withCtx(() => [
-              _hoisted_9
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("1")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("2")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("3")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, {
-            "aria-label": "Next",
-            href: "#"
-          }, {
-            default: withCtx(() => [
-              _hoisted_10
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_11,
-    createBaseVNode("div", _hoisted_15, [
-      createVNode(_component_CPagination, { "aria-label": "Page navigation example" }, {
-        default: withCtx(() => [
-          createVNode(_component_CPaginationItem, {
-            "aria-label": "Previous",
-            href: "#",
-            disabled: ""
-          }, {
-            default: withCtx(() => [
-              _hoisted_16
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, {
-            href: "#",
-            active: ""
-          }, {
-            default: withCtx(() => [
-              createTextVNode("1")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("2")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("3")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, {
-            "aria-label": "Next",
-            href: "#"
-          }, {
-            default: withCtx(() => [
-              _hoisted_17
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_18,
-    createBaseVNode("div", _hoisted_21, [
-      createVNode(_component_CPagination, {
-        size: "lg",
-        "aria-label": "Page navigation example"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Previous")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("1")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("2")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("3")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Next")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_22,
-    createBaseVNode("div", _hoisted_23, [
-      createVNode(_component_CPagination, {
-        size: "sm",
-        "aria-label": "Page navigation example"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Previous")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("1")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("2")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("3")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Next")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_24,
-    createBaseVNode("div", _hoisted_27, [
-      createVNode(_component_CPagination, {
-        align: "center",
-        "aria-label": "Page navigation example"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CPaginationItem, { disabled: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Previous")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("1")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("2")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("3")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Next")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_28,
-    createBaseVNode("div", _hoisted_29, [
-      createVNode(_component_CPagination, {
-        align: "end",
-        "aria-label": "Page navigation example"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CPaginationItem, { disabled: "" }, {
-            default: withCtx(() => [
-              createTextVNode("Previous")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("1")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("2")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("3")
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CPaginationItem, { href: "#" }, {
-            default: withCtx(() => [
-              createTextVNode("Next")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_30,
-    createVNode(_component_ScssDocs, {
-      file: "_pagination.scss",
-      capture: "pagination-css-vars"
-    }),
-    _hoisted_34,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "pagination-variables"
-    }),
-    _hoisted_37
-  ]);
-}
-const pagination_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "pagination.html.vue"]]);
-const data = JSON.parse('{"path":"/components/pagination.html","title":"Vue Pagination Component","lang":"en-US","frontmatter":{"title":"Vue Pagination Component","name":"Pagination","description":"Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.","other_frameworks":"pagination","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/pagination.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"Working with icons","slug":"working-with-icons","link":"#working-with-icons","children":[]},{"level":2,"title":"Disabled and active states","slug":"disabled-and-active-states","link":"#disabled-and-active-states","children":[]},{"level":2,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":2,"title":"Alignment","slug":"alignment","link":"#alignment","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CPagination","slug":"cpagination","link":"#cpagination","children":[]},{"level":3,"title":"CPaginationItem","slug":"cpaginationitem","link":"#cpaginationitem","children":[]}]}],"filePathRelative":"components/pagination.md"}');
-export {
-  pagination_html as comp,
-  data
-};
diff --git a/vue/docs/assets/placeholder.html-BBrpG9kK.js b/vue/docs/assets/placeholder.html-BBrpG9kK.js
new file mode 100644
index 00000000000..0cbdb74a0ab
--- /dev/null
+++ b/vue/docs/assets/placeholder.html-BBrpG9kK.js
@@ -0,0 +1,291 @@
+import { _ as _export_sfc, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, Y as withDirectives, f as createTextVNode, a as createStaticVNode, h as createBlock } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "about",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("About "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#about",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.", -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "example",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Example "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#example",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, 'In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.', -1);
+const _hoisted_5 = /* @__PURE__ */ createBaseVNode("p", null, 'In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.', -1);
+const _hoisted_6 = { class: "docs-example rounded-top p-4" };
+const _hoisted_7 = { class: "d-flex justify-content-around" };
+const _hoisted_8 = /* @__PURE__ */ createBaseVNode("title", null, "Placeholder", -1);
+const _hoisted_9 = /* @__PURE__ */ createBaseVNode("rect", {
+  width: "100%",
+  height: "100%",
+  fill: "#868e96"
+}, null, -1);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$withBase(&#39;/images/vue.jpg&#39;)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Some quick example text to build on the card title and make up the bulk of the card&#39;s</span>\n<span class="line">      content.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>162<span class="token punctuation">&quot;</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Placeholder<span class="token punctuation">&quot;</span></span> <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span> <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Placeholder<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#868e96<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardImage</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{animation: &#39;glow&#39;, xs: 7}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{animation: &#39;glow&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{xs: 6}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>Create placeholders with the <code>&lt;CPlaceholder&gt;</code> component and a grid column propx (e.g., <code>:xs=&quot;6&quot;</code>) to set the <code>width</code>. They can replace the text inside an element or be added as a modifier class to an existing component.</p><p>We apply additional styling to <code>CButton</code>s via <code>::before</code> to ensure the <code>height</code> is respected. You may extend this pattern for other situations as needed, or add a <code>&amp;nbsp;</code> within the element to reflect the height when actual text is rendered in its place.</p>', 4);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = { "aria-hidden": "true" };
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{xs: 4}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_17 = /* @__PURE__ */ createBaseVNode("code", null, 'aria-hidden="true"', -1);
+const _hoisted_18 = /* @__PURE__ */ createBaseVNode("strong", null, "loading", -1);
+const _hoisted_19 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "width",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Width "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#width",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_20 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("You can change the "),
+  /* @__PURE__ */ createBaseVNode("code", null, "width"),
+  /* @__PURE__ */ createTextVNode(" through grid column classes, width utilities, or inline styles.")
+], -1);
+const _hoisted_21 = { class: "docs-example rounded-top p-4" };
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-75<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 30%</span><span class="token punctuation">&quot;</span></span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="color" tabindex="-1">Color <a class="anchor-link" href="#color" aria-hidden="true">#</a></h3><p>By default, the <code>&lt;CPlaceholder&gt;</code> uses <code>currentColor</code>. This can be overridden with a custom color or utility class.</p>', 3);
+const _hoisted_25 = { class: "docs-example rounded-top p-4" };
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h3><p>The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of the parent element. Customize them with <code>size</code> prop: <code>lg</code>, <code>sm</code>, or <code>xs</code>.</p>', 3);
+const _hoisted_29 = { class: "docs-example rounded-top p-4" };
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="animation" tabindex="-1">Animation <a class="anchor-link" href="#animation" aria-hidden="true">#</a></h3><p>Animate placeholders with <code>animation=&quot;glow&quot;</code> or <code>animation=&quot;wave&quot;</code> to better convey the perception of something being <em>actively</em> loaded.</p>', 3);
+const _hoisted_33 = { class: "docs-example rounded-top p-4" };
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>glow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPlaceholder</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wave<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPlaceholder</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPlaceholder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPlaceholder <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/placeholder/CPlaceholder&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong></td><td>Set animation type to better convey the perception of something being actively loaded.</td><td>string</td><td><code>&#39;glow&#39;</code>, <code>&#39;wave&#39;</code></td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component extra small, small, or large.</td><td>string</td><td><code>&#39;xs&#39;</code>, <code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>xs</strong></td><td>The number of columns on extra small devices (&lt;576px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns on small devices (&lt;768px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns on medium devices (&lt;992px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns on large devices (&lt;1200px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns on X-Large devices (&lt;1400px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns on XX-Large devices (≥1400px).</td><td>number</td><td>-</td><td>-</td></tr></tbody></table>', 6);
+function _sfc_render(_ctx, _cache) {
+  const _component_CCardImage = resolveComponent("CCardImage");
+  const _component_CCardTitle = resolveComponent("CCardTitle");
+  const _component_CCardText = resolveComponent("CCardText");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CCardBody = resolveComponent("CCardBody");
+  const _component_CCard = resolveComponent("CCard");
+  const _component_CPlaceholder = resolveComponent("CPlaceholder");
+  const _component_Callout = resolveComponent("Callout");
+  const _directive_c_placeholder = resolveDirective("c-placeholder");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    _hoisted_3,
+    _hoisted_4,
+    _hoisted_5,
+    createBaseVNode("div", _hoisted_6, [
+      createBaseVNode("div", _hoisted_7, [
+        createVNode(_component_CCard, { style: { "width": "18rem" } }, {
+          default: withCtx(() => [
+            createVNode(_component_CCardImage, {
+              orientation: "top",
+              src: _ctx.$withBase("/images/vue.jpg")
+            }, null, 8, ["src"]),
+            createVNode(_component_CCardBody, null, {
+              default: withCtx(() => [
+                createVNode(_component_CCardTitle, null, {
+                  default: withCtx(() => [
+                    createTextVNode("Card title")
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_CCardText, null, {
+                  default: withCtx(() => [
+                    createTextVNode(" Some quick example text to build on the card title and make up the bulk of the card's content. ")
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_CButton, {
+                  color: "primary",
+                  href: "#"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("Go somewhere")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }),
+        createVNode(_component_CCard, { style: { "width": "18rem" } }, {
+          default: withCtx(() => [
+            createVNode(_component_CCardImage, {
+              as: "svg",
+              orientation: "top",
+              width: "100%",
+              height: "162",
+              xmlns: "http://www.w3.org/2000/svg",
+              role: "img",
+              "aria-label": "Placeholder",
+              preserveAspectRatio: "xMidYMid slice",
+              focusable: "false"
+            }, {
+              default: withCtx(() => [
+                _hoisted_8,
+                _hoisted_9
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CCardBody, null, {
+              default: withCtx(() => [
+                withDirectives((openBlock(), createBlock(_component_CCardTitle, null, {
+                  default: withCtx(() => [
+                    createVNode(_component_CPlaceholder, { xs: 6 })
+                  ]),
+                  _: 1
+                })), [
+                  [_directive_c_placeholder, { animation: "glow", xs: 7 }]
+                ]),
+                withDirectives((openBlock(), createBlock(_component_CCardText, null, {
+                  default: withCtx(() => [
+                    createVNode(_component_CPlaceholder, { xs: 7 }),
+                    createVNode(_component_CPlaceholder, { xs: 4 }),
+                    createVNode(_component_CPlaceholder, { xs: 4 }),
+                    createVNode(_component_CPlaceholder, { xs: 6 }),
+                    createVNode(_component_CPlaceholder, { xs: 8 })
+                  ]),
+                  _: 1
+                })), [
+                  [_directive_c_placeholder, { animation: "glow" }]
+                ]),
+                withDirectives(createVNode(_component_CButton, {
+                  color: "primary",
+                  "aria-hidden": "true",
+                  disabled: "",
+                  href: "#",
+                  tabindex: "-1"
+                }, null, 512), [
+                  [_directive_c_placeholder, { xs: 6 }]
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    _hoisted_10,
+    createBaseVNode("div", _hoisted_14, [
+      createBaseVNode("p", _hoisted_15, [
+        createVNode(_component_CPlaceholder, { xs: 6 })
+      ]),
+      withDirectives(createVNode(_component_CButton, {
+        color: "primary",
+        "aria-hidden": "true",
+        disabled: "",
+        href: "#",
+        tabindex: "-1"
+      }, null, 512), [
+        [_directive_c_placeholder, { xs: 4 }]
+      ])
+    ]),
+    _hoisted_16,
+    createVNode(_component_Callout, { color: "info" }, {
+      default: withCtx(() => [
+        createTextVNode(" The use of "),
+        _hoisted_17,
+        createTextVNode(" only indicates that the element should be hidden to screen readers. The "),
+        _hoisted_18,
+        createTextVNode(" behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update. ")
+      ]),
+      _: 1
+    }),
+    _hoisted_19,
+    _hoisted_20,
+    createBaseVNode("div", _hoisted_21, [
+      createVNode(_component_CPlaceholder, { xs: 6 }),
+      createVNode(_component_CPlaceholder, { class: "w-75" }),
+      createVNode(_component_CPlaceholder, { style: { "width": "30%" } })
+    ]),
+    _hoisted_22,
+    createBaseVNode("div", _hoisted_25, [
+      createVNode(_component_CPlaceholder, { xs: 12 }),
+      createVNode(_component_CPlaceholder, {
+        color: "primary",
+        xs: 12
+      }),
+      createVNode(_component_CPlaceholder, {
+        color: "secondary",
+        xs: 12
+      }),
+      createVNode(_component_CPlaceholder, {
+        color: "success",
+        xs: 12
+      }),
+      createVNode(_component_CPlaceholder, {
+        color: "danger",
+        xs: 12
+      }),
+      createVNode(_component_CPlaceholder, {
+        color: "warning",
+        xs: 12
+      }),
+      createVNode(_component_CPlaceholder, {
+        color: "info",
+        xs: 12
+      }),
+      createVNode(_component_CPlaceholder, {
+        color: "light",
+        xs: 12
+      }),
+      createVNode(_component_CPlaceholder, {
+        color: "dark",
+        xs: 12
+      })
+    ]),
+    _hoisted_26,
+    createBaseVNode("div", _hoisted_29, [
+      createVNode(_component_CPlaceholder, {
+        xs: 12,
+        size: "lg"
+      }),
+      createVNode(_component_CPlaceholder, { xs: 12 }),
+      createVNode(_component_CPlaceholder, {
+        xs: 12,
+        size: "sm"
+      }),
+      createVNode(_component_CPlaceholder, {
+        xs: 12,
+        size: "xs"
+      })
+    ]),
+    _hoisted_30,
+    createBaseVNode("div", _hoisted_33, [
+      createVNode(_component_CPlaceholder, {
+        as: "p",
+        animation: "glow"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CPlaceholder, { xs: 12 })
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CPlaceholder, {
+        as: "p",
+        animation: "wave"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CPlaceholder, { xs: 12 })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_34
+  ]);
+}
+const placeholder_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "placeholder.html.vue"]]);
+const data = JSON.parse('{"path":"/components/placeholder.html","title":"Vue Placeholder Component","lang":"en-US","frontmatter":{"title":"Vue Placeholder Component","name":"Placeholder","description":"Use loading vue placeholders for your components or pages to indicate something may still be loading.","other_frameworks":"placeholder","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/placeholder.html"}]]},"headers":[{"level":2,"title":"About","slug":"about","link":"#about","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[{"level":3,"title":"Width","slug":"width","link":"#width","children":[]},{"level":3,"title":"Color","slug":"color","link":"#color","children":[]},{"level":3,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":3,"title":"Animation","slug":"animation","link":"#animation","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CPlaceholder","slug":"cplaceholder","link":"#cplaceholder","children":[]}]}],"filePathRelative":"components/placeholder.md"}');
+export {
+  placeholder_html as comp,
+  data
+};
diff --git a/vue/docs/assets/placeholder.html-CClTj12m.js b/vue/docs/assets/placeholder.html-CClTj12m.js
deleted file mode 100644
index 3b4781aebbc..00000000000
--- a/vue/docs/assets/placeholder.html-CClTj12m.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, Y as resolveDirective, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, Z as withDirectives, e as createTextVNode, f as createStaticVNode, h as createBlock } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "about",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("About "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#about",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.", -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "example",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Example "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, 'In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.', -1);
-const _hoisted_5 = /* @__PURE__ */ createBaseVNode("p", null, 'In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.', -1);
-const _hoisted_6 = { class: "docs-example rounded-top p-4" };
-const _hoisted_7 = { class: "d-flex justify-content-around" };
-const _hoisted_8 = /* @__PURE__ */ createBaseVNode("title", null, "Placeholder", -1);
-const _hoisted_9 = /* @__PURE__ */ createBaseVNode("rect", {
-  width: "100%",
-  height: "100%",
-  fill: "#868e96"
-}, null, -1);
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$withBase(&#39;/images/vue.jpg&#39;)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span><span class="token punctuation">&gt;</span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Some quick example text to build on the card title and make up the bulk of the card&#39;s</span>\n<span class="line">      content.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCard</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 18rem</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardImage</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>162<span class="token punctuation">&quot;</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Placeholder<span class="token punctuation">&quot;</span></span> <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span> <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Placeholder<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#868e96<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardImage</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardTitle</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{animation: &#39;glow&#39;, xs: 7}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardText</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{animation: &#39;glow&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{xs: 6}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCard</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works" aria-hidden="true">#</a></h2><p>Create placeholders with the <code>&lt;CPlaceholder&gt;</code> component and a grid column propx (e.g., <code>:xs=&quot;6&quot;</code>) to set the <code>width</code>. They can replace the text inside an element or be added as a modifier class to an existing component.</p><p>We apply additional styling to <code>CButton</code>s via <code>::before</code> to ensure the <code>height</code> is respected. You may extend this pattern for other situations as needed, or add a <code>&amp;nbsp;</code> within the element to reflect the height when actual text is rendered in its place.</p>', 4);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = { "aria-hidden": "true" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">v-c-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{xs: 4}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_17 = /* @__PURE__ */ createBaseVNode("code", null, 'aria-hidden="true"', -1);
-const _hoisted_18 = /* @__PURE__ */ createBaseVNode("strong", null, "loading", -1);
-const _hoisted_19 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "width",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Width "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#width",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_20 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("You can change the "),
-  /* @__PURE__ */ createBaseVNode("code", null, "width"),
-  /* @__PURE__ */ createTextVNode(" through grid column classes, width utilities, or inline styles.")
-], -1);
-const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-75<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 30%</span><span class="token punctuation">&quot;</span></span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="color" tabindex="-1">Color <a class="anchor-link" href="#color" aria-hidden="true">#</a></h3><p>By default, the <code>&lt;CPlaceholder&gt;</code> uses <code>currentColor</code>. This can be overridden with a custom color or utility class.</p>', 3);
-const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h3><p>The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of the parent element. Customize them with <code>size</code> prop: <code>lg</code>, <code>sm</code>, or <code>xs</code>.</p>', 3);
-const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="animation" tabindex="-1">Animation <a class="anchor-link" href="#animation" aria-hidden="true">#</a></h3><p>Animate placeholders with <code>animation=&quot;glow&quot;</code> or <code>animation=&quot;wave&quot;</code> to better convey the perception of something being <em>actively</em> loaded.</p>', 3);
-const _hoisted_33 = { class: "docs-example rounded-top p-4" };
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>glow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPlaceholder</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wave<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPlaceholder</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPlaceholder</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPlaceholder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPlaceholder <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/placeholder/CPlaceholder&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong></td><td>Set animation type to better convey the perception of something being actively loaded.</td><td>string</td><td><code>&#39;glow&#39;</code>, <code>&#39;wave&#39;</code></td><td>-</td></tr><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;span&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component extra small, small, or large.</td><td>string</td><td><code>&#39;xs&#39;</code>, <code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>xs</strong></td><td>The number of columns on extra small devices (&lt;576px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>sm</strong></td><td>The number of columns on small devices (&lt;768px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>md</strong></td><td>The number of columns on medium devices (&lt;992px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>lg</strong></td><td>The number of columns on large devices (&lt;1200px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xl</strong></td><td>The number of columns on X-Large devices (&lt;1400px).</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>xxl</strong></td><td>The number of columns on XX-Large devices (≥1400px).</td><td>number</td><td>-</td><td>-</td></tr></tbody></table>', 6);
-function _sfc_render(_ctx, _cache) {
-  const _component_CCardImage = resolveComponent("CCardImage");
-  const _component_CCardTitle = resolveComponent("CCardTitle");
-  const _component_CCardText = resolveComponent("CCardText");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CCardBody = resolveComponent("CCardBody");
-  const _component_CCard = resolveComponent("CCard");
-  const _component_CPlaceholder = resolveComponent("CPlaceholder");
-  const _component_Callout = resolveComponent("Callout");
-  const _directive_c_placeholder = resolveDirective("c-placeholder");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    _hoisted_4,
-    _hoisted_5,
-    createBaseVNode("div", _hoisted_6, [
-      createBaseVNode("div", _hoisted_7, [
-        createVNode(_component_CCard, { style: { "width": "18rem" } }, {
-          default: withCtx(() => [
-            createVNode(_component_CCardImage, {
-              orientation: "top",
-              src: _ctx.$withBase("/images/vue.jpg")
-            }, null, 8, ["src"]),
-            createVNode(_component_CCardBody, null, {
-              default: withCtx(() => [
-                createVNode(_component_CCardTitle, null, {
-                  default: withCtx(() => [
-                    createTextVNode("Card title")
-                  ]),
-                  _: 1
-                }),
-                createVNode(_component_CCardText, null, {
-                  default: withCtx(() => [
-                    createTextVNode(" Some quick example text to build on the card title and make up the bulk of the card's content. ")
-                  ]),
-                  _: 1
-                }),
-                createVNode(_component_CButton, {
-                  color: "primary",
-                  href: "#"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("Go somewhere")
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }),
-        createVNode(_component_CCard, { style: { "width": "18rem" } }, {
-          default: withCtx(() => [
-            createVNode(_component_CCardImage, {
-              as: "svg",
-              orientation: "top",
-              width: "100%",
-              height: "162",
-              xmlns: "http://www.w3.org/2000/svg",
-              role: "img",
-              "aria-label": "Placeholder",
-              preserveAspectRatio: "xMidYMid slice",
-              focusable: "false"
-            }, {
-              default: withCtx(() => [
-                _hoisted_8,
-                _hoisted_9
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CCardBody, null, {
-              default: withCtx(() => [
-                withDirectives((openBlock(), createBlock(_component_CCardTitle, null, {
-                  default: withCtx(() => [
-                    createVNode(_component_CPlaceholder, { xs: 6 })
-                  ]),
-                  _: 1
-                })), [
-                  [_directive_c_placeholder, { animation: "glow", xs: 7 }]
-                ]),
-                withDirectives((openBlock(), createBlock(_component_CCardText, null, {
-                  default: withCtx(() => [
-                    createVNode(_component_CPlaceholder, { xs: 7 }),
-                    createVNode(_component_CPlaceholder, { xs: 4 }),
-                    createVNode(_component_CPlaceholder, { xs: 4 }),
-                    createVNode(_component_CPlaceholder, { xs: 6 }),
-                    createVNode(_component_CPlaceholder, { xs: 8 })
-                  ]),
-                  _: 1
-                })), [
-                  [_directive_c_placeholder, { animation: "glow" }]
-                ]),
-                withDirectives(createVNode(_component_CButton, {
-                  color: "primary",
-                  "aria-hidden": "true",
-                  disabled: "",
-                  href: "#",
-                  tabindex: "-1"
-                }, null, 512), [
-                  [_directive_c_placeholder, { xs: 6 }]
-                ])
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })
-      ])
-    ]),
-    _hoisted_10,
-    createBaseVNode("div", _hoisted_14, [
-      createBaseVNode("p", _hoisted_15, [
-        createVNode(_component_CPlaceholder, { xs: 6 })
-      ]),
-      withDirectives(createVNode(_component_CButton, {
-        color: "primary",
-        "aria-hidden": "true",
-        disabled: "",
-        href: "#",
-        tabindex: "-1"
-      }, null, 512), [
-        [_directive_c_placeholder, { xs: 4 }]
-      ])
-    ]),
-    _hoisted_16,
-    createVNode(_component_Callout, { color: "info" }, {
-      default: withCtx(() => [
-        createTextVNode(" The use of "),
-        _hoisted_17,
-        createTextVNode(" only indicates that the element should be hidden to screen readers. The "),
-        _hoisted_18,
-        createTextVNode(" behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update. ")
-      ]),
-      _: 1
-    }),
-    _hoisted_19,
-    _hoisted_20,
-    createBaseVNode("div", _hoisted_21, [
-      createVNode(_component_CPlaceholder, { xs: 6 }),
-      createVNode(_component_CPlaceholder, { class: "w-75" }),
-      createVNode(_component_CPlaceholder, { style: { "width": "30%" } })
-    ]),
-    _hoisted_22,
-    createBaseVNode("div", _hoisted_25, [
-      createVNode(_component_CPlaceholder, { xs: 12 }),
-      createVNode(_component_CPlaceholder, {
-        color: "primary",
-        xs: 12
-      }),
-      createVNode(_component_CPlaceholder, {
-        color: "secondary",
-        xs: 12
-      }),
-      createVNode(_component_CPlaceholder, {
-        color: "success",
-        xs: 12
-      }),
-      createVNode(_component_CPlaceholder, {
-        color: "danger",
-        xs: 12
-      }),
-      createVNode(_component_CPlaceholder, {
-        color: "warning",
-        xs: 12
-      }),
-      createVNode(_component_CPlaceholder, {
-        color: "info",
-        xs: 12
-      }),
-      createVNode(_component_CPlaceholder, {
-        color: "light",
-        xs: 12
-      }),
-      createVNode(_component_CPlaceholder, {
-        color: "dark",
-        xs: 12
-      })
-    ]),
-    _hoisted_26,
-    createBaseVNode("div", _hoisted_29, [
-      createVNode(_component_CPlaceholder, {
-        xs: 12,
-        size: "lg"
-      }),
-      createVNode(_component_CPlaceholder, { xs: 12 }),
-      createVNode(_component_CPlaceholder, {
-        xs: 12,
-        size: "sm"
-      }),
-      createVNode(_component_CPlaceholder, {
-        xs: 12,
-        size: "xs"
-      })
-    ]),
-    _hoisted_30,
-    createBaseVNode("div", _hoisted_33, [
-      createVNode(_component_CPlaceholder, {
-        as: "p",
-        animation: "glow"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CPlaceholder, { xs: 12 })
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CPlaceholder, {
-        as: "p",
-        animation: "wave"
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CPlaceholder, { xs: 12 })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_34
-  ]);
-}
-const placeholder_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "placeholder.html.vue"]]);
-const data = JSON.parse('{"path":"/components/placeholder.html","title":"Vue Placeholder Component","lang":"en-US","frontmatter":{"title":"Vue Placeholder Component","name":"Placeholder","description":"Use loading vue placeholders for your components or pages to indicate something may still be loading.","other_frameworks":"placeholder","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/placeholder.html"}]]},"headers":[{"level":2,"title":"About","slug":"about","link":"#about","children":[]},{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[{"level":3,"title":"Width","slug":"width","link":"#width","children":[]},{"level":3,"title":"Color","slug":"color","link":"#color","children":[]},{"level":3,"title":"Sizing","slug":"sizing","link":"#sizing","children":[]},{"level":3,"title":"Animation","slug":"animation","link":"#animation","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CPlaceholder","slug":"cplaceholder","link":"#cplaceholder","children":[]}]}],"filePathRelative":"components/placeholder.md"}');
-export {
-  placeholder_html as comp,
-  data
-};
diff --git a/vue/docs/assets/popover.html-BW84rsRc.js b/vue/docs/assets/popover.html-BW84rsRc.js
deleted file mode 100644
index 35de01b3589..00000000000
--- a/vue/docs/assets/popover.html-BW84rsRc.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, Y as resolveDirective, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, Z as withDirectives, h as createBlock, $ as normalizeStyle, e as createTextVNode, f as createStaticVNode, a0 as mergeProps, a1 as toHandlers } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  data() {
-    return {
-      customPopoverStyle: {
-        "--cui-popover-max-width": "200px",
-        "--cui-popover-border-color": "var(--cui-primary)",
-        "--cui-popover-header-bg": "var(--cui-primary)",
-        "--cui-popover-header-color": "var(--cui-white)",
-        "--cui-popover-body-padding-x": "1rem",
-        "--cui-popover-body-padding-y": ".5rem"
-      }
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "example",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Example "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "component",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Component "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#component",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Popover title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>And here\\’s some amazing content. It’s very engaging. Right?<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Click to toggle popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="directive" tabindex="-1">Directive <a class="anchor-link" href="#directive" aria-hidden="true">#</a></h3>', 2);
-const _hoisted_6 = { class: "docs-example rounded-top p-4" };
-const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{header: &#39;Popover title&#39;, content: &#39;And here\\’s some amazing content. It’s very engaging. Right?&#39;, placement: &#39;right&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Click to toggle popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="four-directions" tabindex="-1">Four directions <a class="anchor-link" href="#four-directions" aria-hidden="true">#</a></h3><p>Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for Vue in RTL.</p><h4 id="component-1" tabindex="-1">Component <a class="anchor-link" href="#component-1" aria-hidden="true">#</a></h4>', 4);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="directive-1" tabindex="-1">Directive <a class="anchor-link" href="#directive-1" aria-hidden="true">#</a></h4>', 2);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;top&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;right&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;bottom&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;left&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-popovers" tabindex="-1">Custom popovers <a class="anchor-link" href="#custom-popovers" aria-hidden="true">#</a></h3><p>You can customize the appearance of popovers using <a href="#css-variables">CSS variables</a>. We set a custom <code>style</code> to scope our custom appearance and use it to override some of the local CSS variables.</p>', 3);
-const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span></span>\n<span class="line">    <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>This popover is themed via CSS variables.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Custom popover<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customPopoverStyle<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">       <span class="token literal-property property">customPopoverStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-max-width&#39;</span><span class="token operator">:</span> <span class="token string">&#39;200px&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-border-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-primary)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-header-bg&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-primary)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-header-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-white)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-body-padding-x&#39;</span><span class="token operator">:</span> <span class="token string">&#39;1rem&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-body-padding-y&#39;</span><span class="token operator">:</span> <span class="token string">&#39;.5rem&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage" tabindex="-1">Usage <a class="anchor-link" href="#usage" aria-hidden="true">#</a></h2><h3 id="disabled-elements" tabindex="-1">Disabled elements <a class="anchor-link" href="#disabled-elements" aria-hidden="true">#</a></h3><p>Elements with the disabled attribute aren&#39;t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you&#39;ll want to trigger the popover from a wrapper <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, ideally made keyboard-focusable using <code>tabindex=&quot;0&quot;</code>.</p><p>For disabled popover triggers, you may also prefer <code>:trigger=&quot;[&#39;hover&#39;, &#39;focus&#39;]&quot;</code> so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.</p>', 5);
-const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = ["aria-describedby"];
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span></span>\n<span class="line">  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled popover<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;hover&#39;, &#39;focus&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-block<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue popovers use local CSS variables on <code>.popover</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CPopover <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CPopover<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cpopover" tabindex="-1">CPopover <a class="anchor-link" href="#cpopover" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPopover <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPopover <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/popover/CPopover&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the popover.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the popover relative to its target.</td><td>array</td><td>-</td><td>[0, 8]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>&#39;click&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of popover component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 7);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CPopover = resolveComponent("CPopover");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  const _directive_c_popover = resolveDirective("c-popover");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    createBaseVNode("div", _hoisted_3, [
-      createVNode(_component_CPopover, {
-        title: "Popover title",
-        content: "And here\\’s some amazing content. It’s very engaging. Right?",
-        placement: "right"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "danger",
-            size: "lg",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Click to toggle popover")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_4,
-    createBaseVNode("div", _hoisted_6, [
-      withDirectives((openBlock(), createBlock(_component_CButton, {
-        color: "danger",
-        size: "lg"
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Click to toggle popover")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_popover, { header: "Popover title", content: "And here’s some amazing content. It’s very engaging. Right?", placement: "right" }]
-      ])
-    ]),
-    _hoisted_7,
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CPopover, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "top"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Popover on top")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CPopover, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "right"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Popover on right")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CPopover, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "bottom"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Popover on bottom")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CPopover, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "left"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Popover on left")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_12,
-    createBaseVNode("div", _hoisted_14, [
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Popover on top")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "top" }]
-      ]),
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Popover on right")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "right" }]
-      ]),
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Popover on bottom")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "bottom" }]
-      ]),
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Popover on left")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "left" }]
-      ])
-    ]),
-    _hoisted_15,
-    createBaseVNode("div", _hoisted_18, [
-      createVNode(_component_CPopover, {
-        content: "This popover is themed via CSS variables.",
-        placement: "right",
-        title: "Custom popover",
-        style: normalizeStyle($data.customPopoverStyle)
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Custom popover")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }, 8, ["style"])
-    ]),
-    _hoisted_19,
-    createBaseVNode("div", _hoisted_24, [
-      createVNode(_component_CPopover, {
-        content: "Disabled popover",
-        placement: "right",
-        trigger: ["hover", "focus"]
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createBaseVNode("span", mergeProps({
-            class: "d-inline-block",
-            tabindex: 0,
-            "aria-describedby": id
-          }, toHandlers(on, true)), [
-            createVNode(_component_CButton, {
-              color: "primary",
-              disabled: ""
-            }, {
-              default: withCtx(() => [
-                createTextVNode("Disabled button")
-              ]),
-              _: 1
-            })
-          ], 16, _hoisted_25)
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_26,
-    createVNode(_component_ScssDocs, {
-      file: "_popover.scss",
-      capture: "popover-css-vars"
-    }),
-    _hoisted_30,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "popover-variables"
-    }),
-    _hoisted_33
-  ]);
-}
-const popover_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "popover.html.vue"]]);
-const data = JSON.parse('{"path":"/components/popover.html","title":"Vue Popover Component and Directive","lang":"en-US","frontmatter":{"title":"Vue Popover Component and Directive","name":"Popover","description":"Documentation and examples for adding Vue popovers, like those found in iOS, to any element on your site.","other_frameworks":"popover","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/popover.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Component","slug":"component","link":"#component","children":[]},{"level":3,"title":"Directive","slug":"directive","link":"#directive","children":[]},{"level":3,"title":"Four directions","slug":"four-directions","link":"#four-directions","children":[]},{"level":3,"title":"Custom popovers","slug":"custom-popovers","link":"#custom-popovers","children":[]}]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[{"level":3,"title":"Disabled elements","slug":"disabled-elements","link":"#disabled-elements","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CPopover","slug":"cpopover","link":"#cpopover","children":[]}]}],"filePathRelative":"components/popover.md"}');
-export {
-  popover_html as comp,
-  data
-};
diff --git a/vue/docs/assets/popover.html-CcictLyq.js b/vue/docs/assets/popover.html-CcictLyq.js
new file mode 100644
index 00000000000..4cae395f5c6
--- /dev/null
+++ b/vue/docs/assets/popover.html-CcictLyq.js
@@ -0,0 +1,269 @@
+import { _ as _export_sfc, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, Y as withDirectives, h as createBlock, Z as normalizeStyle, f as createTextVNode, a as createStaticVNode, $ as mergeProps, a0 as toHandlers } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  data() {
+    return {
+      customPopoverStyle: {
+        "--cui-popover-max-width": "200px",
+        "--cui-popover-border-color": "var(--cui-primary)",
+        "--cui-popover-header-bg": "var(--cui-primary)",
+        "--cui-popover-header-color": "var(--cui-white)",
+        "--cui-popover-body-padding-x": "1rem",
+        "--cui-popover-body-padding-y": ".5rem"
+      }
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "example",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Example "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#example",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "component",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Component "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#component",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Popover title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>And here\\’s some amazing content. It’s very engaging. Right?<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Click to toggle popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="directive" tabindex="-1">Directive <a class="anchor-link" href="#directive" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_6 = { class: "docs-example rounded-top p-4" };
+const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{header: &#39;Popover title&#39;, content: &#39;And here\\’s some amazing content. It’s very engaging. Right?&#39;, placement: &#39;right&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Click to toggle popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="four-directions" tabindex="-1">Four directions <a class="anchor-link" href="#four-directions" aria-hidden="true">#</a></h3><p>Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for Vue in RTL.</p><h4 id="component-1" tabindex="-1">Component <a class="anchor-link" href="#component-1" aria-hidden="true">#</a></h4>', 4);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="directive-1" tabindex="-1">Directive <a class="anchor-link" href="#directive-1" aria-hidden="true">#</a></h4>', 2);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;top&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;right&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;bottom&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;left&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Popover on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-popovers" tabindex="-1">Custom popovers <a class="anchor-link" href="#custom-popovers" aria-hidden="true">#</a></h3><p>You can customize the appearance of popovers using <a href="#css-variables">CSS variables</a>. We set a custom <code>style</code> to scope our custom appearance and use it to override some of the local CSS variables.</p>', 3);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span></span>\n<span class="line">    <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>This popover is themed via CSS variables.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Custom popover<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customPopoverStyle<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">       <span class="token literal-property property">customPopoverStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-max-width&#39;</span><span class="token operator">:</span> <span class="token string">&#39;200px&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-border-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-primary)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-header-bg&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-primary)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-header-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-white)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-body-padding-x&#39;</span><span class="token operator">:</span> <span class="token string">&#39;1rem&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-popover-body-padding-y&#39;</span><span class="token operator">:</span> <span class="token string">&#39;.5rem&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage" tabindex="-1">Usage <a class="anchor-link" href="#usage" aria-hidden="true">#</a></h2><h3 id="disabled-elements" tabindex="-1">Disabled elements <a class="anchor-link" href="#disabled-elements" aria-hidden="true">#</a></h3><p>Elements with the disabled attribute aren&#39;t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you&#39;ll want to trigger the popover from a wrapper <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, ideally made keyboard-focusable using <code>tabindex=&quot;0&quot;</code>.</p><p>For disabled popover triggers, you may also prefer <code>:trigger=&quot;[&#39;hover&#39;, &#39;focus&#39;]&quot;</code> so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.</p>', 5);
+const _hoisted_24 = { class: "docs-example rounded-top p-4" };
+const _hoisted_25 = ["aria-describedby"];
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CPopover</span></span>\n<span class="line">  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled popover<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;hover&#39;, &#39;focus&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-block<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CPopover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue popovers use local CSS variables on <code>.popover</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CPopover <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CPopover<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cpopover" tabindex="-1">CPopover <a class="anchor-link" href="#cpopover" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CPopover <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CPopover <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/popover/CPopover&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the popover.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the popover relative to its target.</td><td>array</td><td>-</td><td>[0, 8]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>&#39;click&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of popover component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CPopover = resolveComponent("CPopover");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  const _directive_c_popover = resolveDirective("c-popover");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CPopover, {
+        title: "Popover title",
+        content: "And here\\’s some amazing content. It’s very engaging. Right?",
+        placement: "right"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "danger",
+            size: "lg",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Click to toggle popover")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_6, [
+      withDirectives((openBlock(), createBlock(_component_CButton, {
+        color: "danger",
+        size: "lg"
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Click to toggle popover")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_popover, { header: "Popover title", content: "And here’s some amazing content. It’s very engaging. Right?", placement: "right" }]
+      ])
+    ]),
+    _hoisted_7,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CPopover, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "top"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Popover on top")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CPopover, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "right"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Popover on right")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CPopover, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "bottom"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Popover on bottom")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CPopover, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "left"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Popover on left")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_14, [
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Popover on top")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "top" }]
+      ]),
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Popover on right")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "right" }]
+      ]),
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Popover on bottom")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "bottom" }]
+      ]),
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Popover on left")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_popover, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "left" }]
+      ])
+    ]),
+    _hoisted_15,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CPopover, {
+        content: "This popover is themed via CSS variables.",
+        placement: "right",
+        title: "Custom popover",
+        style: normalizeStyle($data.customPopoverStyle)
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Custom popover")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }, 8, ["style"])
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_24, [
+      createVNode(_component_CPopover, {
+        content: "Disabled popover",
+        placement: "right",
+        trigger: ["hover", "focus"]
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createBaseVNode("span", mergeProps({
+            class: "d-inline-block",
+            tabindex: 0,
+            "aria-describedby": id
+          }, toHandlers(on, true)), [
+            createVNode(_component_CButton, {
+              color: "primary",
+              disabled: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode("Disabled button")
+              ]),
+              _: 1
+            })
+          ], 16, _hoisted_25)
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_26,
+    createVNode(_component_ScssDocs, {
+      file: "_popover.scss",
+      capture: "popover-css-vars"
+    }),
+    _hoisted_30,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "popover-variables"
+    }),
+    _hoisted_33
+  ]);
+}
+const popover_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "popover.html.vue"]]);
+const data = JSON.parse('{"path":"/components/popover.html","title":"Vue Popover Component and Directive","lang":"en-US","frontmatter":{"title":"Vue Popover Component and Directive","name":"Popover","description":"Documentation and examples for adding Vue popovers, like those found in iOS, to any element on your site.","other_frameworks":"popover","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/popover.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[{"level":3,"title":"Component","slug":"component","link":"#component","children":[]},{"level":3,"title":"Directive","slug":"directive","link":"#directive","children":[]},{"level":3,"title":"Four directions","slug":"four-directions","link":"#four-directions","children":[]},{"level":3,"title":"Custom popovers","slug":"custom-popovers","link":"#custom-popovers","children":[]}]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[{"level":3,"title":"Disabled elements","slug":"disabled-elements","link":"#disabled-elements","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CPopover","slug":"cpopover","link":"#cpopover","children":[]}]}],"filePathRelative":"components/popover.md"}');
+export {
+  popover_html as comp,
+  data
+};
diff --git a/vue/docs/assets/progress.html-DB3yeOum.js b/vue/docs/assets/progress.html-DAixQyXt.js
similarity index 51%
rename from vue/docs/assets/progress.html-DB3yeOum.js
rename to vue/docs/assets/progress.html-DAixQyXt.js
index 3d6cffffdb0..d62721d3e24 100644
--- a/vue/docs/assets/progress.html-DB3yeOum.js
+++ b/vue/docs/assets/progress.html-DAixQyXt.js
@@ -1,30 +1,30 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don&#39;t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress" target="_blank" rel="noopener noreferrer">the HTML5 <code>&lt;progress&gt;</code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p><h2 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage" aria-hidden="true">#</a></h2>', 3);
 const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="labels" tabindex="-1">Labels <a class="anchor-link" href="#labels" aria-hidden="true">#</a></h2><p>Add labels to your progress bars by placing text within the <code>&lt;CProgressBar&gt;</code>.</p>', 3);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="labels" tabindex="-1">Labels <a class="anchor-link" href="#labels" aria-hidden="true">#</a></h2><p>Add labels to your progress bars by placing text within the <code>&lt;CProgressBar&gt;</code>.</p>', 3);
 const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>25%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>Please note that the default setting for the content within the <code>&lt;CProgressBar /&gt;</code> is to be limited by the <code>overflow: hidden property</code>, preventing it from extending beyond the bar&#39;s boundaries. If the progress bar is shorter than its label, the content will be truncated and could be difficult to read. To modify this behavior, you can utilize the <code>.overflow-visible</code> class from the overflow utilities. However, it is important to specify a specific text color to ensure readability. It&#39;s worth noting that this approach currently does not consider color modes.</p>', 2);
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>25%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>Please note that the default setting for the content within the <code>&lt;CProgressBar /&gt;</code> is to be limited by the <code>overflow: hidden property</code>, preventing it from extending beyond the bar&#39;s boundaries. If the progress bar is shorter than its label, the content will be truncated and could be difficult to read. To modify this behavior, you can utilize the <code>.overflow-visible</code> class from the overflow utilities. However, it is important to specify a specific text color to ensure readability. It&#39;s worth noting that this approach currently does not consider color modes.</p>', 2);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-visible text-dark px-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Long label text for the progress bar, set to a dark color<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since <strong>v5.0.0</strong> you can also use the <code>progressBarClassName</code> property directly on the <code>&lt;CProgress /&gt;</code> component to achieve the same.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">progressBarClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-visible text-dark px-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Long label text for the progress bar, set to a dark color<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="height" tabindex="-1">Height <a class="anchor-link" href="#height" aria-hidden="true">#</a></h2><p>We only set a <code>height</code> value on the <code>&lt;CProgress&gt;</code>, so if you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically resize accordingly.</p>', 5);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-visible text-dark px-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Long label text for the progress bar, set to a dark color<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since <strong>v5.0.0</strong> you can also use the <code>progressBarClassName</code> property directly on the <code>&lt;CProgress /&gt;</code> component to achieve the same.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">progressBarClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>overflow-visible text-dark px-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Long label text for the progress bar, set to a dark color<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="height" tabindex="-1">Height <a class="anchor-link" href="#height" aria-hidden="true">#</a></h2><p>We only set a <code>height</code> value on the <code>&lt;CProgress&gt;</code>, so if you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically resize accordingly.</p>', 5);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="backgrounds" tabindex="-1">Backgrounds <a class="anchor-link" href="#backgrounds" aria-hidden="true">#</a></h2><p>Use <code>color</code> prop to change the appearance of individual progress bars.</p>', 3);
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="backgrounds" tabindex="-1">Backgrounds <a class="anchor-link" href="#backgrounds" aria-hidden="true">#</a></h2><p>Use <code>color</code> prop to change the appearance of individual progress bars.</p>', 3);
 const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Ensure that when you incorporate labels into progress bars featuring a custom background color, you also select an appropriate text color to ensure readability and maintain adequate contrast for the labels.</p>', 2);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Ensure that when you incorporate labels into progress bars featuring a custom background color, you also select an appropriate text color to ensure readability and maintain adequate contrast for the labels.</p>', 2);
 const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span><span class="token punctuation">&gt;</span></span>25%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>75%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span><span class="token punctuation">&gt;</span></span>100%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since <strong>v5.0.0</strong> you can also use the <code>progressBarClassName</code> property directly on the <code>&lt;CProgress /&gt;</code> component to achieve the same.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>25%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">progressBarClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">progressBarClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>75%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>100%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-bars" tabindex="-1">Multiple bars <a class="anchor-link" href="#multiple-bars" aria-hidden="true">#</a></h2><p>Include multiple progress bars in a progress component if you need.</p>', 5);
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span><span class="token punctuation">&gt;</span></span>25%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>75%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span><span class="token punctuation">&gt;</span></span>100%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressBar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since <strong>v5.0.0</strong> you can also use the <code>progressBarClassName</code> property directly on the <code>&lt;CProgress /&gt;</code> component to achieve the same.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>25%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">progressBarClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">progressBarClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>75%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>100%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiple-bars" tabindex="-1">Multiple bars <a class="anchor-link" href="#multiple-bars" aria-hidden="true">#</a></h2><p>Include multiple progress bars in a progress component if you need.</p>', 5);
 const _hoisted_30 = /* @__PURE__ */ createBaseVNode("code", null, "<CProgressStacked>", -1);
 const _hoisted_31 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("strong", null, "New markup")
 ], -1);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressStacked</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>15<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>30<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressStacked</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Previous markup</strong></p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>15<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>30<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="striped" tabindex="-1">Striped <a class="anchor-link" href="#striped" aria-hidden="true">#</a></h2><p>Add <code>variant=&quot;striped&quot;</code> to any <code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient over the progress bar&#39;s background color.</p>', 5);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressStacked</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>15<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>30<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgressStacked</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Previous markup</strong></p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>15<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>30<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgressBar</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CProgress</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="striped" tabindex="-1">Striped <a class="anchor-link" href="#striped" aria-hidden="true">#</a></h2><p>Add <code>variant=&quot;striped&quot;</code> to any <code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient over the progress bar&#39;s background color.</p>', 5);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="animated-stripes" tabindex="-1">Animated stripes <a class="anchor-link" href="#animated-stripes" aria-hidden="true">#</a></h2><p>The striped gradient can also be animated. Add <code>animated</code> property to <code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3 animations.</p>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="animated-stripes" tabindex="-1">Animated stripes <a class="anchor-link" href="#animated-stripes" aria-hidden="true">#</a></h2><p>The striped gradient can also be animated. Add <code>animated</code> property to <code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3 animations.</p>', 3);
 const _hoisted_42 = { class: "docs-example rounded-top p-4" };
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue cards use local CSS variables on <code>.card</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CProgress <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CProgress<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cprogress" tabindex="-1">CProgress <a class="anchor-link" href="#cprogress" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgress <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgress&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4>', 4);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>25<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>75<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CProgress</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token attr-name">animated</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue cards use local CSS variables on <code>.card</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CProgress <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CProgress<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cprogress" tabindex="-1">CProgress <a class="anchor-link" href="#cprogress" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgress <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgress&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4>', 4);
 const _hoisted_54 = { class: "table table-striped table-api" };
 const _hoisted_55 = /* @__PURE__ */ createBaseVNode("thead", null, [
   /* @__PURE__ */ createBaseVNode("tr", null, [
@@ -129,7 +129,7 @@ const _hoisted_66 = /* @__PURE__ */ createBaseVNode("tr", null, [
   /* @__PURE__ */ createBaseVNode("td", null, "-"),
   /* @__PURE__ */ createBaseVNode("td", null, "-")
 ], -1);
-const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressbar" tabindex="-1">CProgressBar <a class="anchor-link" href="#cprogressbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgressBar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgressBar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgressBar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animated</strong></td><td>Use to animate the stripes right to left via CSS3 animations.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>value</strong></td><td>The percent to progress the ProgressBar.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>variant</strong></td><td>Set the progress bar variant to optional striped.</td><td>string</td><td><code>&#39;striped&#39;</code></td><td>-</td></tr></tbody></table>', 4);
+const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressbar" tabindex="-1">CProgressBar <a class="anchor-link" href="#cprogressbar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CProgressBar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CProgressBar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/progress/CProgressBar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animated</strong></td><td>Use to animate the stripes right to left via CSS3 animations.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>value</strong></td><td>The percent to progress the ProgressBar.</td><td>number</td><td>-</td><td>0</td></tr><tr><td><strong>variant</strong></td><td>Set the progress bar variant to optional striped.</td><td>string</td><td><code>&#39;striped&#39;</code></td><td>-</td></tr></tbody></table>', 4);
 function _sfc_render(_ctx, _cache) {
   const _component_CProgress = resolveComponent("CProgress");
   const _component_CProgressBar = resolveComponent("CProgressBar");
diff --git a/vue/docs/assets/radio.html-BYHbKHxD.js b/vue/docs/assets/radio.html-BYHbKHxD.js
deleted file mode 100644
index 43fe490a759..00000000000
--- a/vue/docs/assets/radio.html-BYHbKHxD.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, t as toDisplayString, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  setup() {
-    const picked = ref("Four");
-    return {
-      picked
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="approach" tabindex="-1">Approach <a class="anchor-link" href="#approach" aria-hidden="true">#</a></h2><p>Browser default radios are replaced with the help of <code>&lt;CFormCheck radio&gt;</code>. Radios are for selecting one option from many.</p><h2 id="radios" tabindex="-1">Radios <a class="anchor-link" href="#radios" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 4);
-const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3>', 2);
-const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>One<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>One<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Two<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Two<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Three<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Three<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Four<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Four<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Five<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Five<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Picked: {{ picked }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> picked <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;Four&#39;</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        picked</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h3>', 2);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="default-stacked" tabindex="-1">Default (stacked) <a class="anchor-link" href="#default-stacked" aria-hidden="true">#</a></h2><p>By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.</p>', 3);
-const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline" tabindex="-1">Inline <a class="anchor-link" href="#inline" aria-hidden="true">#</a></h2><p>Group radios on the same horizontal row by adding <code>inline</code> boolean property to any <code>&lt;CFormCheck&gt;</code>.</p>', 3);
-const _hoisted_19 = { class: "docs-example rounded-top p-4" };
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reverse" tabindex="-1">Reverse <a class="anchor-link" href="#reverse" aria-hidden="true">#</a></h2><p>Put your radios on the opposite side by adding <code>reverse</code> boolean property.</p>', 3);
-const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseOption1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reverse radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseOption2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled reverse radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="without-labels" tabindex="-1">Without labels <a class="anchor-link" href="#without-labels" aria-hidden="true">#</a></h2><p>Remember to still provide some form of accessible name for assistive technologies (for instance, using <code>aria-label</code>).</p>', 3);
-const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="toggle-buttons" tabindex="-1">Toggle buttons <a class="anchor-link" href="#toggle-buttons" aria-hidden="true">#</a></h2><p>Create button-like radio buttons by using <code>button</code> boolean property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can further be grouped in a button group if needed.</p>', 3);
-const _hoisted_31 = { class: "docs-example rounded-top p-4" };
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h3><p>Different variants of button, such at the various outlined styles, are supported.</p>', 3);
-const _hoisted_35 = { class: "docs-example rounded-top p-4" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;success&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CFormCheck = resolveComponent("CFormCheck");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_5, [
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "flexRadioDefault",
-        id: "flexRadioDefault1",
-        label: "Default radio"
-      }),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "flexRadioDefault",
-        id: "flexRadioDefault2",
-        label: "Checked radio",
-        checked: ""
-      })
-    ]),
-    _hoisted_6,
-    createBaseVNode("div", _hoisted_8, [
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        id: "flexRadioVModel1",
-        inline: "",
-        label: "One",
-        value: "One",
-        modelValue: $setup.picked,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.picked = $event)
-      }, null, 8, ["modelValue"]),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        id: "flexRadioVModel2",
-        inline: "",
-        label: "Two",
-        value: "Two",
-        modelValue: $setup.picked,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.picked = $event)
-      }, null, 8, ["modelValue"]),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        id: "flexRadioVModel3",
-        inline: "",
-        label: "Three",
-        value: "Three",
-        modelValue: $setup.picked,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.picked = $event)
-      }, null, 8, ["modelValue"]),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        id: "flexRadioVModel4",
-        inline: "",
-        label: "Four",
-        value: "Four",
-        modelValue: $setup.picked,
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.picked = $event)
-      }, null, 8, ["modelValue"]),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        id: "flexRadioVModel5",
-        inline: "",
-        label: "Five",
-        value: "Five",
-        modelValue: $setup.picked,
-        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $setup.picked = $event)
-      }, null, 8, ["modelValue"]),
-      createBaseVNode("div", null, "Picked: " + toDisplayString($setup.picked), 1)
-    ]),
-    _hoisted_9,
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "flexRadioDisabled",
-        id: "flexRadioDisabled",
-        label: "Disabled radio",
-        disabled: ""
-      }),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "flexRadioDisabled",
-        id: "flexRadioCheckedDisabled",
-        label: "Disabled checked radio",
-        checked: "",
-        disabled: ""
-      })
-    ]),
-    _hoisted_12,
-    createBaseVNode("div", _hoisted_15, [
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "exampleRadios",
-        id: "exampleRadios1",
-        value: "option1",
-        label: "Default radio",
-        checked: ""
-      }),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "exampleRadios",
-        id: "exampleRadios2",
-        value: "option2",
-        label: "Second default radio"
-      }),
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "exampleRadios",
-        id: "exampleRadios3",
-        value: "option3",
-        label: "Disabled radio",
-        disabled: ""
-      })
-    ]),
-    _hoisted_16,
-    createBaseVNode("div", _hoisted_19, [
-      createVNode(_component_CFormCheck, {
-        inline: "",
-        type: "radio",
-        name: "inlineRadioOptions",
-        id: "inlineCheckbox1",
-        value: "option1",
-        label: "1"
-      }),
-      createVNode(_component_CFormCheck, {
-        inline: "",
-        type: "radio",
-        name: "inlineRadioOptions",
-        id: "inlineCheckbox2",
-        value: "option2",
-        label: "2"
-      }),
-      createVNode(_component_CFormCheck, {
-        inline: "",
-        type: "radio",
-        name: "inlineRadioOptions",
-        id: "inlineCheckbox3",
-        value: "option3",
-        label: "3 (disabled)",
-        disabled: ""
-      })
-    ]),
-    _hoisted_20,
-    createBaseVNode("div", _hoisted_23, [
-      createVNode(_component_CFormCheck, {
-        reverse: "",
-        type: "radio",
-        id: "reverseOption1",
-        value: "option1",
-        label: "Reverse radio"
-      }),
-      createVNode(_component_CFormCheck, {
-        reverse: "",
-        type: "radio",
-        id: "reverseOption2",
-        value: "option2",
-        label: "Disabled reverse radio",
-        disabled: ""
-      })
-    ]),
-    _hoisted_24,
-    createBaseVNode("div", _hoisted_27, [
-      createVNode(_component_CFormCheck, {
-        type: "radio",
-        name: "radioNoLabel",
-        id: "radioNoLabel",
-        value: "",
-        "aria-label": "..."
-      })
-    ]),
-    _hoisted_28,
-    createBaseVNode("div", _hoisted_31, [
-      createVNode(_component_CFormCheck, {
-        button: { color: "secondary" },
-        type: "radio",
-        name: "options",
-        id: "option1",
-        autocomplete: "off",
-        label: "Checked",
-        checked: ""
-      }),
-      createVNode(_component_CFormCheck, {
-        button: { color: "secondary" },
-        type: "radio",
-        name: "options",
-        id: "option2",
-        autocomplete: "off",
-        label: "Radio"
-      }),
-      createVNode(_component_CFormCheck, {
-        button: { color: "secondary" },
-        type: "radio",
-        name: "options",
-        id: "option3",
-        autocomplete: "off",
-        label: "Radio",
-        disabled: ""
-      }),
-      createVNode(_component_CFormCheck, {
-        button: { color: "secondary" },
-        type: "radio",
-        name: "options",
-        id: "option4",
-        autocomplete: "off",
-        label: "Radio"
-      })
-    ]),
-    _hoisted_32,
-    createBaseVNode("div", _hoisted_35, [
-      createVNode(_component_CFormCheck, {
-        button: { color: "success", variant: "outline" },
-        type: "radio",
-        name: "options-outlined",
-        id: "success-outlined",
-        autocomplete: "off",
-        label: "Radio",
-        checked: ""
-      }),
-      createVNode(_component_CFormCheck, {
-        button: { color: "danger", variant: "outline" },
-        type: "radio",
-        name: "options-outlined",
-        id: "danger-outlined",
-        autocomplete: "off",
-        label: "Radio"
-      })
-    ]),
-    _hoisted_36,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-check-variables"
-    }),
-    _hoisted_39
-  ]);
-}
-const radio_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "radio.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/radio.html","title":"Vue Checkbox & Radio Components","lang":"en-US","frontmatter":{"title":"Vue Checkbox & Radio Components","name":"Checks & radios","description":"Create consistent cross-browser and cross-device checkboxes and radios with our Vue checkbox, radio, and switch components.","other_frameworks":"radio","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/radio.html"}]]},"headers":[{"level":2,"title":"Approach","slug":"approach","link":"#approach","children":[]},{"level":2,"title":"Radios","slug":"radios","link":"#radios","children":[{"level":3,"title":"vModel","slug":"vmodel","link":"#vmodel","children":[]},{"level":3,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]}]},{"level":2,"title":"Default (stacked)","slug":"default-stacked","link":"#default-stacked","children":[]},{"level":2,"title":"Inline","slug":"inline","link":"#inline","children":[]},{"level":2,"title":"Reverse","slug":"reverse","link":"#reverse","children":[]},{"level":2,"title":"Without labels","slug":"without-labels","link":"#without-labels","children":[]},{"level":2,"title":"Toggle buttons","slug":"toggle-buttons","link":"#toggle-buttons","children":[{"level":3,"title":"Outlined styles","slug":"outlined-styles","link":"#outlined-styles","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CFormCheck","slug":"cformcheck","link":"#cformcheck","children":[]}]}],"filePathRelative":"forms/radio.md"}');
-export {
-  radio_html as comp,
-  data
-};
diff --git a/vue/docs/assets/radio.html-cF7KwA9W.js b/vue/docs/assets/radio.html-cF7KwA9W.js
new file mode 100644
index 00000000000..c1d9028cb02
--- /dev/null
+++ b/vue/docs/assets/radio.html-cF7KwA9W.js
@@ -0,0 +1,269 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, t as toDisplayString, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  setup() {
+    const picked = ref("Four");
+    return {
+      picked
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="approach" tabindex="-1">Approach <a class="anchor-link" href="#approach" aria-hidden="true">#</a></h2><p>Browser default radios are replaced with the help of <code>&lt;CFormCheck radio&gt;</code>. Radios are for selecting one option from many.</p><h2 id="radios" tabindex="-1">Radios <a class="anchor-link" href="#radios" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s are automatically styled to match with a lighter color to help indicate the input&#39;s state.</p>', 4);
+const _hoisted_5 = { class: "docs-example rounded-top p-4" };
+const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDefault2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_8 = { class: "docs-example rounded-top p-4" };
+const _hoisted_9 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>One<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>One<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Two<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Two<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Three<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Three<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Four<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Four<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioVModel5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Five<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Five<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picked<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Picked: {{ picked }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> picked <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;Four&#39;</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        picked</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flexRadioCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="default-stacked" tabindex="-1">Default (stacked) <a class="anchor-link" href="#default-stacked" aria-hidden="true">#</a></h2><p>By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.</p>', 3);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Second default radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleRadios3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="inline" tabindex="-1">Inline <a class="anchor-link" href="#inline" aria-hidden="true">#</a></h2><p>Group radios on the same horizontal row by adding <code>inline</code> boolean property to any <code>&lt;CFormCheck&gt;</code>.</p>', 3);
+const _hoisted_19 = { class: "docs-example rounded-top p-4" };
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">inline</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineRadioOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inlineCheckbox3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3 (disabled)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reverse" tabindex="-1">Reverse <a class="anchor-link" href="#reverse" aria-hidden="true">#</a></h2><p>Put your radios on the opposite side by adding <code>reverse</code> boolean property.</p>', 3);
+const _hoisted_23 = { class: "docs-example rounded-top p-4" };
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseOption1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reverse radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseOption2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled reverse radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="without-labels" tabindex="-1">Without labels <a class="anchor-link" href="#without-labels" aria-hidden="true">#</a></h2><p>Remember to still provide some form of accessible name for assistive technologies (for instance, using <code>aria-label</code>).</p>', 3);
+const _hoisted_27 = { class: "docs-example rounded-top p-4" };
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radioNoLabel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="toggle-buttons" tabindex="-1">Toggle buttons <a class="anchor-link" href="#toggle-buttons" aria-hidden="true">#</a></h2><p>Create button-like radio buttons by using <code>button</code> boolean property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can further be grouped in a button group if needed.</p>', 3);
+const _hoisted_31 = { class: "docs-example rounded-top p-4" };
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;secondary&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>option4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="outlined-styles" tabindex="-1">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-hidden="true">#</a></h3><p>Different variants of button, such at the various outlined styles, are supported.</p>', 3);
+const _hoisted_35 = { class: "docs-example rounded-top p-4" };
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;success&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span> <span class="token attr-name">:button</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;danger&#39;, variant: &#39;outline&#39; }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger-outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormCheck <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormCheck <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormCheck&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>button</strong></td><td>Create button-like checkboxes and radio buttons.<br><code>@see</code> http://coreui.io/vue/docs/components/button.html</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>false-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>false</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hit-area</strong></td><td>Sets hit area to the full area of the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indeterminate</strong></td><td>Input Checkbox indeterminate Property</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>inline</strong></td><td>Group checkboxes or radios on the same horizontal row by adding.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>array|boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>true-value</strong> <br><div class="badge bg-primary">4.10.0+</div></td><td>Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the <code>true</code> state.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The value attribute of component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CFormCheck = resolveComponent("CFormCheck");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_5, [
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "flexRadioDefault",
+        id: "flexRadioDefault1",
+        label: "Default radio"
+      }),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "flexRadioDefault",
+        id: "flexRadioDefault2",
+        label: "Checked radio",
+        checked: ""
+      })
+    ]),
+    _hoisted_6,
+    createBaseVNode("div", _hoisted_8, [
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        id: "flexRadioVModel1",
+        inline: "",
+        label: "One",
+        value: "One",
+        modelValue: $setup.picked,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.picked = $event)
+      }, null, 8, ["modelValue"]),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        id: "flexRadioVModel2",
+        inline: "",
+        label: "Two",
+        value: "Two",
+        modelValue: $setup.picked,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.picked = $event)
+      }, null, 8, ["modelValue"]),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        id: "flexRadioVModel3",
+        inline: "",
+        label: "Three",
+        value: "Three",
+        modelValue: $setup.picked,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.picked = $event)
+      }, null, 8, ["modelValue"]),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        id: "flexRadioVModel4",
+        inline: "",
+        label: "Four",
+        value: "Four",
+        modelValue: $setup.picked,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.picked = $event)
+      }, null, 8, ["modelValue"]),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        id: "flexRadioVModel5",
+        inline: "",
+        label: "Five",
+        value: "Five",
+        modelValue: $setup.picked,
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $setup.picked = $event)
+      }, null, 8, ["modelValue"]),
+      createBaseVNode("div", null, "Picked: " + toDisplayString($setup.picked), 1)
+    ]),
+    _hoisted_9,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "flexRadioDisabled",
+        id: "flexRadioDisabled",
+        label: "Disabled radio",
+        disabled: ""
+      }),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "flexRadioDisabled",
+        id: "flexRadioCheckedDisabled",
+        label: "Disabled checked radio",
+        checked: "",
+        disabled: ""
+      })
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_15, [
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "exampleRadios",
+        id: "exampleRadios1",
+        value: "option1",
+        label: "Default radio",
+        checked: ""
+      }),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "exampleRadios",
+        id: "exampleRadios2",
+        value: "option2",
+        label: "Second default radio"
+      }),
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "exampleRadios",
+        id: "exampleRadios3",
+        value: "option3",
+        label: "Disabled radio",
+        disabled: ""
+      })
+    ]),
+    _hoisted_16,
+    createBaseVNode("div", _hoisted_19, [
+      createVNode(_component_CFormCheck, {
+        inline: "",
+        type: "radio",
+        name: "inlineRadioOptions",
+        id: "inlineCheckbox1",
+        value: "option1",
+        label: "1"
+      }),
+      createVNode(_component_CFormCheck, {
+        inline: "",
+        type: "radio",
+        name: "inlineRadioOptions",
+        id: "inlineCheckbox2",
+        value: "option2",
+        label: "2"
+      }),
+      createVNode(_component_CFormCheck, {
+        inline: "",
+        type: "radio",
+        name: "inlineRadioOptions",
+        id: "inlineCheckbox3",
+        value: "option3",
+        label: "3 (disabled)",
+        disabled: ""
+      })
+    ]),
+    _hoisted_20,
+    createBaseVNode("div", _hoisted_23, [
+      createVNode(_component_CFormCheck, {
+        reverse: "",
+        type: "radio",
+        id: "reverseOption1",
+        value: "option1",
+        label: "Reverse radio"
+      }),
+      createVNode(_component_CFormCheck, {
+        reverse: "",
+        type: "radio",
+        id: "reverseOption2",
+        value: "option2",
+        label: "Disabled reverse radio",
+        disabled: ""
+      })
+    ]),
+    _hoisted_24,
+    createBaseVNode("div", _hoisted_27, [
+      createVNode(_component_CFormCheck, {
+        type: "radio",
+        name: "radioNoLabel",
+        id: "radioNoLabel",
+        value: "",
+        "aria-label": "..."
+      })
+    ]),
+    _hoisted_28,
+    createBaseVNode("div", _hoisted_31, [
+      createVNode(_component_CFormCheck, {
+        button: { color: "secondary" },
+        type: "radio",
+        name: "options",
+        id: "option1",
+        autocomplete: "off",
+        label: "Checked",
+        checked: ""
+      }),
+      createVNode(_component_CFormCheck, {
+        button: { color: "secondary" },
+        type: "radio",
+        name: "options",
+        id: "option2",
+        autocomplete: "off",
+        label: "Radio"
+      }),
+      createVNode(_component_CFormCheck, {
+        button: { color: "secondary" },
+        type: "radio",
+        name: "options",
+        id: "option3",
+        autocomplete: "off",
+        label: "Radio",
+        disabled: ""
+      }),
+      createVNode(_component_CFormCheck, {
+        button: { color: "secondary" },
+        type: "radio",
+        name: "options",
+        id: "option4",
+        autocomplete: "off",
+        label: "Radio"
+      })
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_35, [
+      createVNode(_component_CFormCheck, {
+        button: { color: "success", variant: "outline" },
+        type: "radio",
+        name: "options-outlined",
+        id: "success-outlined",
+        autocomplete: "off",
+        label: "Radio",
+        checked: ""
+      }),
+      createVNode(_component_CFormCheck, {
+        button: { color: "danger", variant: "outline" },
+        type: "radio",
+        name: "options-outlined",
+        id: "danger-outlined",
+        autocomplete: "off",
+        label: "Radio"
+      })
+    ]),
+    _hoisted_36,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-check-variables"
+    }),
+    _hoisted_39
+  ]);
+}
+const radio_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "radio.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/radio.html","title":"Vue Checkbox & Radio Components","lang":"en-US","frontmatter":{"title":"Vue Checkbox & Radio Components","name":"Checks & radios","description":"Create consistent cross-browser and cross-device checkboxes and radios with our Vue checkbox, radio, and switch components.","other_frameworks":"radio","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/radio.html"}]]},"headers":[{"level":2,"title":"Approach","slug":"approach","link":"#approach","children":[]},{"level":2,"title":"Radios","slug":"radios","link":"#radios","children":[{"level":3,"title":"vModel","slug":"vmodel","link":"#vmodel","children":[]},{"level":3,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]}]},{"level":2,"title":"Default (stacked)","slug":"default-stacked","link":"#default-stacked","children":[]},{"level":2,"title":"Inline","slug":"inline","link":"#inline","children":[]},{"level":2,"title":"Reverse","slug":"reverse","link":"#reverse","children":[]},{"level":2,"title":"Without labels","slug":"without-labels","link":"#without-labels","children":[]},{"level":2,"title":"Toggle buttons","slug":"toggle-buttons","link":"#toggle-buttons","children":[{"level":3,"title":"Outlined styles","slug":"outlined-styles","link":"#outlined-styles","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CFormCheck","slug":"cformcheck","link":"#cformcheck","children":[]}]}],"filePathRelative":"forms/radio.md"}');
+export {
+  radio_html as comp,
+  data
+};
diff --git a/vue/docs/assets/range.html-BNU63ACw.js b/vue/docs/assets/range.html-DLE7qJRM.js
similarity index 54%
rename from vue/docs/assets/range.html-BNU63ACw.js
rename to vue/docs/assets/range.html-DLE7qJRM.js
index c9ad22ef4a4..b7e1503e602 100644
--- a/vue/docs/assets/range.html-BNU63ACw.js
+++ b/vue/docs/assets/range.html-DLE7qJRM.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "overview",
@@ -19,14 +19,14 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode('. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.')
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRange1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example range<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRange1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example range<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
 const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledRange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled range<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="min-and-max" tabindex="-1">Min and max <a class="anchor-link" href="#min-and-max" aria-hidden="true">#</a></h2><p>Range inputs have implicit values for <code>min</code> and <code>max</code>—<code>0</code> and <code>100</code>, respectively. You may specify new values for those using the <code>min</code> and <code>max</code> attributes.</p>', 3);
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabledRange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled range<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="min-and-max" tabindex="-1">Min and max <a class="anchor-link" href="#min-and-max" aria-hidden="true">#</a></h2><p>Range inputs have implicit values for <code>min</code> and <code>max</code>—<code>0</code> and <code>100</code>, respectively. You may specify new values for those using the <code>min</code> and <code>max</code> attributes.</p>', 3);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRange2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="steps" tabindex="-1">Steps <a class="anchor-link" href="#steps" aria-hidden="true">#</a></h2><p>By default, range inputs &quot;snap&quot; to integer values. To change this, you can specify a <code>step</code> value. In the example below, we double the number of steps by using <code>:step=&quot;0.5&quot;</code>.</p>', 3);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRange2<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="steps" tabindex="-1">Steps <a class="anchor-link" href="#steps" aria-hidden="true">#</a></h2><p>By default, range inputs &quot;snap&quot; to integer values. To change this, you can specify a <code>step</code> value. In the example below, we double the number of steps by using <code>:step=&quot;0.5&quot;</code>.</p>', 3);
 const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0.5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRange3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformrange" tabindex="-1">CFormRange <a class="anchor-link" href="#cformrange" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormRange <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormRange <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormRange&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>max</strong></td><td>Specifies the maximum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>min</strong></td><td>Specifies the minimum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>steps</strong></td><td>Specifies the interval between legal numbers in the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.<br><code>@controllable</code> onChange</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormRange</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0.5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customRange3<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformrange" tabindex="-1">CFormRange <a class="anchor-link" href="#cformrange" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormRange <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormRange <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormRange&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>max</strong></td><td>Specifies the maximum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>min</strong></td><td>Specifies the minimum value for the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>steps</strong></td><td>Specifies the interval between legal numbers in the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.<br><code>@controllable</code> onChange</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormRange = resolveComponent("CFormRange");
   const _component_ScssDocs = resolveComponent("ScssDocs");
diff --git a/vue/docs/assets/rating.html-COUjsjjF.js b/vue/docs/assets/rating.html-COUjsjjF.js
new file mode 100644
index 00000000000..5667d84c3ec
--- /dev/null
+++ b/vue/docs/assets/rating.html-COUjsjjF.js
@@ -0,0 +1,320 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, t as toDisplayString, d as withCtx, h as createBlock, i as createCommentVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
+var cilHeart = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z' class='ci-primary'/>"];
+var cilMeh = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><rect width='40' height='40' x='152' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='40' height='40' x='320' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='176' height='32' x='168' y='320' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/>"];
+var cilMoodBad = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><rect width='40' height='40' x='152' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='40' height='40' x='320' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,280A104,104,0,0,0,152,384H360A104,104,0,0,0,256,280Z' class='ci-primary'/>"];
+var cilMoodGood = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><rect width='40' height='40' x='152' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='40' height='40' x='320' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,384A104,104,0,0,0,360,280H152A104,104,0,0,0,256,384Z' class='ci-primary'/>"];
+var cilMoodVeryBad = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,280A104,104,0,0,0,152,384H360A104,104,0,0,0,256,280Z' class='ci-primary'/><rect width='32.001' height='96.333' x='148' y='159.834' fill='var(--ci-primary-color, currentColor)' class='ci-primary' transform='rotate(-48.366 164.002 208.001)'/><rect width='96.333' height='32' x='291.834' y='192' fill='var(--ci-primary-color, currentColor)' class='ci-primary' transform='rotate(-48.366 340.002 208)'/>"];
+var cilMoodVeryGood = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,384A104,104,0,0,0,360,280H152A104,104,0,0,0,256,384Z' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='205.757 228.292 226.243 203.708 168 155.173 109.757 203.708 130.243 228.292 168 196.827 205.757 228.292' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='285.757 203.708 306.243 228.292 344 196.827 381.757 228.292 402.243 203.708 344 155.173 285.757 203.708' class='ci-primary'/>"];
+var cilStar = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Zm-32.53,18.7L367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z' class='ci-primary'/>"];
+var cisStar = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M470.935,194.043,333.8,171.757,270.227,48.22a16,16,0,0,0-28.454,0L178.2,171.757,41.065,194.043A16,16,0,0,0,32.273,221.1l97.845,98.636L108.936,457.051a16,16,0,0,0,23.02,16.724L256,411.2l124.044,62.576a16,16,0,0,0,23.02-16.724L381.882,319.74,479.727,221.1A16,16,0,0,0,470.935,194.043Z' class='ci-primary'/>"];
+const _sfc_main = {
+  __name: "rating.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const selected = ref(2);
+    const currentValue = ref(3);
+    const setCurrentValue = (value) => {
+      currentValue.value = value;
+    };
+    const labels = {
+      1: "Very bad",
+      2: "Bad",
+      3: "Meh",
+      4: "Good",
+      5: "Very good"
+    };
+    const label = ref(labels[3]);
+    const setLabel = (_label) => {
+      label.value = _label;
+    };
+    const icons = {
+      1: { icon: cilMoodVeryBad, customClassName: " " },
+      2: { icon: cilMoodBad, customClassName: " " },
+      3: { icon: cilMeh, customClassName: " " },
+      4: { icon: cilMoodGood, customClassName: " " },
+      5: { icon: cilMoodVeryGood, customClassName: " " }
+    };
+    const activeIcons = {
+      1: { icon: cilMoodVeryBad, customClassName: "text-danger-emphasis" },
+      2: { icon: cilMoodBad, customClassName: "text-danger" },
+      3: { icon: cilMeh, customClassName: "text-warning" },
+      4: { icon: cilMoodGood, customClassName: "text-success" },
+      5: { icon: cilMoodVeryGood, customClassName: "text-success-emphasis" }
+    };
+    const __returned__ = { selected, currentValue, setCurrentValue, labels, label, setLabel, icons, activeIcons, ref, get cilHeart() {
+      return cilHeart;
+    }, get cilMoodVeryBad() {
+      return cilMoodVeryBad;
+    }, get cilMoodBad() {
+      return cilMoodBad;
+    }, get cilMoodGood() {
+      return cilMoodGood;
+    }, get cilMoodVeryGood() {
+      return cilMoodVeryGood;
+    }, get cilMeh() {
+      return cilMeh;
+    }, get cilStar() {
+      return cilStar;
+    }, get cisStar() {
+      return cisStar;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "how-to-use-vue-rating-component",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("How to use Vue Rating Component. "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#how-to-use-vue-rating-component",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Embed the Rating component in your Vue application like this:", -1);
+const _hoisted_3 = { class: "docs-example rounded-top p-4" };
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_6 = { class: "docs-example rounded-top p-4" };
+const _hoisted_7 = { class: "mt-3" };
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selected<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Selected value: {{selected}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="allow-clear" tabindex="-1">Allow clear <a class="anchor-link" href="#allow-clear" aria-hidden="true">#</a></h2><p>Enable users to clear their selected rating by clicking on the current rating again. This functionality is activated by setting <code>allowClear</code> boolean property.</p>', 3);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">allowClear</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="resettable" tabindex="-1">Resettable <a class="anchor-link" href="#resettable" aria-hidden="true">#</a></h2><p>This allows the selected rating to be deselected, effectively resetting the rating to a state where no value is selected.</p>', 3);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = { class: "d-flex align-items-center" };
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line"></span>\n<span class="line">  <span class="token keyword">const</span> currentValue <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span></span>\n<span class="line">  <span class="token keyword">const</span> <span class="token function-variable function">setCurrentValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    currentValue<span class="token punctuation">.</span>value <span class="token operator">=</span> value</span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; setCurrentValue(value)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentValue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>setCurrentValue(null)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="read-only" tabindex="-1">Read only <a class="anchor-link" href="#read-only" aria-hidden="true">#</a></h2><p>Set the Vue rating component to read-only by adding <code>readOnly</code> property. This disables interaction, preventing users from changing the displayed rating value.</p>', 3);
+const _hoisted_20 = { class: "docs-example rounded-top p-4" };
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">readOnly</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.</p>', 3);
+const _hoisted_24 = { class: "docs-example rounded-top p-4" };
+const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">disabled</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span>  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="tooltips" tabindex="-1">Tooltips <a class="anchor-link" href="#tooltips" aria-hidden="true">#</a></h2><p>Enable descriptive text on hover by adding <code>tooltips</code> prop. This provides immediate feedback or guidance as the user interacts with the rating items.</p>', 3);
+const _hoisted_28 = { class: "docs-example rounded-top p-4" };
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">tooltips</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>For custom messages, provide an array of labels corresponding to each rating value to enhance the user&#39;s understanding of each rating level.</p>', 2);
+const _hoisted_31 = { class: "docs-example rounded-top p-4" };
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:tooltips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Very bad&#39;, &#39;Bad&#39;, &#39;Meh&#39;, &#39;Good&#39;, &#39;Very good&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1">Sizes <a class="anchor-link" href="#sizes" aria-hidden="true">#</a></h2><p>Larger or smaller vue rating component? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
+const _hoisted_35 = { class: "docs-example rounded-top p-4" };
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span>  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="precision" tabindex="-1">Precision <a class="anchor-link" href="#precision" aria-hidden="true">#</a></h2><p>Adjust the granularity of the Rating component by setting <code>precision</code> prop. This attribute allows for fractional ratings, such as quarter values, to provide more precise feedback.</p>', 3);
+const _hoisted_39 = { class: "docs-example rounded-top p-4" };
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:precision</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0.25<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="number-of-items" tabindex="-1">Number of items <a class="anchor-link" href="#number-of-items" aria-hidden="true">#</a></h2><p>Control the total number of rating items displayed by using <code>itemCount</code> property. You can create a Vue rating component with a custom scale, be it larger for detailed assessments or smaller for simplicity.</p>', 3);
+const _hoisted_43 = { class: "docs-example rounded-top p-4" };
+const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:itemCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>', 1);
+const _hoisted_45 = { class: "docs-example rounded-top p-4" };
+const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:itemCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="custom-icons" tabindex="-1">Custom icons <a class="anchor-link" href="#custom-icons" aria-hidden="true">#</a></h2><p>Customize the Vue rating component with your choice of SVG icons by assigning new values to the <code>activeIcon</code> and <code>icon</code> properties in the JavaScript options. This allows for a unique look tailored to the design language of your site or application.</p><p>The Rating component can be customized with either SVG or font icons, allowing for visual alignment with your application&#39;s design. You can specify different icons for each rating value to enhance user interaction.</p><p>In the example below, we demonstrate how to set custom icons using SVG, allowing for detailed customization of the visual elements within the Rating component.</p>', 5);
+const _hoisted_51 = { class: "docs-example rounded-top p-4" };
+const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> cilStar<span class="token punctuation">,</span> cisStar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-pro&#39;</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#activeIcon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cisStar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> <span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilStar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> <span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In the example below, we use font icons from the CoreUI Icons set. In the <code>activeIcon</code> configuration, we also apply the utility class <code>text-danger</code> to change the icon&#39;s color to red when it is active.</p>', 2);
+const _hoisted_54 = { class: "docs-example rounded-top p-4" };
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> cilHeart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-pro&#39;</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#activeIcon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilHeart<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-danger<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilHeart<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> <span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For a more dynamic experience, define different icons for each rating value, enhancing the visual feedback:</p>', 2);
+const _hoisted_57 = { class: "docs-example rounded-top p-4" };
+const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> cilMoodVeryBad<span class="token punctuation">,</span> cilMoodBad<span class="token punctuation">,</span> cilMoodGood<span class="token punctuation">,</span> cilMoodVeryGood<span class="token punctuation">,</span> cilMeh <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-pro&#39;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> icons <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token number">1</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">2</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">3</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMeh<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">4</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">5</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> activeIcons <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token number">1</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-danger-emphasis&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">2</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-danger&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">3</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMeh<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-warning&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">4</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-success&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">5</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-success-emphasis&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> </span>\n<span class="line">    <span class="token attr-name">highlightOnlySelected</span></span>\n<span class="line">    <span class="token attr-name">:tooltips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Very bad&#39;, &#39;Bad&#39;, &#39;Meh&#39;, &#39;Good&#39;, &#39;Very good&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{value}</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icons[value].icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icons[value].customClassName<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#activeIcon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{value}</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>activeIcons[value].icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>activeIcons[value].customClassName<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-feedback" tabindex="-1">Custom feedback <a class="anchor-link" href="#custom-feedback" aria-hidden="true">#</a></h2><p>The Vue Rating component integrates interactive star ratings with dynamic textual feedback using other components from CoreUI. It enables users to select a rating that updates the display and label in real-time, enhancing the interactive experience. Hover effects provide immediate feedback on potential ratings before selection, ensuring an intuitive user interface.</p>', 3);
+const _hoisted_61 = { class: "docs-example rounded-top p-4" };
+const _hoisted_62 = { class: "d-flex align-items-center" };
+const _hoisted_63 = { class: "text-body-secondary me-3" };
+const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> currentValue <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span></span>\n<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">setCurrentValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">  currentValue<span class="token punctuation">.</span>value <span class="token operator">=</span> value</span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> labels <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token number">1</span><span class="token operator">:</span> <span class="token string">&#39;Very bad&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">2</span><span class="token operator">:</span> <span class="token string">&#39;Bad&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">3</span><span class="token operator">:</span> <span class="token string">&#39;Meh&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">4</span><span class="token operator">:</span> <span class="token string">&#39;Good&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">5</span><span class="token operator">:</span> <span class="token string">&#39;Very good&#39;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> label <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>labels<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">setLabel</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">_label</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">  label<span class="token punctuation">.</span>value <span class="token operator">=</span> _label</span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary me-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{currentValue}} / 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-flex<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentValue<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; setCurrentValue(value)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">@hover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; setLabel(value ? labels[value] : labels[currentValue])<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{label}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue ratings use local CSS variables on <code>.rating</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CRating <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CRating<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_71 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="crating" tabindex="-1">CRating <a class="anchor-link" href="#crating" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRating <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRating <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/rating/CRating&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-clear</strong></td><td>Enables the clearing upon clicking the selected item again.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>highlight-only-selected</strong></td><td>If enabled, only the currently selected icon will be visibly highlighted.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>item-count</strong></td><td>Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc.</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>The name attribute of the radio input elements.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>precision</strong></td><td>Minimum increment value change allowed.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or custom if you define custom icons with custom height.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;custom&#39;</code></td><td>-</td></tr><tr><td><strong>tooltips</strong></td><td>Enable tooltips with default values or set specific labels for each icon.</td><td>boolean | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>hover</strong></td><td>Execute a function when a user hover the element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CRating = resolveComponent("CRating");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CIcon = resolveComponent("CIcon");
+  const _component_CBadge = resolveComponent("CBadge");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    createBaseVNode("div", _hoisted_3, [
+      createVNode(_component_CRating, { value: 3 })
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_6, [
+      createVNode(_component_CRating, {
+        modelValue: $setup.selected,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.selected = $event)
+      }, null, 8, ["modelValue"]),
+      createBaseVNode("div", _hoisted_7, "Selected value: " + toDisplayString($setup.selected), 1)
+    ]),
+    _hoisted_8,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CRating, {
+        allowClear: "",
+        value: 3
+      })
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_15, [
+      createBaseVNode("div", _hoisted_16, [
+        createVNode(_component_CRating, {
+          onChange: _cache[1] || (_cache[1] = (value) => $setup.setCurrentValue(value)),
+          value: $setup.currentValue
+        }, null, 8, ["value"]),
+        createVNode(_component_CButton, {
+          class: "ms-3",
+          color: "primary",
+          onClick: _cache[2] || (_cache[2] = ($event) => $setup.setCurrentValue(null))
+        }, {
+          default: withCtx(() => [
+            createTextVNode("reset")
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    _hoisted_17,
+    createBaseVNode("div", _hoisted_20, [
+      createVNode(_component_CRating, {
+        readOnly: "",
+        value: 3
+      })
+    ]),
+    _hoisted_21,
+    createBaseVNode("div", _hoisted_24, [
+      createVNode(_component_CRating, {
+        disabled: "",
+        value: 3
+      })
+    ]),
+    _hoisted_25,
+    createBaseVNode("div", _hoisted_28, [
+      createVNode(_component_CRating, {
+        tooltips: "",
+        value: 3
+      })
+    ]),
+    _hoisted_29,
+    createBaseVNode("div", _hoisted_31, [
+      createVNode(_component_CRating, {
+        tooltips: ["Very bad", "Bad", "Meh", "Good", "Very good"],
+        value: 3
+      })
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_35, [
+      createVNode(_component_CRating, {
+        size: "sm",
+        value: 3
+      }),
+      createVNode(_component_CRating, { value: 3 }),
+      createVNode(_component_CRating, {
+        size: "lg",
+        value: 3
+      })
+    ]),
+    _hoisted_36,
+    createBaseVNode("div", _hoisted_39, [
+      createVNode(_component_CRating, {
+        precision: 0.25,
+        value: 3
+      })
+    ]),
+    _hoisted_40,
+    createBaseVNode("div", _hoisted_43, [
+      createVNode(_component_CRating, {
+        itemCount: 20,
+        value: 5
+      })
+    ]),
+    _hoisted_44,
+    createBaseVNode("div", _hoisted_45, [
+      createVNode(_component_CRating, {
+        itemCount: 3,
+        value: 1
+      })
+    ]),
+    _hoisted_46,
+    createBaseVNode("div", _hoisted_51, [
+      createVNode(_component_CRating, { value: 3 }, {
+        activeIcon: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: $setup.cisStar,
+            customClassName: " "
+          }, null, 8, ["icon"])
+        ]),
+        icon: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: $setup.cilStar,
+            customClassName: " "
+          }, null, 8, ["icon"])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_52,
+    createBaseVNode("div", _hoisted_54, [
+      createVNode(_component_CRating, { value: 3 }, {
+        activeIcon: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: $setup.cilHeart,
+            customClassName: "text-danger"
+          }, null, 8, ["icon"])
+        ]),
+        icon: withCtx(() => [
+          createVNode(_component_CIcon, {
+            icon: $setup.cilHeart,
+            customClassName: " "
+          }, null, 8, ["icon"])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_55,
+    createBaseVNode("div", _hoisted_57, [
+      createVNode(_component_CRating, {
+        highlightOnlySelected: "",
+        tooltips: ["Very bad", "Bad", "Meh", "Good", "Very good"],
+        value: 3
+      }, {
+        icon: withCtx(({ value }) => [
+          createVNode(_component_CIcon, {
+            icon: $setup.icons[value].icon,
+            customClassName: $setup.icons[value].customClassName
+          }, null, 8, ["icon", "customClassName"])
+        ]),
+        activeIcon: withCtx(({ value }) => [
+          createVNode(_component_CIcon, {
+            icon: $setup.activeIcons[value].icon,
+            customClassName: $setup.activeIcons[value].customClassName
+          }, null, 8, ["icon", "customClassName"])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_58,
+    createBaseVNode("div", _hoisted_61, [
+      createBaseVNode("div", _hoisted_62, [
+        createBaseVNode("div", _hoisted_63, toDisplayString($setup.currentValue) + " / 5", 1),
+        createVNode(_component_CRating, {
+          class: "d-inline-flex",
+          value: $setup.currentValue,
+          onChange: _cache[3] || (_cache[3] = (value) => $setup.setCurrentValue(value)),
+          onHover: _cache[4] || (_cache[4] = (value) => $setup.setLabel(value ? $setup.labels[value] : $setup.labels[$setup.currentValue]))
+        }, null, 8, ["value"]),
+        $setup.label ? (openBlock(), createBlock(_component_CBadge, {
+          key: 0,
+          class: "ms-3",
+          color: "dark"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString($setup.label), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ])
+    ]),
+    _hoisted_64,
+    createVNode(_component_ScssDocs, {
+      file: "_rating.scss",
+      capture: "rating-css-vars"
+    }),
+    _hoisted_68,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "rating-variables"
+    }),
+    _hoisted_71
+  ]);
+}
+const rating_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "rating.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/rating.html","title":"Vue Rating Component","lang":"en-US","frontmatter":{"title":"Vue Rating Component","name":"Rating","description":"A Vue star rating component allows users to rate and provide feedback on content or products by selecting a specified number of stars, typically ranging from one to five, representing their level of satisfaction or preference.","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/rating.html"}]]},"headers":[{"level":2,"title":"How to use Vue Rating Component.","slug":"how-to-use-vue-rating-component","link":"#how-to-use-vue-rating-component","children":[{"level":3,"title":"vModel","slug":"vmodel","link":"#vmodel","children":[]}]},{"level":2,"title":"Allow clear","slug":"allow-clear","link":"#allow-clear","children":[]},{"level":2,"title":"Resettable","slug":"resettable","link":"#resettable","children":[]},{"level":2,"title":"Read only","slug":"read-only","link":"#read-only","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Tooltips","slug":"tooltips","link":"#tooltips","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]},{"level":2,"title":"Precision","slug":"precision","link":"#precision","children":[]},{"level":2,"title":"Number of items","slug":"number-of-items","link":"#number-of-items","children":[]},{"level":2,"title":"Custom icons","slug":"custom-icons","link":"#custom-icons","children":[]},{"level":2,"title":"Custom feedback","slug":"custom-feedback","link":"#custom-feedback","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CRating","slug":"crating","link":"#crating","children":[]}]}],"filePathRelative":"forms/rating.md"}');
+export {
+  rating_html as comp,
+  data
+};
diff --git a/vue/docs/assets/rating.html-KMNIDE6n.js b/vue/docs/assets/rating.html-KMNIDE6n.js
deleted file mode 100644
index af3abe82b0f..00000000000
--- a/vue/docs/assets/rating.html-KMNIDE6n.js
+++ /dev/null
@@ -1,300 +0,0 @@
-import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, t as toDisplayString, d as withCtx, h as createBlock, i as createCommentVNode, e as createTextVNode, f as createStaticVNode, u as unref } from "./app-Dv803XR0.js";
-var cilHeart = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z' class='ci-primary'/>"];
-var cilMeh = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><rect width='40' height='40' x='152' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='40' height='40' x='320' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='176' height='32' x='168' y='320' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/>"];
-var cilMoodBad = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><rect width='40' height='40' x='152' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='40' height='40' x='320' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,280A104,104,0,0,0,152,384H360A104,104,0,0,0,256,280Z' class='ci-primary'/>"];
-var cilMoodGood = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><rect width='40' height='40' x='152' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><rect width='40' height='40' x='320' y='200' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,384A104,104,0,0,0,360,280H152A104,104,0,0,0,256,384Z' class='ci-primary'/>"];
-var cilMoodVeryBad = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,280A104,104,0,0,0,152,384H360A104,104,0,0,0,256,280Z' class='ci-primary'/><rect width='32.001' height='96.333' x='148' y='159.834' fill='var(--ci-primary-color, currentColor)' class='ci-primary' transform='rotate(-48.366 164.002 208.001)'/><rect width='96.333' height='32' x='291.834' y='192' fill='var(--ci-primary-color, currentColor)' class='ci-primary' transform='rotate(-48.366 340.002 208)'/>"];
-var cilMoodVeryGood = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M256,384A104,104,0,0,0,360,280H152A104,104,0,0,0,256,384Z' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='205.757 228.292 226.243 203.708 168 155.173 109.757 203.708 130.243 228.292 168 196.827 205.757 228.292' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='285.757 203.708 306.243 228.292 344 196.827 381.757 228.292 402.243 203.708 344 155.173 285.757 203.708' class='ci-primary'/>"];
-var cilStar = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Zm-32.53,18.7L367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z' class='ci-primary'/>"];
-var cisStar = ["512 512", "<path fill='var(--ci-primary-color, currentColor)' d='M470.935,194.043,333.8,171.757,270.227,48.22a16,16,0,0,0-28.454,0L178.2,171.757,41.065,194.043A16,16,0,0,0,32.273,221.1l97.845,98.636L108.936,457.051a16,16,0,0,0,23.02,16.724L256,411.2l124.044,62.576a16,16,0,0,0,23.02-16.724L381.882,319.74,479.727,221.1A16,16,0,0,0,470.935,194.043Z' class='ci-primary'/>"];
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "how-to-use-vue-rating-component",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("How to use Vue Rating Component. "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#how-to-use-vue-rating-component",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Embed the Rating component in your Vue application like this:", -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3>', 2);
-const _hoisted_6 = { class: "docs-example rounded-top p-4" };
-const _hoisted_7 = { class: "mt-3" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selected<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Selected value: {{selected}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="allow-clear" tabindex="-1">Allow clear <a class="anchor-link" href="#allow-clear" aria-hidden="true">#</a></h2><p>Enable users to clear their selected rating by clicking on the current rating again. This functionality is activated by setting <code>allowClear</code> boolean property.</p>', 3);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">allowClear</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="resettable" tabindex="-1">Resettable <a class="anchor-link" href="#resettable" aria-hidden="true">#</a></h2><p>This allows the selected rating to be deselected, effectively resetting the rating to a state where no value is selected.</p>', 3);
-const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = { class: "d-flex align-items-center" };
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line"></span>\n<span class="line">  <span class="token keyword">const</span> currentValue <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span></span>\n<span class="line">  <span class="token keyword">const</span> <span class="token function-variable function">setCurrentValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    currentValue<span class="token punctuation">.</span>value <span class="token operator">=</span> value</span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; setCurrentValue(value)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentValue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>setCurrentValue(null)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="read-only" tabindex="-1">Read only <a class="anchor-link" href="#read-only" aria-hidden="true">#</a></h2><p>Set the Vue rating component to read-only by adding <code>readOnly</code> property. This disables interaction, preventing users from changing the displayed rating value.</p>', 3);
-const _hoisted_20 = { class: "docs-example rounded-top p-4" };
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">readOnly</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.</p>', 3);
-const _hoisted_24 = { class: "docs-example rounded-top p-4" };
-const _hoisted_25 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">disabled</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span>  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="tooltips" tabindex="-1">Tooltips <a class="anchor-link" href="#tooltips" aria-hidden="true">#</a></h2><p>Enable descriptive text on hover by adding <code>tooltips</code> prop. This provides immediate feedback or guidance as the user interacts with the rating items.</p>', 3);
-const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">tooltips</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>For custom messages, provide an array of labels corresponding to each rating value to enhance the user&#39;s understanding of each rating level.</p>', 2);
-const _hoisted_31 = { class: "docs-example rounded-top p-4" };
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:tooltips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Very bad&#39;, &#39;Bad&#39;, &#39;Meh&#39;, &#39;Good&#39;, &#39;Very good&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1">Sizes <a class="anchor-link" href="#sizes" aria-hidden="true">#</a></h2><p>Larger or smaller vue rating component? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
-const _hoisted_35 = { class: "docs-example rounded-top p-4" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span>  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="precision" tabindex="-1">Precision <a class="anchor-link" href="#precision" aria-hidden="true">#</a></h2><p>Adjust the granularity of the Rating component by setting <code>precision</code> prop. This attribute allows for fractional ratings, such as quarter values, to provide more precise feedback.</p>', 3);
-const _hoisted_39 = { class: "docs-example rounded-top p-4" };
-const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:precision</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0.25<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="number-of-items" tabindex="-1">Number of items <a class="anchor-link" href="#number-of-items" aria-hidden="true">#</a></h2><p>Control the total number of rating items displayed by using <code>itemCount</code> property. You can create a Vue rating component with a custom scale, be it larger for detailed assessments or smaller for simplicity.</p>', 3);
-const _hoisted_43 = { class: "docs-example rounded-top p-4" };
-const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:itemCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>', 1);
-const _hoisted_45 = { class: "docs-example rounded-top p-4" };
-const _hoisted_46 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:itemCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="custom-icons" tabindex="-1">Custom icons <a class="anchor-link" href="#custom-icons" aria-hidden="true">#</a></h2><p>Customize the Vue rating component with your choice of SVG icons by assigning new values to the <code>activeIcon</code> and <code>icon</code> properties in the JavaScript options. This allows for a unique look tailored to the design language of your site or application.</p><p>The Rating component can be customized with either SVG or font icons, allowing for visual alignment with your application&#39;s design. You can specify different icons for each rating value to enhance user interaction.</p><p>In the example below, we demonstrate how to set custom icons using SVG, allowing for detailed customization of the visual elements within the Rating component.</p>', 5);
-const _hoisted_51 = { class: "docs-example rounded-top p-4" };
-const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> cilStar<span class="token punctuation">,</span> cisStar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-pro&#39;</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#activeIcon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cisStar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> <span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilStar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> <span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In the example below, we use font icons from the CoreUI Icons set. In the <code>activeIcon</code> configuration, we also apply the utility class <code>text-danger</code> to change the icon&#39;s color to red when it is active.</p>', 2);
-const _hoisted_54 = { class: "docs-example rounded-top p-4" };
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> cilHeart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-pro&#39;</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#activeIcon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilHeart<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-danger<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cilHeart<span class="token punctuation">&quot;</span></span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> <span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For a more dynamic experience, define different icons for each rating value, enhancing the visual feedback:</p>', 2);
-const _hoisted_57 = { class: "docs-example rounded-top p-4" };
-const _hoisted_58 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> cilMoodVeryBad<span class="token punctuation">,</span> cilMoodBad<span class="token punctuation">,</span> cilMoodGood<span class="token punctuation">,</span> cilMoodVeryGood<span class="token punctuation">,</span> cilMeh <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/icons-pro&#39;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> icons <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token number">1</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">2</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">3</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMeh<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">4</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">5</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> activeIcons <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token number">1</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-danger-emphasis&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">2</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodBad<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-danger&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">3</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMeh<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-warning&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">4</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-success&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">5</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> cilMoodVeryGood<span class="token punctuation">,</span> <span class="token literal-property property">customClassName</span><span class="token operator">:</span> <span class="token string">&quot;text-success-emphasis&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span> </span>\n<span class="line">    <span class="token attr-name">highlightOnlySelected</span></span>\n<span class="line">    <span class="token attr-name">:tooltips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;Very bad&#39;, &#39;Bad&#39;, &#39;Meh&#39;, &#39;Good&#39;, &#39;Very good&#39;]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{value}</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icons[value].icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icons[value].customClassName<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#activeIcon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{value}</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>activeIcons[value].icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>activeIcons[value].customClassName<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRating</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-feedback" tabindex="-1">Custom feedback <a class="anchor-link" href="#custom-feedback" aria-hidden="true">#</a></h2><p>The Vue Rating component integrates interactive star ratings with dynamic textual feedback using other components from CoreUI. It enables users to select a rating that updates the display and label in real-time, enhancing the interactive experience. Hover effects provide immediate feedback on potential ratings before selection, ensuring an intuitive user interface.</p>', 3);
-const _hoisted_61 = { class: "docs-example rounded-top p-4" };
-const _hoisted_62 = { class: "d-flex align-items-center" };
-const _hoisted_63 = { class: "text-body-secondary me-3" };
-const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> currentValue <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span></span>\n<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">setCurrentValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">  currentValue<span class="token punctuation">.</span>value <span class="token operator">=</span> value</span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> labels <span class="token operator">=</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token number">1</span><span class="token operator">:</span> <span class="token string">&#39;Very bad&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">2</span><span class="token operator">:</span> <span class="token string">&#39;Bad&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">3</span><span class="token operator">:</span> <span class="token string">&#39;Meh&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">4</span><span class="token operator">:</span> <span class="token string">&#39;Good&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token number">5</span><span class="token operator">:</span> <span class="token string">&#39;Very good&#39;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> label <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>labels<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">setLabel</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">_label</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">  label<span class="token punctuation">.</span>value <span class="token operator">=</span> _label</span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex align-items-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary me-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{currentValue}} / 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRating</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-flex<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentValue<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; setCurrentValue(value)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">@hover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; setLabel(value ? labels[value] : labels[currentValue])<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{label}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue ratings use local CSS variables on <code>.rating</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CRating <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CRating<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_71 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="crating" tabindex="-1">CRating <a class="anchor-link" href="#crating" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CRating <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CRating <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/rating/CRating&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>allow-clear</strong></td><td>Enables the clearing upon clicking the selected item again.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>highlight-only-selected</strong></td><td>If enabled, only the currently selected icon will be visibly highlighted.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>item-count</strong></td><td>Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc.</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>name</strong></td><td>The name attribute of the radio input elements.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>precision</strong></td><td>Minimum increment value change allowed.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or custom if you define custom icons with custom height.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code>, <code>&#39;custom&#39;</code></td><td>-</td></tr><tr><td><strong>tooltips</strong></td><td>Enable tooltips with default values or set specific labels for each icon.</td><td>boolean | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>The <code>value</code> attribute of component.</td><td>number</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Execute a function when a user changes the selected element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>hover</strong></td><td>Execute a function when a user hover the element.</td><td><strong>value</strong> <code>number | null</code> - undefined</td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
-const _sfc_main = {
-  __name: "rating.html",
-  setup(__props) {
-    const selected = ref(2);
-    const currentValue = ref(3);
-    const setCurrentValue = (value) => {
-      currentValue.value = value;
-    };
-    const labels = {
-      1: "Very bad",
-      2: "Bad",
-      3: "Meh",
-      4: "Good",
-      5: "Very good"
-    };
-    const label = ref(labels[3]);
-    const setLabel = (_label) => {
-      label.value = _label;
-    };
-    const icons = {
-      1: { icon: cilMoodVeryBad, customClassName: " " },
-      2: { icon: cilMoodBad, customClassName: " " },
-      3: { icon: cilMeh, customClassName: " " },
-      4: { icon: cilMoodGood, customClassName: " " },
-      5: { icon: cilMoodVeryGood, customClassName: " " }
-    };
-    const activeIcons = {
-      1: { icon: cilMoodVeryBad, customClassName: "text-danger-emphasis" },
-      2: { icon: cilMoodBad, customClassName: "text-danger" },
-      3: { icon: cilMeh, customClassName: "text-warning" },
-      4: { icon: cilMoodGood, customClassName: "text-success" },
-      5: { icon: cilMoodVeryGood, customClassName: "text-success-emphasis" }
-    };
-    return (_ctx, _cache) => {
-      const _component_CRating = resolveComponent("CRating");
-      const _component_CButton = resolveComponent("CButton");
-      const _component_CIcon = resolveComponent("CIcon");
-      const _component_CBadge = resolveComponent("CBadge");
-      const _component_ScssDocs = resolveComponent("ScssDocs");
-      return openBlock(), createElementBlock("div", null, [
-        _hoisted_1,
-        _hoisted_2,
-        createBaseVNode("div", _hoisted_3, [
-          createVNode(_component_CRating, { value: 3 })
-        ]),
-        _hoisted_4,
-        createBaseVNode("div", _hoisted_6, [
-          createVNode(_component_CRating, {
-            modelValue: selected.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selected.value = $event)
-          }, null, 8, ["modelValue"]),
-          createBaseVNode("div", _hoisted_7, "Selected value: " + toDisplayString(selected.value), 1)
-        ]),
-        _hoisted_8,
-        createBaseVNode("div", _hoisted_11, [
-          createVNode(_component_CRating, {
-            allowClear: "",
-            value: 3
-          })
-        ]),
-        _hoisted_12,
-        createBaseVNode("div", _hoisted_15, [
-          createBaseVNode("div", _hoisted_16, [
-            createVNode(_component_CRating, {
-              onChange: _cache[1] || (_cache[1] = (value) => setCurrentValue(value)),
-              value: currentValue.value
-            }, null, 8, ["value"]),
-            createVNode(_component_CButton, {
-              class: "ms-3",
-              color: "primary",
-              onClick: _cache[2] || (_cache[2] = ($event) => setCurrentValue(null))
-            }, {
-              default: withCtx(() => [
-                createTextVNode("reset")
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _hoisted_17,
-        createBaseVNode("div", _hoisted_20, [
-          createVNode(_component_CRating, {
-            readOnly: "",
-            value: 3
-          })
-        ]),
-        _hoisted_21,
-        createBaseVNode("div", _hoisted_24, [
-          createVNode(_component_CRating, {
-            disabled: "",
-            value: 3
-          })
-        ]),
-        _hoisted_25,
-        createBaseVNode("div", _hoisted_28, [
-          createVNode(_component_CRating, {
-            tooltips: "",
-            value: 3
-          })
-        ]),
-        _hoisted_29,
-        createBaseVNode("div", _hoisted_31, [
-          createVNode(_component_CRating, {
-            tooltips: ["Very bad", "Bad", "Meh", "Good", "Very good"],
-            value: 3
-          })
-        ]),
-        _hoisted_32,
-        createBaseVNode("div", _hoisted_35, [
-          createVNode(_component_CRating, {
-            size: "sm",
-            value: 3
-          }),
-          createVNode(_component_CRating, { value: 3 }),
-          createVNode(_component_CRating, {
-            size: "lg",
-            value: 3
-          })
-        ]),
-        _hoisted_36,
-        createBaseVNode("div", _hoisted_39, [
-          createVNode(_component_CRating, {
-            precision: 0.25,
-            value: 3
-          })
-        ]),
-        _hoisted_40,
-        createBaseVNode("div", _hoisted_43, [
-          createVNode(_component_CRating, {
-            itemCount: 20,
-            value: 5
-          })
-        ]),
-        _hoisted_44,
-        createBaseVNode("div", _hoisted_45, [
-          createVNode(_component_CRating, {
-            itemCount: 3,
-            value: 1
-          })
-        ]),
-        _hoisted_46,
-        createBaseVNode("div", _hoisted_51, [
-          createVNode(_component_CRating, { value: 3 }, {
-            activeIcon: withCtx(() => [
-              createVNode(_component_CIcon, {
-                icon: unref(cisStar),
-                customClassName: " "
-              }, null, 8, ["icon"])
-            ]),
-            icon: withCtx(() => [
-              createVNode(_component_CIcon, {
-                icon: unref(cilStar),
-                customClassName: " "
-              }, null, 8, ["icon"])
-            ]),
-            _: 1
-          })
-        ]),
-        _hoisted_52,
-        createBaseVNode("div", _hoisted_54, [
-          createVNode(_component_CRating, { value: 3 }, {
-            activeIcon: withCtx(() => [
-              createVNode(_component_CIcon, {
-                icon: unref(cilHeart),
-                customClassName: "text-danger"
-              }, null, 8, ["icon"])
-            ]),
-            icon: withCtx(() => [
-              createVNode(_component_CIcon, {
-                icon: unref(cilHeart),
-                customClassName: " "
-              }, null, 8, ["icon"])
-            ]),
-            _: 1
-          })
-        ]),
-        _hoisted_55,
-        createBaseVNode("div", _hoisted_57, [
-          createVNode(_component_CRating, {
-            highlightOnlySelected: "",
-            tooltips: ["Very bad", "Bad", "Meh", "Good", "Very good"],
-            value: 3
-          }, {
-            icon: withCtx(({ value }) => [
-              createVNode(_component_CIcon, {
-                icon: icons[value].icon,
-                customClassName: icons[value].customClassName
-              }, null, 8, ["icon", "customClassName"])
-            ]),
-            activeIcon: withCtx(({ value }) => [
-              createVNode(_component_CIcon, {
-                icon: activeIcons[value].icon,
-                customClassName: activeIcons[value].customClassName
-              }, null, 8, ["icon", "customClassName"])
-            ]),
-            _: 1
-          })
-        ]),
-        _hoisted_58,
-        createBaseVNode("div", _hoisted_61, [
-          createBaseVNode("div", _hoisted_62, [
-            createBaseVNode("div", _hoisted_63, toDisplayString(currentValue.value) + " / 5", 1),
-            createVNode(_component_CRating, {
-              class: "d-inline-flex",
-              value: currentValue.value,
-              onChange: _cache[3] || (_cache[3] = (value) => setCurrentValue(value)),
-              onHover: _cache[4] || (_cache[4] = (value) => setLabel(value ? labels[value] : labels[currentValue.value]))
-            }, null, 8, ["value"]),
-            label.value ? (openBlock(), createBlock(_component_CBadge, {
-              key: 0,
-              class: "ms-3",
-              color: "dark"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(label.value), 1)
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
-          ])
-        ]),
-        _hoisted_64,
-        createVNode(_component_ScssDocs, {
-          file: "_rating.scss",
-          capture: "rating-css-vars"
-        }),
-        _hoisted_68,
-        createVNode(_component_ScssDocs, {
-          file: "_variables.scss",
-          capture: "rating-variables"
-        }),
-        _hoisted_71
-      ]);
-    };
-  }
-};
-const rating_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "rating.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/rating.html","title":"Vue Rating Component","lang":"en-US","frontmatter":{"title":"Vue Rating Component","name":"Rating","description":"A Vue star rating component allows users to rate and provide feedback on content or products by selecting a specified number of stars, typically ranging from one to five, representing their level of satisfaction or preference.","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/rating.html"}]]},"headers":[{"level":2,"title":"How to use Vue Rating Component.","slug":"how-to-use-vue-rating-component","link":"#how-to-use-vue-rating-component","children":[{"level":3,"title":"vModel","slug":"vmodel","link":"#vmodel","children":[]}]},{"level":2,"title":"Allow clear","slug":"allow-clear","link":"#allow-clear","children":[]},{"level":2,"title":"Resettable","slug":"resettable","link":"#resettable","children":[]},{"level":2,"title":"Read only","slug":"read-only","link":"#read-only","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Tooltips","slug":"tooltips","link":"#tooltips","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]},{"level":2,"title":"Precision","slug":"precision","link":"#precision","children":[]},{"level":2,"title":"Number of items","slug":"number-of-items","link":"#number-of-items","children":[]},{"level":2,"title":"Custom icons","slug":"custom-icons","link":"#custom-icons","children":[]},{"level":2,"title":"Custom feedback","slug":"custom-feedback","link":"#custom-feedback","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CRating","slug":"crating","link":"#crating","children":[]}]}],"filePathRelative":"forms/rating.md"}');
-export {
-  rating_html as comp,
-  data
-};
diff --git a/vue/docs/assets/sass.html-DHfDOQ32.js b/vue/docs/assets/sass.html-DHfDOQ32.js
new file mode 100644
index 00000000000..2ffac2cea1a
--- /dev/null
+++ b/vue/docs/assets/sass.html-DHfDOQ32.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p><h2 id="file-structure" tabindex="-1">File structure <a class="anchor-link" href="#file-structure" aria-hidden="true">#</a></h2><p>Whenever possible, avoid modifying CoreUI&#39;s core files. For Sass, that means creating your own stylesheet that imports CoreUI for Bootstrap so you can modify and extend it. Assuming you&#39;re using a package manager like npm, you&#39;ll have a file structure that looks like this:</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── scss</span>\n<span class="line">│   └── custom.scss</span>\n<span class="line">└── node_modules/</span>\n<span class="line">    └── @coreui/coreui</span>\n<span class="line">        ├── js</span>\n<span class="line">        └── scss</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you&#39;ve downloaded our source files and aren&#39;t using a package manager, you&#39;ll want to manually create something similar to that structure, keeping CoreUI&#39;s source files separate from your own.</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── scss</span>\n<span class="line">│   └── custom.scss</span>\n<span class="line">└── @coreui/coreui/</span>\n<span class="line">    ├── js</span>\n<span class="line">    └── scss</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="importing" tabindex="-1">Importing <a class="anchor-link" href="#importing" aria-hidden="true">#</a></h2><p>In your <code>custom.scss</code>, you&#39;ll import CoreUI&#39;s source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Custom.scss</span></span>\n<span class="line"><span class="token comment">// Option A: Include all of CoreUI</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/coreui&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Then add additional custom code here</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Custom.scss</span></span>\n<span class="line"><span class="token comment">// Option B: Include parts of CoreUI</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/functions&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 2. Include any default variable overrides here</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 3. Include remainder of required CoreUI stylesheets</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/variables&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 4. Include any default map overrides here</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 5. Include remainder of required parts</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/maps&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/mixins&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/root&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 6. Optionally include any other parts as needed</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/utilities&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/reboot&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/type&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/images&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/containers&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/grid&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/helpers&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/utilities/api&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 8. Add additional custom code here</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code>custom.scss</code>. You can also start to add parts of CoreUI for Bootstrap under the <code>// Optional</code> section as needed. We suggest using the full import stack from our <code>coreui.scss</code> file as your starting point.</p><h2 id="variable-defaults" tabindex="-1">Variable defaults <a class="anchor-link" href="#variable-defaults" aria-hidden="true">#</a></h2><p>Every Sass variable in CoreUI for Bootstrap includes the <code>!default</code> flag allowing you to override the variable&#39;s default value in your own Sass without modifying CoreUI&#39;s source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won&#39;t be re-assigned by the default values in Bootstrap.</p><p>You will find the complete list of CoreUI&#39;s variables in <code>@coreui/coreui/scss/_variables.scss</code>. Some variables are set to <code>null</code>, these variables don&#39;t output the property unless they are overridden in your configuration.</p><p>Variable overrides must come after our functions are imported, but before the rest of the imports.</p><p>Here&#39;s an example that changes the <code>background-color</code> and <code>color</code> for the <code>&lt;body&gt;</code> when importing and compiling CoreUI for Bootstrap via npm:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Required</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/functions&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Default variable overrides</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-bg</span></span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-color</span></span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Required</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/variables&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/maps&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/mixins&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/root&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Optional CoreUI components here</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/reboot&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/type&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token comment">// etc</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Repeat as necessary for any variable in CoreUI, including the global options below.</p><h2 id="maps-and-loops" tabindex="-1">Maps and loops <a class="anchor-link" href="#maps-and-loops" aria-hidden="true">#</a></h2><p>CoreUI for Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the <code>!default</code> flag and can be overridden and extended.</p><p>Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making <em>removing</em> items from a map slightly more difficult.</p><h3 id="modify-map" tabindex="-1">Modify map <a class="anchor-link" href="#modify-map" aria-hidden="true">#</a></h3><p>All variables in the <code>$theme-colors</code> map are defined as standalone variables. To modify an existing color in our <code>$theme-colors</code> map, add the following to your custom Sass file:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$primary</span></span><span class="token punctuation">:</span> #0074d9<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$danger</span></span><span class="token punctuation">:</span> #ff4136<span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>Later on, these variables are set in CoreUI&#39;s <code>$theme-colors</code> map:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span></span>\n<span class="line">  <span class="token string">&quot;primary&quot;</span><span class="token punctuation">:</span> <span class="token variable">$primary</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string">&quot;danger&quot;</span><span class="token punctuation">:</span> <span class="token variable">$danger</span></span>\n<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="add-to-map" tabindex="-1">Add to map <a class="anchor-link" href="#add-to-map" aria-hidden="true">#</a></h3><p>Add new colors to <code>$theme-colors</code>, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we&#39;ll create a new <code>$custom-colors</code> map and merge it with <code>$theme-colors</code>.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Create your own map</span></span>\n<span class="line"><span class="token property"><span class="token variable">$custom-colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span></span>\n<span class="line">  <span class="token string">&quot;custom-color&quot;</span><span class="token punctuation">:</span> #900</span>\n<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Merge the maps</span></span>\n<span class="line"><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token function">map-merge</span><span class="token punctuation">(</span><span class="token variable">$theme-colors</span><span class="token punctuation">,</span> <span class="token variable">$custom-colors</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="remove-from-map" tabindex="-1">Remove from map <a class="anchor-link" href="#remove-from-map" aria-hidden="true">#</a></h3><p>To remove colors from <code>$theme-colors</code>, or any other map, use <code>map-remove</code>. Be aware you must insert it between our requirements and options:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Required</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/functions&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/variables&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/maps&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/mixins&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/root&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token function">map-remove</span><span class="token punctuation">(</span><span class="token variable">$theme-colors</span><span class="token punctuation">,</span> <span class="token string">&quot;info&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;light&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;dark&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Optional</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/reboot&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/type&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token comment">// etc</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="required-keys" tabindex="-1">Required keys <a class="anchor-link" href="#required-keys" aria-hidden="true">#</a></h2><p>CoreUI for Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map&#39;s key is being used.</p><p>For example, we use the <code>primary</code>, <code>success</code>, and <code>danger</code> keys from <code>$theme-colors</code> for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you&#39;ll need to modify the Sass code that makes use of those values.</p><h2 id="functions" tabindex="-1">Functions <a class="anchor-link" href="#functions" aria-hidden="true">#</a></h2><h3 id="colors" tabindex="-1">Colors <a class="anchor-link" href="#colors" aria-hidden="true">#</a></h3><p>Next to the <a href="https://coreui.io/docs/customize/color#color-sass-maps%22" target="_blank" rel="noopener noreferrer">Sass maps</a> we have, theme colors can also be used as standalone variables, like <code>$primary</code>.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$gray-100</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$dark</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can lighten or darken colors with CoreUI&#39;s <code>tint-color()</code> and <code>shade-color()</code> functions. These functions will mix colors with black or white, unlike Sass&#39; native <code>lighten()</code> and <code>darken()</code> functions which will change the lightness by a fixed amount, which often doesn&#39;t lead to the desired effect.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Tint a color: mix a color with white</span></span>\n<span class="line"><span class="token keyword">@function</span> <span class="token function">tint-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@return</span> <span class="token function">mix</span><span class="token punctuation">(</span>white<span class="token punctuation">,</span> <span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Shade a color: mix a color with black</span></span>\n<span class="line"><span class="token keyword">@function</span> <span class="token function">shade-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@return</span> <span class="token function">mix</span><span class="token punctuation">(</span>black<span class="token punctuation">,</span> <span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Shade the color if the weight is positive, else tint it</span></span>\n<span class="line"><span class="token keyword">@function</span> <span class="token function">shift-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@return</span> <span class="token function">if</span><span class="token punctuation">(</span><span class="token variable">$weight</span> <span class="token operator">&gt;</span> 0<span class="token punctuation">,</span> <span class="token function">shade-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">tint-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> -<span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In practice, you&#39;d call the function and pass in the color and weight parameters.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">tint-color</span><span class="token punctuation">(</span><span class="token variable">$primary</span><span class="token punctuation">,</span> 10%<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.custom-element-2 </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">shade-color</span><span class="token punctuation">(</span><span class="token variable">$danger</span><span class="token punctuation">,</span> 30%<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="color-contrast" tabindex="-1">Color contrast <a class="anchor-link" href="#color-contrast" aria-hidden="true">#</a></h3><p>In order to meet the <a href="https://www.w3.org/TR/WCAG/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines (WCAG)</a> contrast requirements, authors <strong>must</strong> provide a minimum <a href="https://www.w3.org/TR/WCAG/#contrast-minimum" target="_blank" rel="noopener noreferrer">text color contrast of 4.5:1</a> and a minimum <a href="https://www.w3.org/TR/WCAG/#non-text-contrast" target="_blank" rel="noopener noreferrer">non-text color contrast of 3:1</a>, with very few exceptions.</p><p>An additional function we include in CoreUI for Bootstrap is the color contrast function, <code>color-contrast</code>. It utilizes the <a href="https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests" target="_blank" rel="noopener noreferrer">WCAG 2.0 algorithm</a> for calculating contrast thresholds based on <a href="https://www.w3.org/WAI/GL/wiki/Relative_luminance" target="_blank" rel="noopener noreferrer">relative luminance</a> in a <code>sRGB</code> colorspace to automatically return a light (<code>#fff</code>), dark (<code>#212529</code>) or black (<code>#000</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you&#39;re generating multiple classes.</p><p>For example, to generate color swatches from our <code>$theme-colors</code> map:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$color</span>, <span class="token variable">$value</span> in <span class="token variable">$theme-colors</span> </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token selector">.swatch-<span class="token variable">#{$color}</span> </span><span class="token punctuation">{</span></span>\n<span class="line">    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color-contrast</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>It can also be used for one-off contrast needs:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color-contrast</span><span class="token punctuation">(</span>#000<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns `color: #fff`</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also specify a base color with our color map functions:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color-contrast</span><span class="token punctuation">(</span><span class="token variable">$dark</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns `color: #fff`</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="escape-svg" tabindex="-1">Escape SVG <a class="anchor-link" href="#escape-svg" aria-hidden="true">#</a></h3><p>We use the <code>escape-svg</code> function to escape the <code>&lt;</code>, <code>&gt;</code> and <code>#</code> characters for SVG background images. When using the <code>escape-svg</code> function, data URIs must be quoted.</p><h3 id="add-and-subtract-functions" tabindex="-1">Add and Subtract functions <a class="anchor-link" href="#add-and-subtract-functions" aria-hidden="true">#</a></h3><p>We use the <code>add</code> and <code>subtract</code> functions to wrap the CSS <code>calc</code> function. The primary purpose of these functions is to avoid errors when a &quot;unitless&quot; <code>0</code> value is passed into a <code>calc</code> expression. Expressions like <code>calc(10px - 0)</code> will return an error in all browsers, despite being mathematically correct.</p><p>Example where the calc is valid:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$border-radius</span></span><span class="token punctuation">:</span> .25rem<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$border-width</span></span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output calc(.25rem - 1px) is valid</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span> <span class="token operator">-</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output the same calc(.25rem - 1px) as above</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">subtract</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span><span class="token punctuation">,</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Example where the calc is invalid:</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$border-radius</span></span><span class="token punctuation">:</span> .25rem<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$border-width</span></span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output calc(.25rem - 0) is invalid</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span> <span class="token operator">-</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output .25rem</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">subtract</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span><span class="token punctuation">,</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="mixins" tabindex="-1">Mixins <a class="anchor-link" href="#mixins" aria-hidden="true">#</a></h2><p>Our <code>@coreui/coreui/scss/mixins/</code> directory has a ton of mixins that power parts of CoreUI and can also be used across your own project.</p><h3 id="color-schemes" tabindex="-1">Color schemes <a class="anchor-link" href="#color-schemes" aria-hidden="true">#</a></h3><p>A shorthand mixin for the <code>prefers-color-scheme</code> media query is available with support for <code>light</code>, <code>dark</code>, and custom color schemes.</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@mixin</span> <span class="token function">color-scheme</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> <span class="token variable">#{$name}</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">@content</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@include</span> <span class="token function">color-scheme</span><span class="token punctuation">(</span>dark<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token comment">// Insert dark mode styles here</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line">  <span class="token keyword">@include</span> <span class="token function">color-scheme</span><span class="token punctuation">(</span>custom-named-scheme<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token comment">// Insert custom color scheme styles here</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 66);
+const _hoisted_67 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_67);
+}
+const sass_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "sass.html.vue"]]);
+const data = JSON.parse('{"path":"/customize/sass.html","title":"Sass","lang":"en-US","frontmatter":{"title":"Sass","name":"Sass","description":"Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.","menu":"customize","route":"/customize/sass","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/customize/sass.html"}]]},"headers":[{"level":2,"title":"File structure","slug":"file-structure","link":"#file-structure","children":[]},{"level":2,"title":"Importing","slug":"importing","link":"#importing","children":[]},{"level":2,"title":"Variable defaults","slug":"variable-defaults","link":"#variable-defaults","children":[]},{"level":2,"title":"Maps and loops","slug":"maps-and-loops","link":"#maps-and-loops","children":[{"level":3,"title":"Modify map","slug":"modify-map","link":"#modify-map","children":[]},{"level":3,"title":"Add to map","slug":"add-to-map","link":"#add-to-map","children":[]},{"level":3,"title":"Remove from map","slug":"remove-from-map","link":"#remove-from-map","children":[]}]},{"level":2,"title":"Required keys","slug":"required-keys","link":"#required-keys","children":[]},{"level":2,"title":"Functions","slug":"functions","link":"#functions","children":[{"level":3,"title":"Colors","slug":"colors","link":"#colors","children":[]},{"level":3,"title":"Color contrast","slug":"color-contrast","link":"#color-contrast","children":[]},{"level":3,"title":"Escape SVG","slug":"escape-svg","link":"#escape-svg","children":[]},{"level":3,"title":"Add and Subtract functions","slug":"add-and-subtract-functions","link":"#add-and-subtract-functions","children":[]}]},{"level":2,"title":"Mixins","slug":"mixins","link":"#mixins","children":[{"level":3,"title":"Color schemes","slug":"color-schemes","link":"#color-schemes","children":[]}]}],"filePathRelative":"customize/sass.md"}');
+export {
+  sass_html as comp,
+  data
+};
diff --git a/vue/docs/assets/sass.html-Db-hwC3H.js b/vue/docs/assets/sass.html-Db-hwC3H.js
deleted file mode 100644
index 1e35eb06cfa..00000000000
--- a/vue/docs/assets/sass.html-Db-hwC3H.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p><h2 id="file-structure" tabindex="-1">File structure <a class="anchor-link" href="#file-structure" aria-hidden="true">#</a></h2><p>Whenever possible, avoid modifying CoreUI&#39;s core files. For Sass, that means creating your own stylesheet that imports CoreUI for Bootstrap so you can modify and extend it. Assuming you&#39;re using a package manager like npm, you&#39;ll have a file structure that looks like this:</p><div class="language-text line-numbers-mode" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── scss</span>\n<span class="line">│   └── custom.scss</span>\n<span class="line">└── node_modules/</span>\n<span class="line">    └── @coreui/coreui</span>\n<span class="line">        ├── js</span>\n<span class="line">        └── scss</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you&#39;ve downloaded our source files and aren&#39;t using a package manager, you&#39;ll want to manually create something similar to that structure, keeping CoreUI&#39;s source files separate from your own.</p><div class="language-text line-numbers-mode" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">your-project/</span>\n<span class="line">├── scss</span>\n<span class="line">│   └── custom.scss</span>\n<span class="line">└── @coreui/coreui/</span>\n<span class="line">    ├── js</span>\n<span class="line">    └── scss</span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="importing" tabindex="-1">Importing <a class="anchor-link" href="#importing" aria-hidden="true">#</a></h2><p>In your <code>custom.scss</code>, you&#39;ll import CoreUI&#39;s source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Custom.scss</span></span>\n<span class="line"><span class="token comment">// Option A: Include all of CoreUI</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/coreui&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Then add additional custom code here</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Custom.scss</span></span>\n<span class="line"><span class="token comment">// Option B: Include parts of CoreUI</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/functions&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 2. Include any default variable overrides here</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 3. Include remainder of required CoreUI stylesheets</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/variables&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 4. Include any default map overrides here</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 5. Include remainder of required parts</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/maps&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/mixins&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/root&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 6. Optionally include any other parts as needed</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/utilities&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/reboot&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/type&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/images&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/containers&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/grid&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/helpers&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/utilities/api&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// 8. Add additional custom code here</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code>custom.scss</code>. You can also start to add parts of CoreUI for Bootstrap under the <code>// Optional</code> section as needed. We suggest using the full import stack from our <code>coreui.scss</code> file as your starting point.</p><h2 id="variable-defaults" tabindex="-1">Variable defaults <a class="anchor-link" href="#variable-defaults" aria-hidden="true">#</a></h2><p>Every Sass variable in CoreUI for Bootstrap includes the <code>!default</code> flag allowing you to override the variable&#39;s default value in your own Sass without modifying CoreUI&#39;s source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won&#39;t be re-assigned by the default values in Bootstrap.</p><p>You will find the complete list of CoreUI&#39;s variables in <code>@coreui/coreui/scss/_variables.scss</code>. Some variables are set to <code>null</code>, these variables don&#39;t output the property unless they are overridden in your configuration.</p><p>Variable overrides must come after our functions are imported, but before the rest of the imports.</p><p>Here&#39;s an example that changes the <code>background-color</code> and <code>color</code> for the <code>&lt;body&gt;</code> when importing and compiling CoreUI for Bootstrap via npm:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Required</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/functions&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Default variable overrides</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-bg</span></span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$body-color</span></span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Required</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/variables&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/maps&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/mixins&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/root&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Optional CoreUI components here</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/reboot&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/type&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token comment">// etc</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Repeat as necessary for any variable in CoreUI, including the global options below.</p><h2 id="maps-and-loops" tabindex="-1">Maps and loops <a class="anchor-link" href="#maps-and-loops" aria-hidden="true">#</a></h2><p>CoreUI for Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the <code>!default</code> flag and can be overridden and extended.</p><p>Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making <em>removing</em> items from a map slightly more difficult.</p><h3 id="modify-map" tabindex="-1">Modify map <a class="anchor-link" href="#modify-map" aria-hidden="true">#</a></h3><p>All variables in the <code>$theme-colors</code> map are defined as standalone variables. To modify an existing color in our <code>$theme-colors</code> map, add the following to your custom Sass file:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$primary</span></span><span class="token punctuation">:</span> #0074d9<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$danger</span></span><span class="token punctuation">:</span> #ff4136<span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>Later on, these variables are set in CoreUI&#39;s <code>$theme-colors</code> map:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span></span>\n<span class="line">  <span class="token string">&quot;primary&quot;</span><span class="token punctuation">:</span> <span class="token variable">$primary</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string">&quot;danger&quot;</span><span class="token punctuation">:</span> <span class="token variable">$danger</span></span>\n<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="add-to-map" tabindex="-1">Add to map <a class="anchor-link" href="#add-to-map" aria-hidden="true">#</a></h3><p>Add new colors to <code>$theme-colors</code>, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we&#39;ll create a new <code>$custom-colors</code> map and merge it with <code>$theme-colors</code>.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Create your own map</span></span>\n<span class="line"><span class="token property"><span class="token variable">$custom-colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span></span>\n<span class="line">  <span class="token string">&quot;custom-color&quot;</span><span class="token punctuation">:</span> #900</span>\n<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Merge the maps</span></span>\n<span class="line"><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token function">map-merge</span><span class="token punctuation">(</span><span class="token variable">$theme-colors</span><span class="token punctuation">,</span> <span class="token variable">$custom-colors</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="remove-from-map" tabindex="-1">Remove from map <a class="anchor-link" href="#remove-from-map" aria-hidden="true">#</a></h3><p>To remove colors from <code>$theme-colors</code>, or any other map, use <code>map-remove</code>. Be aware you must insert it between our requirements and options:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Required</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/functions&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/variables&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/maps&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/mixins&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/root&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token function">map-remove</span><span class="token punctuation">(</span><span class="token variable">$theme-colors</span><span class="token punctuation">,</span> <span class="token string">&quot;info&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;light&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;dark&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Optional</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/reboot&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token keyword">@import</span> <span class="token string">&quot;../node_modules/@coreui/coreui/scss/type&quot;</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token comment">// etc</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="required-keys" tabindex="-1">Required keys <a class="anchor-link" href="#required-keys" aria-hidden="true">#</a></h2><p>CoreUI for Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map&#39;s key is being used.</p><p>For example, we use the <code>primary</code>, <code>success</code>, and <code>danger</code> keys from <code>$theme-colors</code> for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you&#39;ll need to modify the Sass code that makes use of those values.</p><h2 id="functions" tabindex="-1">Functions <a class="anchor-link" href="#functions" aria-hidden="true">#</a></h2><h3 id="colors" tabindex="-1">Colors <a class="anchor-link" href="#colors" aria-hidden="true">#</a></h3><p>Next to the <a href="https://coreui.io/docs/customize/color#color-sass-maps%22" target="_blank" rel="noopener noreferrer">Sass maps</a> we have, theme colors can also be used as standalone variables, like <code>$primary</code>.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$gray-100</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$dark</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can lighten or darken colors with CoreUI&#39;s <code>tint-color()</code> and <code>shade-color()</code> functions. These functions will mix colors with black or white, unlike Sass&#39; native <code>lighten()</code> and <code>darken()</code> functions which will change the lightness by a fixed amount, which often doesn&#39;t lead to the desired effect.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">// Tint a color: mix a color with white</span></span>\n<span class="line"><span class="token keyword">@function</span> <span class="token function">tint-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@return</span> <span class="token function">mix</span><span class="token punctuation">(</span>white<span class="token punctuation">,</span> <span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Shade a color: mix a color with black</span></span>\n<span class="line"><span class="token keyword">@function</span> <span class="token function">shade-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@return</span> <span class="token function">mix</span><span class="token punctuation">(</span>black<span class="token punctuation">,</span> <span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token comment">// Shade the color if the weight is positive, else tint it</span></span>\n<span class="line"><span class="token keyword">@function</span> <span class="token function">shift-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@return</span> <span class="token function">if</span><span class="token punctuation">(</span><span class="token variable">$weight</span> <span class="token operator">&gt;</span> 0<span class="token punctuation">,</span> <span class="token function">shade-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">tint-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> -<span class="token variable">$weight</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In practice, you&#39;d call the function and pass in the color and weight parameters.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">tint-color</span><span class="token punctuation">(</span><span class="token variable">$primary</span><span class="token punctuation">,</span> 10%<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.custom-element-2 </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">shade-color</span><span class="token punctuation">(</span><span class="token variable">$danger</span><span class="token punctuation">,</span> 30%<span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="color-contrast" tabindex="-1">Color contrast <a class="anchor-link" href="#color-contrast" aria-hidden="true">#</a></h3><p>In order to meet the <a href="https://www.w3.org/TR/WCAG/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines (WCAG)</a> contrast requirements, authors <strong>must</strong> provide a minimum <a href="https://www.w3.org/TR/WCAG/#contrast-minimum" target="_blank" rel="noopener noreferrer">text color contrast of 4.5:1</a> and a minimum <a href="https://www.w3.org/TR/WCAG/#non-text-contrast" target="_blank" rel="noopener noreferrer">non-text color contrast of 3:1</a>, with very few exceptions.</p><p>An additional function we include in CoreUI for Bootstrap is the color contrast function, <code>color-contrast</code>. It utilizes the <a href="https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests" target="_blank" rel="noopener noreferrer">WCAG 2.0 algorithm</a> for calculating contrast thresholds based on <a href="https://www.w3.org/WAI/GL/wiki/Relative_luminance" target="_blank" rel="noopener noreferrer">relative luminance</a> in a <code>sRGB</code> colorspace to automatically return a light (<code>#fff</code>), dark (<code>#212529</code>) or black (<code>#000</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you&#39;re generating multiple classes.</p><p>For example, to generate color swatches from our <code>$theme-colors</code> map:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$color</span>, <span class="token variable">$value</span> in <span class="token variable">$theme-colors</span> </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token selector">.swatch-<span class="token variable">#{$color}</span> </span><span class="token punctuation">{</span></span>\n<span class="line">    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color-contrast</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>It can also be used for one-off contrast needs:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color-contrast</span><span class="token punctuation">(</span>#000<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns `color: #fff`</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also specify a base color with our color map functions:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color-contrast</span><span class="token punctuation">(</span><span class="token variable">$dark</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns `color: #fff`</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="escape-svg" tabindex="-1">Escape SVG <a class="anchor-link" href="#escape-svg" aria-hidden="true">#</a></h3><p>We use the <code>escape-svg</code> function to escape the <code>&lt;</code>, <code>&gt;</code> and <code>#</code> characters for SVG background images. When using the <code>escape-svg</code> function, data URIs must be quoted.</p><h3 id="add-and-subtract-functions" tabindex="-1">Add and Subtract functions <a class="anchor-link" href="#add-and-subtract-functions" aria-hidden="true">#</a></h3><p>We use the <code>add</code> and <code>subtract</code> functions to wrap the CSS <code>calc</code> function. The primary purpose of these functions is to avoid errors when a &quot;unitless&quot; <code>0</code> value is passed into a <code>calc</code> expression. Expressions like <code>calc(10px - 0)</code> will return an error in all browsers, despite being mathematically correct.</p><p>Example where the calc is valid:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$border-radius</span></span><span class="token punctuation">:</span> .25rem<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$border-width</span></span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output calc(.25rem - 1px) is valid</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span> <span class="token operator">-</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output the same calc(.25rem - 1px) as above</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">subtract</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span><span class="token punctuation">,</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Example where the calc is invalid:</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token property"><span class="token variable">$border-radius</span></span><span class="token punctuation">:</span> .25rem<span class="token punctuation">;</span></span>\n<span class="line"><span class="token property"><span class="token variable">$border-width</span></span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output calc(.25rem - 0) is invalid</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span> <span class="token operator">-</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line"><span class="token selector">.element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token comment">// Output .25rem</span></span>\n<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">subtract</span><span class="token punctuation">(</span><span class="token variable">$border-radius</span><span class="token punctuation">,</span> <span class="token variable">$border-width</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="mixins" tabindex="-1">Mixins <a class="anchor-link" href="#mixins" aria-hidden="true">#</a></h2><p>Our <code>@coreui/coreui/scss/mixins/</code> directory has a ton of mixins that power parts of CoreUI and can also be used across your own project.</p><h3 id="color-schemes" tabindex="-1">Color schemes <a class="anchor-link" href="#color-schemes" aria-hidden="true">#</a></h3><p>A shorthand mixin for the <code>prefers-color-scheme</code> media query is available with support for <code>light</code>, <code>dark</code>, and custom color schemes.</p><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token keyword">@mixin</span> <span class="token function">color-scheme</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> <span class="token variable">#{$name}</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">@content</span><span class="token punctuation">;</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-scss line-numbers-mode" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.custom-element </span><span class="token punctuation">{</span></span>\n<span class="line">  <span class="token keyword">@include</span> <span class="token function">color-scheme</span><span class="token punctuation">(</span>dark<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token comment">// Insert dark mode styles here</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span>\n<span class="line">  <span class="token keyword">@include</span> <span class="token function">color-scheme</span><span class="token punctuation">(</span>custom-named-scheme<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token comment">// Insert custom color scheme styles here</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 66);
-const _hoisted_67 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_67);
-}
-const sass_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "sass.html.vue"]]);
-const data = JSON.parse('{"path":"/customize/sass.html","title":"Sass","lang":"en-US","frontmatter":{"title":"Sass","name":"Sass","description":"Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.","menu":"customize","route":"/customize/sass","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/customize/sass.html"}]]},"headers":[{"level":2,"title":"File structure","slug":"file-structure","link":"#file-structure","children":[]},{"level":2,"title":"Importing","slug":"importing","link":"#importing","children":[]},{"level":2,"title":"Variable defaults","slug":"variable-defaults","link":"#variable-defaults","children":[]},{"level":2,"title":"Maps and loops","slug":"maps-and-loops","link":"#maps-and-loops","children":[{"level":3,"title":"Modify map","slug":"modify-map","link":"#modify-map","children":[]},{"level":3,"title":"Add to map","slug":"add-to-map","link":"#add-to-map","children":[]},{"level":3,"title":"Remove from map","slug":"remove-from-map","link":"#remove-from-map","children":[]}]},{"level":2,"title":"Required keys","slug":"required-keys","link":"#required-keys","children":[]},{"level":2,"title":"Functions","slug":"functions","link":"#functions","children":[{"level":3,"title":"Colors","slug":"colors","link":"#colors","children":[]},{"level":3,"title":"Color contrast","slug":"color-contrast","link":"#color-contrast","children":[]},{"level":3,"title":"Escape SVG","slug":"escape-svg","link":"#escape-svg","children":[]},{"level":3,"title":"Add and Subtract functions","slug":"add-and-subtract-functions","link":"#add-and-subtract-functions","children":[]}]},{"level":2,"title":"Mixins","slug":"mixins","link":"#mixins","children":[{"level":3,"title":"Color schemes","slug":"color-schemes","link":"#color-schemes","children":[]}]}],"filePathRelative":"customize/sass.md"}');
-export {
-  sass_html as comp,
-  data
-};
diff --git a/vue/docs/assets/select.html-CBbgzaWB.js b/vue/docs/assets/select.html-CGOG4_GI.js
similarity index 50%
rename from vue/docs/assets/select.html-CBbgzaWB.js
rename to vue/docs/assets/select.html-CGOG4_GI.js
index 0562f7a99e8..e250003fd19 100644
--- a/vue/docs/assets/select.html-CBbgzaWB.js
+++ b/vue/docs/assets/select.html-CGOG4_GI.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "default",
@@ -12,7 +12,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   }, "#")
 ], -1);
 const _hoisted_2 = { class: "docs-example rounded-top p-4" };
-const _hoisted_3 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">  <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[</span>\n<span class="line">    &#39;Open this select menu&#39;,</span>\n<span class="line">    { label: &#39;One&#39;, value: &#39;1&#39; },</span>\n<span class="line">    { label: &#39;Two&#39;, value: &#39;2&#39; },</span>\n<span class="line">    { label: &#39;Three&#39;, value: &#39;3&#39;, disabled: true }</span>\n<span class="line">  ]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">// You can also add options manually</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>You may also choose from small and large custom selects to match our similarly sized text inputs.</p>', 3);
+const _hoisted_3 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">  <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[</span>\n<span class="line">    &#39;Open this select menu&#39;,</span>\n<span class="line">    { label: &#39;One&#39;, value: &#39;1&#39; },</span>\n<span class="line">    { label: &#39;Two&#39;, value: &#39;2&#39; },</span>\n<span class="line">    { label: &#39;Three&#39;, value: &#39;3&#39;, disabled: true }</span>\n<span class="line">  ]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">// You can also add options manually</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>You may also choose from small and large custom selects to match our similarly sized text inputs.</p>', 3);
 const _hoisted_6 = { class: "docs-example rounded-top p-4" };
 const _hoisted_7 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
 const _hoisted_8 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
@@ -22,26 +22,26 @@ const _hoisted_11 = /* @__PURE__ */ createBaseVNode("option", null, "Open this s
 const _hoisted_12 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_13 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_14 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The <code>multiple</code> attribute is also supported:</p>', 2);
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Small select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The <code>multiple</code> attribute is also supported:</p>', 2);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
 const _hoisted_18 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
 const _hoisted_19 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_20 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_21 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Multiple select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>As is the <code>html-size</code> property:</p>', 2);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Multiple select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>As is the <code>html-size</code> property:</p>', 2);
 const _hoisted_24 = { class: "docs-example rounded-top p-4" };
 const _hoisted_25 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
 const _hoisted_26 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_27 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_28 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">:html-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>size 3 select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on a select to give it a grayed out appearance and remove pointer events.</p>', 3);
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">:html-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>size 3 select example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on a select to give it a grayed out appearance and remove pointer events.</p>', 3);
 const _hoisted_32 = { class: "docs-example rounded-top p-4" };
 const _hoisted_33 = /* @__PURE__ */ createBaseVNode("option", null, "Open this select menu", -1);
 const _hoisted_34 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
 const _hoisted_35 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
 const _hoisted_36 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled select example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformselect" tabindex="-1">CFormSelect <a class="anchor-link" href="#cformselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>html-size</strong></td><td>Specifies the number of visible options in a drop-down list.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>Options list of the select component. Available keys: <code>label</code>, <code>value</code>, <code>disabled</code>.<br>Examples:<br>- <code>:options=&quot;[{ value: &#39;js&#39;, label: &#39;JavaScript&#39; }, { value: &#39;html&#39;, label: &#39;HTML&#39;, disabled: true }]&quot;</code><br>- <code>:options=&quot;[&#39;js&#39;, &#39;html&#39;]&quot;</code></td><td>Option[] | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when when a user changes the selected option of a <code>&lt;select&gt;</code> element.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled select example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>Open this select menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformselect" tabindex="-1">CFormSelect <a class="anchor-link" href="#cformselect" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSelect <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSelect&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>html-size</strong></td><td>Specifies the number of visible options in a drop-down list.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>options</strong></td><td>Options list of the select component. Available keys: <code>label</code>, <code>value</code>, <code>disabled</code>.<br>Examples:<br>- <code>:options=&quot;[{ value: &#39;js&#39;, label: &#39;JavaScript&#39; }, { value: &#39;html&#39;, label: &#39;HTML&#39;, disabled: true }]&quot;</code><br>- <code>:options=&quot;[&#39;js&#39;, &#39;html&#39;]&quot;</code></td><td>Option[] | string[]</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39; | &#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when when a user changes the selected option of a <code>&lt;select&gt;</code> element.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormSelect = resolveComponent("CFormSelect");
   const _component_ScssDocs = resolveComponent("ScssDocs");
diff --git a/vue/docs/assets/setupDevtools-H6KAGBNI-orMN-CkE.js b/vue/docs/assets/setupDevtools-HHDGOOYC-BQImv-dR.js
similarity index 92%
rename from vue/docs/assets/setupDevtools-H6KAGBNI-orMN-CkE.js
rename to vue/docs/assets/setupDevtools-HHDGOOYC-BQImv-dR.js
index 28dd866c329..e1ff5125a34 100644
--- a/vue/docs/assets/setupDevtools-H6KAGBNI-orMN-CkE.js
+++ b/vue/docs/assets/setupDevtools-HHDGOOYC-BQImv-dR.js
@@ -1,4 +1,4 @@
-import { s as setupDevtoolsPlugin, w as watch } from "./app-Dv803XR0.js";
+import { s as setupDevtoolsPlugin, w as watch } from "./app-BoHWg5jI.js";
 var PLUGIN_ID = "org.vuejs.vuepress";
 var PLUGIN_LABEL = "VuePress";
 var PLUGIN_COMPONENT_STATE_TYPE = PLUGIN_LABEL;
@@ -38,8 +38,7 @@ var setupDevtools = (app, clientData) => {
         icon: "article"
       });
       api.on.getInspectorTree((payload) => {
-        if (payload.inspectorId !== INSPECTOR_ID)
-          return;
+        if (payload.inspectorId !== INSPECTOR_ID) return;
         payload.rootNodes = [
           {
             id: INSPECTOR_CLIENT_DATA_ID,
@@ -52,8 +51,7 @@ var setupDevtools = (app, clientData) => {
         ];
       });
       api.on.getInspectorState((payload) => {
-        if (payload.inspectorId !== INSPECTOR_ID)
-          return;
+        if (payload.inspectorId !== INSPECTOR_ID) return;
         if (payload.nodeId === INSPECTOR_CLIENT_DATA_ID) {
           payload.state = {
             [INSPECTOR_CLIENT_DATA_LABEL]: clientDataEntries.map(
diff --git a/vue/docs/assets/sidebar.html-DgW_6PYz.js b/vue/docs/assets/sidebar.html-CrmBFQhh.js
similarity index 61%
rename from vue/docs/assets/sidebar.html-DgW_6PYz.js
rename to vue/docs/assets/sidebar.html-CrmBFQhh.js
index f6bba837164..524ceeccc1c 100644
--- a/vue/docs/assets/sidebar.html-DgW_6PYz.js
+++ b/vue/docs/assets/sidebar.html-CrmBFQhh.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="supported-content" tabindex="-1">Supported content <a class="anchor-link" href="#supported-content" aria-hidden="true">#</a></h2><p>Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:</p><ul><li><code>&lt;CSidebarHeader&gt;</code> for optional header.</li><li><code>&lt;CSidebarBrand&gt;</code> for your company, product, or project name.</li><li><code>&lt;CSidebarNav&gt;</code> for a full-height and lightweight navigation (including support for dropdowns).</li><li><code>&lt;CSidebarFooter&gt;</code> for optional footer.</li><li><code>&lt;CSidebarToggler&gt;</code> for use with our minimizer plugin.</li></ul><h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples" aria-hidden="true">#</a></h2><h3 id="sidebar-component" tabindex="-1">Sidebar component <a class="anchor-link" href="#sidebar-component" aria-hidden="true">#</a></h3><p>Below is an sidebar example that is shown by default on desktop devices.</p>', 6);
 const _hoisted_7 = { class: "docs-example rounded-top p-0 bg-body-secondary overflow-hidden" };
@@ -14,9 +14,9 @@ const _hoisted_10 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon"
 const _hoisted_11 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon" }, [
   /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon-bullet" })
 ], -1);
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav item</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> With badge</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>NEW<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown2</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Download CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Try CoreUI PRO</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarFooter</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarToggler</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="narrow-sidebar" tabindex="-1">Narrow sidebar <a class="anchor-link" href="#narrow-sidebar" aria-hidden="true">#</a></h3><p>Add the <code>narrow</code> property to make the sidebar narrow.</p>', 3);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav item</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> With badge</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>NEW<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown2</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Download CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Try CoreUI PRO</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarFooter</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarToggler</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="narrow-sidebar" tabindex="-1">Narrow sidebar <a class="anchor-link" href="#narrow-sidebar" aria-hidden="true">#</a></h3><p>Add the <code>narrow</code> property to make the sidebar narrow.</p>', 3);
 const _hoisted_15 = { class: "docs-example rounded-top p-0 bg-body-secondary overflow-hidden" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span> <span class="token attr-name">narrow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="unfoldable-sidebar" tabindex="-1">Unfoldable sidebar <a class="anchor-link" href="#unfoldable-sidebar" aria-hidden="true">#</a></h3><p>Add the <code>unfoldable</code> property to make the sidebar narrow with unfoldable on hover.</p>', 3);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span> <span class="token attr-name">narrow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="unfoldable-sidebar" tabindex="-1">Unfoldable sidebar <a class="anchor-link" href="#unfoldable-sidebar" aria-hidden="true">#</a></h3><p>Add the <code>unfoldable</code> property to make the sidebar narrow with unfoldable on hover.</p>', 3);
 const _hoisted_19 = { class: "docs-example rounded-top p-0 bg-body-secondary overflow-hidden" };
 const _hoisted_20 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon" }, [
   /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon-bullet" })
@@ -30,7 +30,7 @@ const _hoisted_22 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon"
 const _hoisted_23 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon" }, [
   /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon-bullet" })
 ], -1);
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span> <span class="token attr-name">unfoldable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav item</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> With badge</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>NEW<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown2</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Download CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Try CoreUI PRO</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-sidebar" tabindex="-1">Dark sidebar <a class="anchor-link" href="#dark-sidebar" aria-hidden="true">#</a></h2><p>Change the appearance of sidebars with the <code>colorScheme=&quot;dark&quot;</code>.</p>', 3);
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span> <span class="token attr-name">unfoldable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav item</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> With badge</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>NEW<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown2</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Download CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Try CoreUI PRO</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dark-sidebar" tabindex="-1">Dark sidebar <a class="anchor-link" href="#dark-sidebar" aria-hidden="true">#</a></h2><p>Change the appearance of sidebars with the <code>colorScheme=&quot;dark&quot;</code>.</p>', 3);
 const _hoisted_27 = { class: "docs-example rounded-top p-0 bg-body-secondary overflow-hidden" };
 const _hoisted_28 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon" }, [
   /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon-bullet" })
@@ -44,9 +44,9 @@ const _hoisted_30 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon"
 const _hoisted_31 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon" }, [
   /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon-bullet" })
 ], -1);
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav item</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> With badge</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>NEW<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown2</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Download CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Try CoreUI PRO</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarFooter</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarToggler</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="placement" tabindex="-1">Placement <a class="anchor-link" href="#placement" aria-hidden="true">#</a></h2><p>By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.</p><ul><li><code>placement=&quot;start&quot;</code> places sidebar on the left of the viewport (shown above)</li><li><code>placement=&quot;end&quot;</code> places sidebar on the right of the viewport</li></ul><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue sidebars use local CSS variables on <code>.sidebar</code> and <code>.sidebar-backdrop</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 7);
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CSidebar <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CSidebar<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>light&#39;</code></td><td>-</td></tr><tr><td><strong>narrow</strong></td><td>Make sidebar narrow.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>overlaid</strong></td><td>Set sidebar to overlaid variant.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place sidebar in non-static positions.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>unfoldable</strong></td><td>Expand narrowed sidebar on hover.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of sidebar component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>visible-change</strong></td><td>Event emitted after visibility of component changed.</td><td></td></tr></tbody></table>', 7);
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebar</span> <span class="token attr-name">colorScheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarHeader</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span>CoreUI<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarBrand</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavTitle</span><span class="token punctuation">&gt;</span></span>Nav Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavTitle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav item</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-speedometer<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> With badge</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>NEW<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#togglerContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span>  <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-puzzle<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> Nav dropdown2</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon-bullet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> Nav dropdown item</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-cloud-download<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Download CoreUI</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CNavItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/pro/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">customClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-layers<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> Try CoreUI PRO</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CNavItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarNav</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarFooter</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSidebarToggler</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebarFooter</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSidebar</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="placement" tabindex="-1">Placement <a class="anchor-link" href="#placement" aria-hidden="true">#</a></h2><p>By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.</p><ul><li><code>placement=&quot;start&quot;</code> places sidebar on the left of the viewport (shown above)</li><li><code>placement=&quot;end&quot;</code> places sidebar on the right of the viewport</li></ul><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue sidebars use local CSS variables on <code>.sidebar</code> and <code>.sidebar-backdrop</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 7);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CSidebar <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CSidebar<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSidebar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSidebar <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/sidebar/CSidebar&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color-scheme</strong></td><td>Sets if the color of text should be colored for a light or dark dark background.</td><td>string</td><td><code>&#39;dark&#39;</code>, <code>light&#39;</code></td><td>-</td></tr><tr><td><strong>narrow</strong></td><td>Make sidebar narrow.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>overlaid</strong></td><td>Set sidebar to overlaid variant.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>placement</strong></td><td>Components placement, there’s no default placement.</td><td>string</td><td><code>&#39;start&#39;</code>, <code>&#39;end&#39;</code></td><td>-</td></tr><tr><td><strong>position</strong></td><td>Place sidebar in non-static positions.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small, large, or extra large.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>unfoldable</strong></td><td>Expand narrowed sidebar on hover.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of sidebar component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>visible-change</strong></td><td>Event emitted after visibility of component changed.</td><td></td></tr></tbody></table>', 7);
 function _sfc_render(_ctx, _cache) {
   const _component_CSidebarBrand = resolveComponent("CSidebarBrand");
   const _component_CSidebarHeader = resolveComponent("CSidebarHeader");
diff --git a/vue/docs/assets/smart-pagination.html-nSMfcTcY.js b/vue/docs/assets/smart-pagination.html-CYqfH6pM.js
similarity index 53%
rename from vue/docs/assets/smart-pagination.html-nSMfcTcY.js
rename to vue/docs/assets/smart-pagination.html-CYqfH6pM.js
index 922e608a055..5fa8bd51664 100644
--- a/vue/docs/assets/smart-pagination.html-nSMfcTcY.js
+++ b/vue/docs/assets/smart-pagination.html-CYqfH6pM.js
@@ -1,16 +1,16 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>React smart pagination component consists of button-like styled links, that are arranged side by side in a horizontal list.</p><p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. SmartPagination is built with list HTML elements so screen readers can announce the number of available links. SmartPagination also use a wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to screen readers and other assistive technologies.</p><p>In addition, as pages likely have more than one such navigation section, SmartPagination provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label=&quot;Search results pages&quot;</code>.???</p>', 4);
 const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pages<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Fancy larger or smaller pagination? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
+const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pages<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Fancy larger or smaller pagination? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;sm&quot;</code> for additional sizes.</p>', 3);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="alignment" tabindex="-1">Alignment <a class="anchor-link" href="#alignment" aria-hidden="true">#</a></h2><p>Change the alignment of pagination components with <code>align=&quot;start&quot;</code>, <code>align=&quot;center&quot;</code> or <code>align=&quot;end&quot;</code>.</p>', 3);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="alignment" tabindex="-1">Alignment <a class="anchor-link" href="#alignment" aria-hidden="true">#</a></h2><p>Change the alignment of pagination components with <code>align=&quot;start&quot;</code>, <code>align=&quot;center&quot;</code> or <code>align=&quot;end&quot;</code>.</p>', 3);
 const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/pagination/CSmartPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Horizontall align<br><code>@default</code> &#39;start&#39;</td><td>string</td><td>-</td><td>&#39;start&#39;</td></tr><tr><td><strong>active-page</strong></td><td>Current page number<br><code>@default</code> 1</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>arrows</strong></td><td>Show/hide arrows<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>dots</strong></td><td>Show/hide dots<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>double-arrows</strong></td><td>Show double arrows buttons<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>first-button</strong></td><td>The content of &#39;firstButton&#39; button<br><code>@default</code> &#39;«&#39;</td><td>string</td><td>-</td><td>&#39;«&#39;</td></tr><tr><td><strong>last-button</strong></td><td>The content of &#39;lastButton&#39; button<br><code>@default</code> &#39;»&#39;</td><td>string</td><td>-</td><td>&#39;»&#39;</td></tr><tr><td><strong>limit</strong></td><td>Maximum items number<br><code>@default</code> 5</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>next-button</strong></td><td>The content of &#39;nextButton&#39; button<br><code>@default</code> &#39;›&#39;</td><td>string</td><td>-</td><td>&#39;›&#39;</td></tr><tr><td><strong>pages</strong></td><td>Number of pages</td><td>number</td><td>-</td><td>1000</td></tr><tr><td><strong>previous-button</strong></td><td>The content of &#39;previousButton&#39; button<br><code>@default</code> &#39;‹&#39;</td><td>string</td><td>-</td><td>&#39;‹&#39;</td></tr><tr><td><strong>size</strong></td><td>Size of pagination, valid values: &#39;sm&#39;, &#39;lg&#39;</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>On active page change callback.</td><td></td></tr></tbody></table>', 8);
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartPagination</span></span>\n<span class="line">  <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">:pages</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartPagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartPagination <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/pagination/CSmartPagination&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Horizontall align<br><code>@default</code> &#39;start&#39;</td><td>string</td><td>-</td><td>&#39;start&#39;</td></tr><tr><td><strong>active-page</strong></td><td>Current page number<br><code>@default</code> 1</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>arrows</strong></td><td>Show/hide arrows<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>dots</strong></td><td>Show/hide dots<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>double-arrows</strong></td><td>Show double arrows buttons<br><code>@default</code> true</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>first-button</strong></td><td>The content of &#39;firstButton&#39; button<br><code>@default</code> &#39;«&#39;</td><td>string</td><td>-</td><td>&#39;«&#39;</td></tr><tr><td><strong>last-button</strong></td><td>The content of &#39;lastButton&#39; button<br><code>@default</code> &#39;»&#39;</td><td>string</td><td>-</td><td>&#39;»&#39;</td></tr><tr><td><strong>limit</strong></td><td>Maximum items number<br><code>@default</code> 5</td><td>number</td><td>-</td><td>5</td></tr><tr><td><strong>next-button</strong></td><td>The content of &#39;nextButton&#39; button<br><code>@default</code> &#39;›&#39;</td><td>string</td><td>-</td><td>&#39;›&#39;</td></tr><tr><td><strong>pages</strong></td><td>Number of pages</td><td>number</td><td>-</td><td>1000</td></tr><tr><td><strong>previous-button</strong></td><td>The content of &#39;previousButton&#39; button<br><code>@default</code> &#39;‹&#39;</td><td>string</td><td>-</td><td>&#39;‹&#39;</td></tr><tr><td><strong>size</strong></td><td>Size of pagination, valid values: &#39;sm&#39;, &#39;lg&#39;</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>On active page change callback.</td><td></td></tr></tbody></table>', 8);
 function _sfc_render(_ctx, _cache) {
   const _component_CSmartPagination = resolveComponent("CSmartPagination");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/smart-table.html-CScdoI3i.js b/vue/docs/assets/smart-table.html-DMqyM7wC.js
similarity index 64%
rename from vue/docs/assets/smart-table.html-CScdoI3i.js
rename to vue/docs/assets/smart-table.html-DMqyM7wC.js
index a2395e43b9f..d6c66a7147c 100644
--- a/vue/docs/assets/smart-table.html-CScdoI3i.js
+++ b/vue/docs/assets/smart-table.html-DMqyM7wC.js
@@ -1,4 +1,4 @@
-import { a2 as defineComponent, a3 as h$1, g as ref, w as watch, a4 as cloneVNode, a5 as createPopper, k as onMounted, a6 as onUnmounted, a7 as onUpdated, a8 as nextTick, a9 as inject, aa as computed, ab as provide, ac as onBeforeUnmount, _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode, t as toDisplayString, F as Fragment, j as renderList } from "./app-Dv803XR0.js";
+import { a1 as defineComponent, a2 as h$1, g as ref, w as watch, a3 as cloneVNode, a4 as createPopper, k as onMounted, a5 as onUnmounted, a6 as onUpdated, a7 as nextTick, a8 as inject, a9 as computed, aa as provide, ab as onBeforeUnmount, _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode, t as toDisplayString, F as Fragment, j as renderList } from "./app-BoHWg5jI.js";
 const CCloseButton = defineComponent({
   name: "CCloseButton",
   props: {
@@ -205,8 +205,9 @@ const CButton = defineComponent({
     return () => h$1(component, {
       class: [
         "btn",
-        props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
         {
+          [`btn-${props.color}`]: props.color && !props.variant,
+          [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
           [`btn-${props.size}`]: props.size,
           active: props.active,
           disabled: props.disabled
@@ -1861,6 +1862,12 @@ const CTimePicker = defineComponent({
       type: [Array, Boolean, Function],
       default: true
     },
+    /**
+     * Set the name attribute for the input element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -2044,6 +2051,8 @@ const CTimePicker = defineComponent({
         autocomplete: "off",
         class: "time-picker-input",
         disabled: props.disabled,
+        id: props.id,
+        name: props.name,
         onInput: (event) => useDebouncedCallback(() => {
           if (isValidTime(event.target.value)) {
             date.value = convertTimeToDate(event.target.value);
@@ -2215,6 +2224,15 @@ const CTimePicker = defineComponent({
     });
   }
 });
+const getInputIdOrName = (attribute, range, position) => {
+  if (range && !Array.isArray(attribute)) {
+    return `${attribute}-${position}-date`;
+  }
+  if (Array.isArray(attribute)) {
+    return position === "start" ? attribute[0] : attribute[1];
+  }
+  return attribute;
+};
 const getLocalDateFromString = (string, locale, time) => {
   if (!Number.isNaN(Date.parse(string))) {
     return new Date(Date.parse(string));
@@ -2418,13 +2436,15 @@ const CDateRangePicker = defineComponent({
      */
     footer: Boolean,
     /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.
      *
-     * The name attributes for input elements are generated based on the `id` property:
-     * - {id}-start-date
-     * - {id}-end-date
+     * **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.:
+     * - \{id\}-start-date
+     * - \{id\}-end-date
      */
-    id: String,
+    id: {
+      type: [String, Array]
+    },
     /**
      * Toggle visibility or set the content of the input indicator.
      */
@@ -2487,6 +2507,20 @@ const CDateRangePicker = defineComponent({
      * Min selectable date.
      */
     minDate: [Date, String],
+    /**
+     * The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately.
+     *
+     * Example for single string: 'date-input'
+     * Result: 'date-input-start-date', 'date-input-end-date'
+     *
+     * Example for array: ['start-date-input', 'end-date-input']
+     * Result: 'start-date-input', 'end-date-input'
+     *
+     * @since 5.3.0
+     */
+    name: {
+      type: [String, Array]
+    },
     /**
      * Show arrows navigation.
      */
@@ -2860,7 +2894,10 @@ const CDateRangePicker = defineComponent({
           }
         ],
         disabled: props.disabled,
-        ...props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` },
+        ...props.id && { id: getInputIdOrName(props.id, props.range, "start") },
+        ...props.name && { name: getInputIdOrName(props.name, props.range, "start") },
+        ...props.id && !Array.isArray(props.id) && !props.name && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` },
+        // TODO: remove in v6
         onClick: () => {
           selectEndDate.value = false;
         },
@@ -2882,7 +2919,10 @@ const CDateRangePicker = defineComponent({
           }
         ],
         disabled: props.disabled,
-        ...props.id && { name: `${props.id}-end-date` },
+        ...props.id && { id: getInputIdOrName(props.id, props.range, "end") },
+        ...props.name && { name: getInputIdOrName(props.name, props.range, "end") },
+        ...props.id && !Array.isArray(props.id) && !props.name && { name: `${props.id}-end-date` },
+        // TODO: remove in v6
         onClick: () => {
           selectEndDate.value = true;
         },
@@ -2905,7 +2945,7 @@ const CDateRangePicker = defineComponent({
       feedback: props.feedback,
       feedbackInvalid: props.feedbackInvalid,
       feedbackValid: props.feedbackValid,
-      id: props.id,
+      ...props.id && !Array.isArray(props.id) && { id: props.id },
       invalid: isValid.value === false ? true : false,
       label: props.label,
       text: props.text,
@@ -2925,7 +2965,6 @@ const CDateRangePicker = defineComponent({
         disabled: props.disabled,
         dropdownClassNames: "date-picker-dropdown",
         footer: props.footer || props.timepicker,
-        id: props.id,
         onHide: () => {
           visible.value = false;
           emit("hide");
@@ -3318,6 +3357,7 @@ const CMultiSelectNativeSelect = defineComponent({
       type: Boolean,
       default: true
     },
+    name: String,
     options: {
       type: Array,
       default: () => []
@@ -3339,8 +3379,11 @@ const CMultiSelectNativeSelect = defineComponent({
     };
     return () => h$1("select", {
       className: "multi-select-new",
-      ...props.id && { id: `${props.id}-multi-select` },
-      ...props.id && { name: `${props.id}-multi-select` },
+      id: props.id,
+      ...props.id && !props.name && { name: `${props.id}-multi-select` },
+      // TODO: remove in v6
+      ...props.name && { name: props.name },
+      // TODO: change to `name: props.name` in v6
       multiple: props.multiple,
       tabIndex: "-1",
       style: { display: "none" },
@@ -3689,7 +3732,10 @@ const CMultiSelect = defineComponent({
      */
     feedbackValid: String,
     /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     * Set the id attribute for the native select element.
+     *
+     * **[Deprecated since v5.3.0]** The name attribute for the native select element is generated based on the `id` property:
+     * - `<select name="\{id\}-multi-select" />`
      */
     id: String,
     /**
@@ -3719,6 +3765,12 @@ const CMultiSelect = defineComponent({
       type: Boolean,
       default: true
     },
+    /**
+     * The name attribute for the select element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * List of option elements.
      */
@@ -3761,6 +3813,12 @@ const CMultiSelect = defineComponent({
      * When it is present, it indicates that the user must choose a value before submitting the form.
      */
     required: Boolean,
+    /**
+     * Determines whether the selected options should be cleared when the options list is updated. When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided.
+     *
+     * @since 5.3.0
+     */
+    resetSelectionOnOptionsChange: Boolean,
     /**
      * Enables search input element.
      */
@@ -3920,6 +3978,10 @@ const CMultiSelect = defineComponent({
     watch(() => props.options, (newValue, oldValue) => {
       if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
         options.value = newValue;
+        if (props.resetSelectionOnOptionsChange) {
+          selected.value = [];
+          return;
+        }
         const _selected = flattenedOptions.value.filter((option) => option.selected === true);
         const deselected = flattenedOptions.value.filter((option) => option.selected === false);
         if (_selected) {
@@ -4067,6 +4129,7 @@ const CMultiSelect = defineComponent({
       h$1(CMultiSelectNativeSelect, {
         id: props.id,
         multiple: props.multiple,
+        name: props.name,
         options: selected.value,
         required: props.required,
         value: props.multiple ? selected.value.map((option) => option.value.toString()) : selected.value.map((option) => option.value)[0],
@@ -4096,7 +4159,6 @@ const CMultiSelect = defineComponent({
             }
           ],
           "aria-expanded": visible.value,
-          id: props.id,
           ref: multiSelectRef
         }, {
           default: () => [
@@ -4435,14 +4497,11 @@ function isObject(o2) {
 }
 function isPlainObject(o2) {
   var ctor, prot;
-  if (isObject(o2) === false)
-    return false;
+  if (isObject(o2) === false) return false;
   ctor = o2.constructor;
-  if (ctor === void 0)
-    return true;
+  if (ctor === void 0) return true;
   prot = ctor.prototype;
-  if (isObject(prot) === false)
-    return false;
+  if (isObject(prot) === false) return false;
   if (prot.hasOwnProperty("isPrototypeOf") === false) {
     return false;
   }
@@ -4452,22 +4511,18 @@ function t() {
   return t = Object.assign ? Object.assign.bind() : function(e) {
     for (var t2 = 1; t2 < arguments.length; t2++) {
       var n2 = arguments[t2];
-      for (var r2 in n2)
-        Object.prototype.hasOwnProperty.call(n2, r2) && (e[r2] = n2[r2]);
+      for (var r2 in n2) Object.prototype.hasOwnProperty.call(n2, r2) && (e[r2] = n2[r2]);
     }
     return e;
   }, t.apply(this, arguments);
 }
 function n(e, t2) {
-  if (null == e)
-    return {};
+  if (null == e) return {};
   var n2 = {};
-  for (var r2 in e)
-    if (Object.prototype.hasOwnProperty.call(e, r2)) {
-      if (t2.indexOf(r2) >= 0)
-        continue;
-      n2[r2] = e[r2];
-    }
+  for (var r2 in e) if (Object.prototype.hasOwnProperty.call(e, r2)) {
+    if (t2.indexOf(r2) >= 0) continue;
+    n2[r2] = e[r2];
+  }
   return n2;
 }
 const r = { silent: false, logLevel: "warn" }, i = ["validator"], o = Object.prototype, a = o.toString, s = o.hasOwnProperty, u = /^\s*function (\w+)/;
@@ -4480,7 +4535,9 @@ function l(e) {
   }
   return "";
 }
-const c = isPlainObject, f = (e) => e;
+const c = isPlainObject;
+function f() {
+}
 let d = f;
 {
   const e = "undefined" != typeof console;
@@ -4501,13 +4558,10 @@ function m(e, t2, n2 = false) {
   r2 = c(e) ? e : { type: e };
   const a2 = b(r2) ? r2._vueTypes_name + " - " : "";
   if (g(r2) && null !== r2.type) {
-    if (void 0 === r2.type || true === r2.type)
-      return i2;
-    if (!r2.required && null == t2)
-      return i2;
+    if (void 0 === r2.type || true === r2.type) return i2;
+    if (!r2.required && null == t2) return i2;
     v(r2.type) ? (i2 = r2.type.some((e2) => true === m(e2, t2, true)), o2 = r2.type.map((e2) => l(e2)).join(" or ")) : (o2 = l(r2), i2 = "Array" === o2 ? v(t2) : "Object" === o2 ? c(t2) : "String" === o2 || "Number" === o2 || "Boolean" === o2 || "Function" === o2 ? function(e2) {
-      if (null == e2)
-        return "";
+      if (null == e2) return "";
       const t3 = e2.constructor.toString().match(u);
       return t3 ? t3[1].replace(/^Async/, "") : "";
     }(t2) === o2 : t2 instanceof r2.type);
@@ -4549,8 +4603,7 @@ function T(e, t2, r2) {
       t3[n2] = Object.getOwnPropertyDescriptor(e2, n2);
     }), Object.defineProperties({}, t3);
   }(t2);
-  if (o2._vueTypes_name = e, !c(r2))
-    return o2;
+  if (o2._vueTypes_name = e, !c(r2)) return o2;
   const { validator: a2 } = r2, s2 = n(r2, i);
   if (h(a2)) {
     let { validator: e2 } = o2;
@@ -4575,16 +4628,14 @@ const w = () => _("any", {}), x = () => _("function", { type: Function }), P = (
   return false === t2 && d("nullable - value should be null"), t2;
 } }, "_vueTypes_name", { value: "nullable" });
 function D(e, t2 = "custom validation failed") {
-  if ("function" != typeof e)
-    throw new TypeError("[VueTypes error]: You must provide a function as argument");
+  if ("function" != typeof e) throw new TypeError("[VueTypes error]: You must provide a function as argument");
   return j(e.name || "<<anonymous function>>", { type: null, validator(n2) {
     const r2 = e(n2);
     return r2 || d(`${this._vueTypes_name} - ${t2}`), r2;
   } });
 }
 function L(e) {
-  if (!v(e))
-    throw new TypeError("[VueTypes error]: You must provide an array as argument.");
+  if (!v(e)) throw new TypeError("[VueTypes error]: You must provide an array as argument.");
   const t2 = `oneOf - value should be one of "${e.map((e2) => "symbol" == typeof e2 ? e2.toString() : e2).join('", "')}".`, n2 = { validator(n3) {
     const r2 = -1 !== e.indexOf(n3);
     return r2 || d(t2), r2;
@@ -4602,8 +4653,7 @@ function L(e) {
   return j("oneOf", n2);
 }
 function B(e) {
-  if (!v(e))
-    throw new TypeError("[VueTypes error]: You must provide an array as argument");
+  if (!v(e)) throw new TypeError("[VueTypes error]: You must provide an array as argument");
   let t2 = false, n2 = false, r2 = [];
   for (let i3 = 0; i3 < e.length; i3 += 1) {
     const o2 = e[i3];
@@ -4621,8 +4671,7 @@ function B(e) {
         continue;
       }
       r2 = r2.concat(o2.type);
-    } else
-      r2.push(o2);
+    } else r2.push(o2);
   }
   r2 = r2.filter((e2, t3) => r2.indexOf(e2) === t3);
   const i2 = false === n2 && r2.length > 0 ? r2 : null;
@@ -4659,16 +4708,14 @@ function J(e) {
     var n3;
     return !(null === (n3 = e[t3]) || void 0 === n3 || !n3.required);
   }), r2 = j("shape", { type: Object, validator(r3) {
-    if (!c(r3))
-      return false;
+    if (!c(r3)) return false;
     const i2 = Object.keys(r3);
     if (n2.length > 0 && n2.some((e2) => -1 === i2.indexOf(e2))) {
       const e2 = n2.filter((e3) => -1 === i2.indexOf(e3));
       return d(1 === e2.length ? `shape - required property "${e2[0]}" is not defined.` : `shape - required properties "${e2.join('", "')}" are not defined.`), false;
     }
     return i2.every((n3) => {
-      if (-1 === t2.indexOf(n3))
-        return true === this._vueTypes_isLoose || (d(`shape - shape definition does not include a "${n3}" property. Allowed keys: "${t2.join('", "')}".`), false);
+      if (-1 === t2.indexOf(n3)) return true === this._vueTypes_isLoose || (d(`shape - shape definition does not include a "${n3}" property. Allowed keys: "${t2.join('", "')}".`), false);
       const i3 = m(e[n3], r3[n3], true);
       return "string" == typeof i3 && d(`shape - "${n3}" property validation error:
  ${$(i3)}`), true === i3;
@@ -4710,17 +4757,14 @@ const M = ["name", "validate", "getter"], R = /* @__PURE__ */ ((e) => ((e = clas
     return k();
   }
   static extend(e2) {
-    if (d("VueTypes.extend is deprecated. Use the ES6+ method instead. See https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#extending-namespaced-validators-in-es6 for details."), v(e2))
-      return e2.forEach((e3) => this.extend(e3)), this;
+    if (d("VueTypes.extend is deprecated. Use the ES6+ method instead. See https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#extending-namespaced-validators-in-es6 for details."), v(e2)) return e2.forEach((e3) => this.extend(e3)), this;
     const { name: t2, validate: r2 = false, getter: i2 = false } = e2, o2 = n(e2, M);
-    if (p(this, t2))
-      throw new TypeError(`[VueTypes error]: Type "${t2}" already defined`);
+    if (p(this, t2)) throw new TypeError(`[VueTypes error]: Type "${t2}" already defined`);
     const { type: a2 } = o2;
-    if (b(a2))
-      return delete o2.type, Object.defineProperty(this, t2, i2 ? { get: () => T(t2, a2, o2) } : { value(...e3) {
-        const n2 = T(t2, a2, o2);
-        return n2.validator && (n2.validator = n2.validator.bind(n2, ...e3)), n2;
-      } });
+    if (b(a2)) return delete o2.type, Object.defineProperty(this, t2, i2 ? { get: () => T(t2, a2, o2) } : { value(...e3) {
+      const n2 = T(t2, a2, o2);
+      return n2.validator && (n2.validator = n2.validator.bind(n2, ...e3)), n2;
+    } });
     let s2;
     return s2 = i2 ? { get() {
       const e3 = Object.assign({}, o2);
@@ -5578,21 +5622,21 @@ const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="features" tabindex
 const _hoisted_4 = { class: "docs-example rounded-top p-4" };
 const _hoisted_5 = { class: "py-2" };
 const _hoisted_6 = { class: "text-muted" };
-const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">clickableRows</span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      striped: true,</span>\n<span class="line">      hover: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">header</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">tableFilter</span></span>\n<span class="line">    <span class="token attr-name">cleaner</span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">:sorterValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ column: &#39;status&#39;, state: &#39;asc&#39; }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#avatar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{item}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$withBase(`/images/avatars/${item.avatar}`)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getBadge(item.status)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item.status }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#show_details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item, index }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span></span>\n<span class="line">          <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">square</span></span>\n<span class="line">          <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleDetails(item, index)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          {{ Boolean(item._toggled) ? &#39;Hide&#39; : &#39;Show&#39; }}</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>this.details.includes(item._id)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            {{ item.username }}</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-muted<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>User since: {{ item.registered }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> User Settings <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ml-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> Delete <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSmartTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;avatar&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">filter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">sorter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string">&#39;registered&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;role&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;status&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;show_details&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;1%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">filter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">sorter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">details</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;1.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;2.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;3.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;4.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;5.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;6.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;7.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;8.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;9.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;10.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;11.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;12.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;13.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;14.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;15.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">getBadge</span><span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">switch</span> <span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Active&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;success&#39;</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Inactive&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;secondary&#39;</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Pending&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;warning&#39;</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Banned&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;danger&#39;</span></span>\n<span class="line">        <span class="token keyword">default</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token string">&#39;primary&#39;</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token function">toggleDetails</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>details<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>_id<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>details <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>details<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> _item <span class="token operator">!==</span> item<span class="token punctuation">.</span>_id<span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">return</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">this</span><span class="token punctuation">.</span>details<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>_id<span class="token punctuation">)</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="column-names" tabindex="-1">Column names <a class="anchor-link" href="#column-names" aria-hidden="true">#</a></h2><p>By default, Vue Table component will generate the header labels for each column based on the column&#39;s data source.</p>', 3);
+const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">clickableRows</span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      striped: true,</span>\n<span class="line">      hover: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:activePage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">header</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">tableFilter</span></span>\n<span class="line">    <span class="token attr-name">cleaner</span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">:sorterValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ column: &#39;status&#39;, state: &#39;asc&#39; }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#avatar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{item}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CAvatar</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$withBase(`/images/avatars/${item.avatar}`)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CBadge</span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getBadge(item.status)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item.status }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CBadge</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#show_details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item, index }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span></span>\n<span class="line">          <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outline<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">square</span></span>\n<span class="line">          <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleDetails(item, index)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          {{ Boolean(item._toggled) ? &#39;Hide&#39; : &#39;Show&#39; }}</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCollapse</span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>this.details.includes(item._id)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            {{ item.username }}</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-muted<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>User since: {{ item.registered }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> User Settings <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ml-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> Delete <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCardBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCollapse</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSmartTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;avatar&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">filter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">sorter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token string">&#39;registered&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;role&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;status&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;show_details&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;1%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">filter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">sorter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">details</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;1.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;2.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;3.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;4.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;5.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;6.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;7.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;8.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;9.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;10.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;11.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;12.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;13.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;14.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">&#39;15.jpg&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">getBadge</span><span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">switch</span> <span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Active&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;success&#39;</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Inactive&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;secondary&#39;</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Pending&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;warning&#39;</span></span>\n<span class="line">        <span class="token keyword">case</span> <span class="token string">&#39;Banned&#39;</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token keyword">return</span> <span class="token string">&#39;danger&#39;</span></span>\n<span class="line">        <span class="token keyword">default</span><span class="token operator">:</span></span>\n<span class="line">          <span class="token string">&#39;primary&#39;</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token function">toggleDetails</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>details<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>_id<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>details <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>details<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> _item <span class="token operator">!==</span> item<span class="token punctuation">.</span>_id<span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">return</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token keyword">this</span><span class="token punctuation">.</span>details<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>_id<span class="token punctuation">)</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="column-names" tabindex="-1">Column names <a class="anchor-link" href="#column-names" aria-hidden="true">#</a></h2><p>By default, Vue Table component will generate the header labels for each column based on the column&#39;s data source.</p>', 3);
 const _hoisted_10 = { class: "docs-example rounded-top p-4" };
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      hover: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Guest&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;primary&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">&#39;middle&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">all</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;fw-semibold&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;info&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;warning&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">&#39;middle&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Pompeius René&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Paĉjo Jadon&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Micheal Mercurius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ganesha Dubhghall&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Hiroto Šimun&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Vishnu Serghei&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Zbyněk Phoibos&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Aulus Agmundr&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ford Prefect&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2001/05/25&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Alien&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&quot;Don&#39;t panic!&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="column-groups" tabindex="-1">Column groups <a class="anchor-link" href="#column-groups" aria-hidden="true">#</a></h2><p>The Vue Smart Table component allows users to group related columns under a common header. This can be useful when displaying data that has multiple categories or when comparing different sets of data. When the Smart Table is rendered, the header group will be displayed as a single header cell that spans the width of the columns included in the group. The group header cells feature can help to make the Smart Table component more organized and easier to read by grouping related data together and making it more visually distinct from other columns.</p>', 3);
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      hover: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Guest&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;primary&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">&#39;middle&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">all</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;fw-semibold&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;info&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;warning&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">&#39;middle&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Pompeius René&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Paĉjo Jadon&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Micheal Mercurius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ganesha Dubhghall&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/03/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Hiroto Šimun&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/21&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Vishnu Serghei&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Zbyněk Phoibos&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/02/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Aulus Agmundr&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2018/01/01&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ford Prefect&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2001/05/25&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Alien&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&quot;Don&#39;t panic!&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="column-groups" tabindex="-1">Column groups <a class="anchor-link" href="#column-groups" aria-hidden="true">#</a></h2><p>The Vue Smart Table component allows users to group related columns under a common header. This can be useful when displaying data that has multiple categories or when comparing different sets of data. When the Smart Table is rendered, the header group will be displayed as a single header cell that spans the width of the columns included in the group. The group header cells feature can help to make the Smart Table component more organized and easier to read by grouping related data together and making it more visually distinct from other columns.</p>', 3);
 const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsColumnGroupsExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsColumnGroupsExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;light&#39; }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ bordered: true }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">columnsColumnGroupsExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Group 1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 1A&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                    <span class="token punctuation">{</span></span>\n<span class="line">                      <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                      <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                    <span class="token string">&#39;registered&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 1B&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                    <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;role&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">]</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 2A&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                    <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;status&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">}</span></span>\n<span class="line">              <span class="token punctuation">]</span></span>\n<span class="line">            <span class="token punctuation">}</span></span>\n<span class="line">          <span class="token punctuation">]</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">itemsColumnGroupsExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Guest&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> </span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> </span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> </span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="table-with-headers-spanning-multiple-rows-or-columns" tabindex="-1">Table with headers spanning multiple rows or columns <a class="anchor-link" href="#table-with-headers-spanning-multiple-rows-or-columns" aria-hidden="true">#</a></h3><p>In the example below, the table consists of two individual columns and one column group spanning three columns. It has six rows. Two headers that span multiple rows.</p>', 3);
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsColumnGroupsExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsColumnGroupsExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;light&#39; }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ bordered: true }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">columnsColumnGroupsExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Group 1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 1A&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                    <span class="token punctuation">{</span></span>\n<span class="line">                      <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                      <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                    <span class="token string">&#39;registered&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 1B&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                    <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;role&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token punctuation">]</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Subgroup 2A&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">                    <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;status&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;20%&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token punctuation">}</span></span>\n<span class="line">              <span class="token punctuation">]</span></span>\n<span class="line">            <span class="token punctuation">}</span></span>\n<span class="line">          <span class="token punctuation">]</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">itemsColumnGroupsExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Guest&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> </span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Banned&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Inactive&#39;</span> </span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span> </span>\n<span class="line">          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span> </span>\n<span class="line">          <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Active&#39;</span> </span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="table-with-headers-spanning-multiple-rows-or-columns" tabindex="-1">Table with headers spanning multiple rows or columns <a class="anchor-link" href="#table-with-headers-spanning-multiple-rows-or-columns" aria-hidden="true">#</a></h3><p>In the example below, the table consists of two individual columns and one column group spanning three columns. It has six rows. Two headers that span multiple rows.</p>', 3);
 const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span> </span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsColumnGroupsExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsColumnGroupsExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;light&#39; }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ bordered: true }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{item}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_item in item.size<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        {{ _item }}</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSmartTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">columnsColumnGroupsExample2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Poster availability&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;poster&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Poster name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;color&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;size&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Sizes available&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;colgroup&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">itemsColumnGroupsExample2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token string">&#39;Zodiac&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Full color&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A4&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span>\n<span class="line">            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">rowSpan</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;rowgroup&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Black and white&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Sepia&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A4&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A5&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token string">&#39;Angels&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Black and white&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A4&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span>\n<span class="line">            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">rowSpan</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;rowgroup&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Sepia&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A5&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Example source: https://www.w3.org/WAI/tutorials/tables/irregular/</p><h2 id="custom-filters" tabindex="-1">Custom filters <a class="anchor-link" href="#custom-filters" aria-hidden="true">#</a></h2><p>CoreUI Vue Smart Table (Vue DataTables) provides a number of built-in features for filtering, searching, and sorting data, including the ability to use custom filtering functions.</p><p>To use a custom filter in Vue Smart Table (DataTables), you can use the <code>filter</code> option to specify a custom filter for each column.</p><h3 id="date-range-picker" tabindex="-1">Date Range Picker <a class="anchor-link" href="#date-range-picker" aria-hidden="true">#</a></h3><p>Here is an example of how you might use the <code>&lt;CDateRangePicker /&gt;</code> component to apply custom filters to a Vue DataTable component:</p>', 7);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span> </span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsColumnGroupsExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsColumnGroupsExample2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;light&#39; }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ bordered: true }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{item}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_item in item.size<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        {{ _item }}</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSmartTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token literal-property property">columnsColumnGroupsExample2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token string">&#39;Poster availability&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;poster&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Poster name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;color&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;size&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Sizes available&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;colgroup&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">              <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">]</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">itemsColumnGroupsExample2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token string">&#39;Zodiac&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Full color&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A4&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span>\n<span class="line">            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">rowSpan</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;rowgroup&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Black and white&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Sepia&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A4&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A5&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token string">&#39;Angels&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Black and white&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A4&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span>\n<span class="line">            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">rowSpan</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;rowgroup&#39;</span> <span class="token punctuation">}</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;Sepia&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;A2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;A5&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Example source: https://www.w3.org/WAI/tutorials/tables/irregular/</p><h2 id="custom-filters" tabindex="-1">Custom filters <a class="anchor-link" href="#custom-filters" aria-hidden="true">#</a></h2><p>CoreUI Vue Smart Table (Vue DataTables) provides a number of built-in features for filtering, searching, and sorting data, including the ability to use custom filtering functions.</p><p>To use a custom filter in Vue Smart Table (DataTables), you can use the <code>filter</code> option to specify a custom filter for each column.</p><h3 id="date-range-picker" tabindex="-1">Date Range Picker <a class="anchor-link" href="#date-range-picker" aria-hidden="true">#</a></h3><p>Here is an example of how you might use the <code>&lt;CDateRangePicker /&gt;</code> component to apply custom filters to a Vue DataTable component:</p>', 7);
 const _hoisted_26 = { class: "docs-example rounded-top p-4" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span> </span>\n<span class="line">    <span class="token attr-name">cleaner</span></span>\n<span class="line">    <span class="token attr-name">clickableRows</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsDateRangePicker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">:columnFilterValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      registered: </span>\n<span class="line">        (date) =&gt; new Date(Date.parse(date)) &gt;= startDate &amp;&amp; new Date(Date.parse(date)) &lt;= endDate</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsDateRangePicker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">tableFilter</span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#registered</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{{ convertToDate(item.registered) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSmartTable</span><span class="token punctuation">&gt;</span></span>    </span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> CDateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">startDate</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;2022-01-21&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">endDate</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;2022-02-07&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnsDateRangePicker</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;registered&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token function-variable function">filter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token punctuation">,</span> onChange</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">const</span> unique <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span>CDateRangePicker<span class="token punctuation">,</span> <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">startDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>startDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">endDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">minDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>minDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">maxDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>maxDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token function-variable function">onStartDateChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStartDate</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span></span>\n<span class="line">                  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token keyword">if</span> <span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">                      <span class="token keyword">const</span> itemDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">                      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endDate <span class="token operator">?</span> itemDate <span class="token operator">&gt;=</span> date <span class="token operator">&amp;&amp;</span> itemDate <span class="token operator">&lt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endDate <span class="token operator">:</span> itemDate <span class="token operator">&gt;=</span> date</span>\n<span class="line">                    <span class="token punctuation">}</span> </span>\n<span class="line">                    <span class="token keyword">return</span> <span class="token boolean">true</span></span>\n<span class="line">                  <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token function-variable function">onEndDateChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setEndDate</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span></span>\n<span class="line">                  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token keyword">if</span> <span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">                      <span class="token keyword">const</span> itemDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">                      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>startDate <span class="token operator">?</span> itemDate <span class="token operator">&lt;=</span> date <span class="token operator">&amp;&amp;</span> itemDate <span class="token operator">&gt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>startDate <span class="token operator">:</span> itemDate <span class="token operator">&lt;=</span> date</span>\n<span class="line">                    <span class="token punctuation">}</span> </span>\n<span class="line">                    <span class="token keyword">return</span> <span class="token boolean">true</span></span>\n<span class="line">                  <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">                <span class="token punctuation">}</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsDateRangePicker</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/19&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Pompeius René&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Paĉjo Jadon&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Micheal Mercurius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ganesha Dubhghall&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Hiroto Šimun&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Vishnu Serghei&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Zbyněk Phoibos&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Aulus Agmundr&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ford Prefect&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/25&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function-variable function">minDate</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span></span>\n<span class="line">          Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span></span>\n<span class="line">            <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>itemsDateRangePicker<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>registered<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function-variable function">maxDate</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span></span>\n<span class="line">          Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span></span>\n<span class="line">            <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>itemsDateRangePicker<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>registered<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">convertToDate</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> _date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">return</span> _date<span class="token punctuation">.</span><span class="token function">toLocaleDateString</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setStartDate</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>startDate <span class="token operator">=</span> date</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setEndDate</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>endDate <span class="token operator">=</span> date</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="multi-select" tabindex="-1">Multi Select <a class="anchor-link" href="#multi-select" aria-hidden="true">#</a></h3><p>Here is an example of how you might use the <code>&lt;CMultiSelect /&gt;</code> component to apply custom filters to a Vue DataTable:</p>', 3);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span> </span>\n<span class="line">    <span class="token attr-name">cleaner</span></span>\n<span class="line">    <span class="token attr-name">clickableRows</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsDateRangePicker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">:columnFilterValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      registered: </span>\n<span class="line">        (date) =&gt; new Date(Date.parse(date)) &gt;= startDate &amp;&amp; new Date(Date.parse(date)) &lt;= endDate</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsDateRangePicker<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">tableFilter</span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#registered</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{{ convertToDate(item.registered) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CSmartTable</span><span class="token punctuation">&gt;</span></span>    </span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> CDateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">startDate</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;2022-01-21&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">endDate</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;2022-02-07&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnsDateRangePicker</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;registered&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token function-variable function">filter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token punctuation">,</span> onChange</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">const</span> unique <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span>CDateRangePicker<span class="token punctuation">,</span> <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">startDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>startDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">endDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">minDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>minDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">maxDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>maxDate<span class="token punctuation">,</span></span>\n<span class="line">                <span class="token function-variable function">onStartDateChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStartDate</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span></span>\n<span class="line">                  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token keyword">if</span> <span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">                      <span class="token keyword">const</span> itemDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">                      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endDate <span class="token operator">?</span> itemDate <span class="token operator">&gt;=</span> date <span class="token operator">&amp;&amp;</span> itemDate <span class="token operator">&lt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endDate <span class="token operator">:</span> itemDate <span class="token operator">&gt;=</span> date</span>\n<span class="line">                    <span class="token punctuation">}</span> </span>\n<span class="line">                    <span class="token keyword">return</span> <span class="token boolean">true</span></span>\n<span class="line">                  <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token function-variable function">onEndDateChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setEndDate</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span></span>\n<span class="line">                  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token keyword">if</span> <span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">                      <span class="token keyword">const</span> itemDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">                      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>startDate <span class="token operator">?</span> itemDate <span class="token operator">&lt;=</span> date <span class="token operator">&amp;&amp;</span> itemDate <span class="token operator">&gt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>startDate <span class="token operator">:</span> itemDate <span class="token operator">&lt;=</span> date</span>\n<span class="line">                    <span class="token punctuation">}</span> </span>\n<span class="line">                    <span class="token keyword">return</span> <span class="token boolean">true</span></span>\n<span class="line">                  <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">                <span class="token punctuation">}</span></span>\n<span class="line">              <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsDateRangePicker</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/03/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/19&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;Pending&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Pompeius René&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Paĉjo Jadon&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Micheal Mercurius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ganesha Dubhghall&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/19&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Hiroto Šimun&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/21&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Vishnu Serghei&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Zbyněk Phoibos&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/07&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Aulus Agmundr&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/01/01&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ford Prefect&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">registered</span><span class="token operator">:</span> <span class="token string">&#39;2022/02/25&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function-variable function">minDate</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span></span>\n<span class="line">          Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span></span>\n<span class="line">            <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>itemsDateRangePicker<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>registered<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function-variable function">maxDate</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span></span>\n<span class="line">          Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span></span>\n<span class="line">            <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>itemsDateRangePicker<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>registered<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">convertToDate</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> _date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">return</span> _date<span class="token punctuation">.</span><span class="token function">toLocaleDateString</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setStartDate</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>startDate <span class="token operator">=</span> date</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setEndDate</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>endDate <span class="token operator">=</span> date</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="multi-select" tabindex="-1">Multi Select <a class="anchor-link" href="#multi-select" aria-hidden="true">#</a></h3><p>Here is an example of how you might use the <code>&lt;CMultiSelect /&gt;</code> component to apply custom filters to a Vue DataTable:</p>', 3);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
-const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">cleaner</span></span>\n<span class="line">    <span class="token attr-name">clickableRows</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsMultiSelect<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsMultiSelect<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">tableFilter</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsMultiSelect</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;role&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token function-variable function">filter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token punctuation">,</span> onChange</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">const</span> unique <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span>CMultiSelect<span class="token punctuation">,</span> <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selected</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">const</span> _selected <span class="token operator">=</span> selected<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> element<span class="token punctuation">.</span>value<span class="token punctuation">)</span></span>\n<span class="line">                  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>_selected<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> _selected<span class="token punctuation">.</span>length</span>\n<span class="line">                      <span class="token operator">?</span> _selected<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">                      <span class="token operator">:</span> <span class="token boolean">true</span></span>\n<span class="line">                  <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">options</span><span class="token operator">:</span> unique<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token literal-property property">value</span><span class="token operator">:</span> element<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">                    <span class="token literal-property property">text</span><span class="token operator">:</span> element<span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">}</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">sorter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsMultiSelect</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Guest&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Pompeius René&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Paĉjo Jadon&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Micheal Mercurius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ganesha Dubhghall&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Hiroto Šimun&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Vishnu Serghei&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Zbyněk Phoibos&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Aulus Agmundr&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ford Prefect&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Alien&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="data-sources" tabindex="-1">Data sources <a class="anchor-link" href="#data-sources" aria-hidden="true">#</a></h2><p>You can use Fetch API to load data from different sources and then pass them to <code>&lt;CSmartTable&gt;</code></p><h3 id="external-data-10-000-records" tabindex="-1">External Data (10.000+ records) <a class="anchor-link" href="#external-data-10-000-records" aria-hidden="true">#</a></h3><p>One of the key features of Vue Smart Table (Vue DataTables) is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don&#39;t want to load all at once, or if you want to allow users to interact with the data without having to reload the page.</p><p>To load external data into a Vue Smart Table (Vue DataTables), you can use the Fetch API to the data source.</p><p>Here is an example of how you might use Vue Smart Table with external data:</p>', 7);
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">cleaner</span></span>\n<span class="line">    <span class="token attr-name">clickableRows</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsMultiSelect<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">footer</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsMultiSelect<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">tableFilter</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> CMultiSelect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsMultiSelect</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;role&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;50%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token function-variable function">filter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token punctuation">,</span> onChange</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">              <span class="token keyword">const</span> unique <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">              <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span>CMultiSelect<span class="token punctuation">,</span> <span class="token punctuation">{</span></span>\n<span class="line">                <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selected</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">const</span> _selected <span class="token operator">=</span> selected<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> element<span class="token punctuation">.</span>value<span class="token punctuation">)</span></span>\n<span class="line">                  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>_selected<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> _selected<span class="token punctuation">.</span>length</span>\n<span class="line">                      <span class="token operator">?</span> _selected<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">                      <span class="token operator">:</span> <span class="token boolean">true</span></span>\n<span class="line">                  <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">                <span class="token literal-property property">options</span><span class="token operator">:</span> unique<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">                  <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">                    <span class="token literal-property property">value</span><span class="token operator">:</span> element<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>\n<span class="line">                    <span class="token literal-property property">text</span><span class="token operator">:</span> element<span class="token punctuation">,</span></span>\n<span class="line">                  <span class="token punctuation">}</span></span>\n<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">sorter</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsMultiSelect</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;John Doe&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Guest&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Samppa Nori&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Estavan Lykos&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Chetan Mohamed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Derick Maximinus&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Friderik Dávid&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Yiorgos Avraamu&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Avram Tarasios&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Quintin Ed&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Enéas Kwadwo&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Agapetus Tadeáš&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Carwyn Fachtna&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Nehemiah Tatius&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ebbe Gemariah&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Eustorgios Amulius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Leopold Gáspár&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Pompeius René&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Paĉjo Jadon&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Micheal Mercurius&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Admin&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ganesha Dubhghall&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Hiroto Šimun&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Vishnu Serghei&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Zbyněk Phoibos&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Staff&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Aulus Agmundr&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Member&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Ford Prefect&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">&#39;Alien&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="data-sources" tabindex="-1">Data sources <a class="anchor-link" href="#data-sources" aria-hidden="true">#</a></h2><p>You can use Fetch API to load data from different sources and then pass them to <code>&lt;CSmartTable&gt;</code></p><h3 id="external-data-10-000-records" tabindex="-1">External Data (10.000+ records) <a class="anchor-link" href="#external-data-10-000-records" aria-hidden="true">#</a></h3><p>One of the key features of Vue Smart Table (Vue DataTables) is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don&#39;t want to load all at once, or if you want to allow users to interact with the data without having to reload the page.</p><p>To load external data into a Vue Smart Table (Vue DataTables), you can use the Fetch API to the data source.</p><p>Here is an example of how you might use Vue Smart Table with external data:</p>', 7);
 const _hoisted_38 = { class: "docs-example rounded-top p-4" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsExternalDataExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:columnFilter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      external: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:columnSorter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      external: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>users<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsPerPage<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:pagination</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      external: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:paginationProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      activePage: activePage,</span>\n<span class="line">      pages: Math.ceil(records / itemsPerPage) || 1,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      hover: true,</span>\n<span class="line">      responsive: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@active-Page-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(activePage) =&gt; setActivePage(activePage)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@column-filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(filter) =&gt; {</span>\n<span class="line">      setActivePage(1)</span>\n<span class="line">      setColumnFilter(filter)</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@items-per-page-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(itemsPerPage) =&gt; {</span>\n<span class="line">      setActivePage(1)</span>\n<span class="line">      setItemsPerPage(itemsPerPage)</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@sorter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(sorter) =&gt; setColumnSorter(sorter)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span>\n<span class="line">        <span class="token literal-property property">activePage</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnFilter</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnSorter</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsPerPage</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">users</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">records</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnsExternalDataExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;first_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;last_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;email&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;country&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;120px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;ip_address&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;IP&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">async</span> <span class="token function">getUsers</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> offset <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activePage <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage</span>\n<span class="line">        <span class="token keyword">let</span> params <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>columnFilter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">          params<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>columnFilter<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter <span class="token operator">&amp;&amp;</span></span>\n<span class="line">          <span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter<span class="token punctuation">.</span>column <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">&amp;&amp;</span></span>\n<span class="line">          params<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;sort&#39;</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter<span class="token punctuation">.</span>column<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter<span class="token punctuation">.</span>state<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://apitest.coreui.io/demos/users?offset=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>offset<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;limit=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setRecords</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>number_of_matching_records<span class="token punctuation">)</span></span>\n<span class="line">            result<span class="token punctuation">.</span>number_of_matching_records <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setUsers</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>records<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setUsers</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setActivePage</span> <span class="token punctuation">(</span><span class="token parameter">activePage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>activePage <span class="token operator">=</span> activePage</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setColumnFilter</span> <span class="token punctuation">(</span><span class="token parameter">columnFilter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>columnFilter <span class="token operator">=</span> columnFilter</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setColumnSorter</span> <span class="token punctuation">(</span><span class="token parameter">columnSorter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter <span class="token operator">=</span> columnSorter</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setItemsPerPage</span> <span class="token punctuation">(</span><span class="token parameter">itemsPerPage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage <span class="token operator">=</span> itemsPerPage</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setLoading</span> <span class="token punctuation">(</span><span class="token parameter">loading</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> loading</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setRecords</span> <span class="token punctuation">(</span><span class="token parameter">records</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>records <span class="token operator">=</span> records</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setUsers</span> <span class="token punctuation">(</span><span class="token parameter">users</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>users <span class="token operator">=</span> users</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">activePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">columnFilter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">columnSorter</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">itemsPerPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span> </span>\n<span class="line">    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="json-10-000-records" tabindex="-1">JSON (10.000+ records) <a class="anchor-link" href="#json-10-000-records" aria-hidden="true">#</a></h3><p>The Fetch API can be used to load JSON data by making a GET request to the endpoint where the data is located. In this example, the <code>fetch()</code> method is used to make a GET request to the endpoint <code>https://apitest.coreui.io/fake_data/users.json</code>, which returns a response. The <code>response.json()</code> method is then used to parse the response as a JSON object. The resulting JSON object is stored in the <code>users</code> and loaded by <code>&lt;CSmartTable /&gt;</code>.</p>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsExternalDataExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:columnFilter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      external: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:columnSorter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      external: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>users<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:itemsPerPage</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsPerPage<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:pagination</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      external: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:paginationProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      activePage: activePage,</span>\n<span class="line">      pages: Math.ceil(records / itemsPerPage) || 1,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      hover: true,</span>\n<span class="line">      responsive: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@active-Page-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(activePage) =&gt; setActivePage(activePage)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@column-filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(filter) =&gt; {</span>\n<span class="line">      setActivePage(1)</span>\n<span class="line">      setColumnFilter(filter)</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@items-per-page-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(itemsPerPage) =&gt; {</span>\n<span class="line">      setActivePage(1)</span>\n<span class="line">      setItemsPerPage(itemsPerPage)</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">@sorter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(sorter) =&gt; setColumnSorter(sorter)<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span>\n<span class="line">        <span class="token literal-property property">activePage</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnFilter</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnSorter</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsPerPage</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">users</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">records</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnsExternalDataExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;first_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;last_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;email&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;country&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;120px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;ip_address&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;IP&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">async</span> <span class="token function">getUsers</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> offset <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activePage <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage</span>\n<span class="line">        <span class="token keyword">let</span> params <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>columnFilter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">          params<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>columnFilter<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter <span class="token operator">&amp;&amp;</span></span>\n<span class="line">          <span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter<span class="token punctuation">.</span>column <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">&amp;&amp;</span></span>\n<span class="line">          params<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;sort&#39;</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter<span class="token punctuation">.</span>column<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter<span class="token punctuation">.</span>state<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://apitest.coreui.io/demos/users?offset=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>offset<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;limit=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setRecords</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>number_of_matching_records<span class="token punctuation">)</span></span>\n<span class="line">            result<span class="token punctuation">.</span>number_of_matching_records <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setUsers</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>records<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setUsers</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setActivePage</span> <span class="token punctuation">(</span><span class="token parameter">activePage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>activePage <span class="token operator">=</span> activePage</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setColumnFilter</span> <span class="token punctuation">(</span><span class="token parameter">columnFilter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>columnFilter <span class="token operator">=</span> columnFilter</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setColumnSorter</span> <span class="token punctuation">(</span><span class="token parameter">columnSorter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>columnSorter <span class="token operator">=</span> columnSorter</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setItemsPerPage</span> <span class="token punctuation">(</span><span class="token parameter">itemsPerPage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>itemsPerPage <span class="token operator">=</span> itemsPerPage</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setLoading</span> <span class="token punctuation">(</span><span class="token parameter">loading</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> loading</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setRecords</span> <span class="token punctuation">(</span><span class="token parameter">records</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>records <span class="token operator">=</span> records</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setUsers</span> <span class="token punctuation">(</span><span class="token parameter">users</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>users <span class="token operator">=</span> users</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">activePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">columnFilter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token literal-property property">columnSorter</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">itemsPerPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span> </span>\n<span class="line">    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="json-10-000-records" tabindex="-1">JSON (10.000+ records) <a class="anchor-link" href="#json-10-000-records" aria-hidden="true">#</a></h3><p>The Fetch API can be used to load JSON data by making a GET request to the endpoint where the data is located. In this example, the <code>fetch()</code> method is used to make a GET request to the endpoint <code>https://apitest.coreui.io/fake_data/users.json</code>, which returns a response. The <code>response.json()</code> method is then used to parse the response as a JSON object. The resulting JSON object is stored in the <code>users</code> and loaded by <code>&lt;CSmartTable /&gt;</code>.</p>', 3);
 const _hoisted_42 = { class: "docs-example rounded-top p-4" };
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsJSONDataExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>usersJSON<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loadingJSON<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      hover: true,</span>\n<span class="line">      responsive: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">loadingJSON</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">usersJSON</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnsJSONDataExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;first_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;last_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;email&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;country&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;120px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;ip_address&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;IP&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">async</span> <span class="token function">getUsersJSON</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoadingJSON</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">&#39;https://apitest.coreui.io/fake_data/users.json&#39;</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setUsersJSON</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoadingJSON</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setLoadingJSON</span> <span class="token punctuation">(</span><span class="token parameter">loading</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>loadingJSON <span class="token operator">=</span> loading</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setUsersJSON</span> <span class="token punctuation">(</span><span class="token parameter">users</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>usersJSON <span class="token operator">=</span> users</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsersJSON</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="csmarttable" tabindex="-1">CSmartTable <a class="anchor-link" href="#csmarttable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-page</strong></td><td>Sets active page. If &#39;pagination&#39; prop is enabled, activePage is set only initially.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>cleaner</strong></td><td>When set, displays table cleaner above table, next to the table filter (or in place of table filter if <code>tableFilter</code> prop is not set)<br>Cleaner resets <code>tableFilterValue</code>, <code>columnFilterValue</code>, <code>sorterValue</code>. If clean is possible it is clickable (<code>tabIndex=&quot;0&quot;</code> <code>role=&quot;button&quot;</code>, <code>color=&quot;danger&quot;</code>), otherwise it is not clickable and transparent. Cleaner can be customized through the <code>cleanerIcon</code> slot.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>clickable-rows</strong></td><td>Style table items as clickable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter</strong></td><td>When set, displays additional filter row between table header and items, allowing filtering by specific column.<br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | ColumnFilter</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter-value</strong></td><td>Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:<br>{ user: &#39;John&#39;, age: 12 }</td><td>ColumnFilterValue</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- filter (Boolean) - removes filter from column when set to false.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- sorter (Boolean) - disables sorting of the column when set to false<br>- <a href="https://coreui.io/vue/docs/components/table.html#ctableheadercell" target="_blank" rel="noopener noreferrer">_props</a> (String/Array/Object) - add props to <code>CTableHeaderCell</code>.<br>- _style (String/Array/Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>column-sorter</strong></td><td>Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.<br><br>Sorter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic sorting inside component.<br>- resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.</td><td>boolean | Sorter</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>If <code>true</code> Displays table footer, which mirrors table header. (without column filter).<br>Or Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br><code>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]</code><br>or<br><code>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</code></td><td>boolean | (FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>header</strong></td><td>Set to false to remove table header.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>items</strong></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can customize each row by passing them by <a href="http://coreui.io/vue/docs/components/table.html#ctablerow" target="_blank" rel="noopener noreferrer">_props</a> key and single cell by <a href="http://coreui.io/vue/docs/components/table.html#ctabledatacell" target="_blank" rel="noopener noreferrer">_cellProps</a>.<br><br>Examples:<br>- <code>_props: { color: &#39;primary&#39;, align: &#39;middle&#39;}</code><br>- <code>_cellProps: { all: { class: &#39;fw-semibold&#39;}, &#39;name&#39;: { color: &#39;info&#39; }}</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>items-number</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>items-per-page</strong></td><td>Number of items per site, when pagination is enabled.</td><td>number</td><td>-</td><td>10</td></tr><tr><td><strong>items-per-page-label</strong></td><td>Label for items per page selector.</td><td>string</td><td>-</td><td>&#39;Items per page:&#39;</td></tr><tr><td><strong>items-per-page-options</strong></td><td>Items per page selector options.</td><td>number[]</td><td>-</td><td>() =&gt; [5, 10, 20, 50]</td></tr><tr><td><strong>items-per-page-select</strong></td><td>Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:<br>- external (Boolean) - disables automatic &#39;itemsPerPage&#39; change (use to change pages externaly by &#39;pagination-change&#39; event).</td><td>boolean | ItemsPerPageSelect</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>When set, table will have loading style: loading spinner and reduced opacity. When &#39;small&#39; prop is enabled spinner will be also smaller.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>no-items-label</strong></td><td>ReactNode or string for passing custom noItemsLabel texts.</td><td>string</td><td>-</td><td>&#39;No items found&#39;</td></tr><tr><td><strong>pagination</strong></td><td>Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and &#39;itemsPerPage&#39; prop. If this restriction is an obstacle, you can make external CPagination instead.</td><td>boolean | Pagination</td><td>-</td><td>-</td></tr><tr><td><strong>pagination-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/smart-pagination#csmartpagination" target="_blank" rel="noopener noreferrer">CSmartPagination</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>selectable</strong></td><td>Add checkboxes to make table rows selectable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-all</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enables select all checkbox displayed in the header of the table.<br><br>Can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic selection inside the component.</td><td>boolean | { external?: boolean }</td><td>-</td><td>-</td></tr><tr><td><strong>selected</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Array of selected objects, where each object represents one item - row in table.<br><br>Example item: <code>{ name: &#39;John&#39; , age: 12 }</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>sorter-value</strong></td><td>State of the sorter. Name key is column name, direction can be &#39;asc&#39; or &#39;desc&#39;. eg.:<br>{ column: &#39;status&#39;, state: &#39;asc&#39; }</td><td>SorterValue</td><td>-</td><td>-</td></tr><tr><td><strong>table-body-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablebody" target="_blank" rel="noopener noreferrer">CTableBody</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablefoot" target="_blank" rel="noopener noreferrer">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter</strong></td><td>When set, displays table filter above table, allowing filtering by specific column.<br><br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | TableFilter</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter-label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>&#39;Filter:&#39;</td></tr><tr><td><strong>table-filter-placeholder</strong></td><td>Specifies a short hint that is visible in the search input.</td><td>string</td><td>-</td><td>&#39;type string...&#39;</td></tr><tr><td><strong>table-filter-value</strong></td><td>Value of table filter.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablehead" target="_blank" rel="noopener noreferrer">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctable" target="_blank" rel="noopener noreferrer">CTable</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>Page change callback.</td><td><strong>page</strong> <code>number</code> - active page number</td></tr><tr><td><strong>column-filter-change</strong></td><td>Column filter change callback.</td><td><strong>ColumnFilterValue</strong> <code>object</code> - {[key: string]: string | number}</td></tr><tr><td><strong>filtered-items-change</strong></td><td>Filtered items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>items-per-page-change</strong></td><td>Pagination change callback.</td><td><strong>itemsPerPageNumber</strong> <code>number</code> - items per page number</td></tr><tr><td><strong>row-click</strong></td><td>Row click callback.</td><td><strong>item</strong> <code>object</code> - undefined<br><strong>index</strong> <code>number</code> - undefined<br><strong>columnName</strong> <code>string</code> - undefined<br><strong>event</strong> <code>event</code> - undefined</td></tr><tr><td><strong>select-all</strong></td><td>Select all callback.</td><td></td></tr><tr><td><strong>selected-items-change</strong></td><td>Selected items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>sorter-change</strong></td><td>Sorter value change callback.</td><td><strong>SorterValue</strong> <code>object</code> - { column?: string, state?: number | string}</td></tr><tr><td><strong>table-filter-change</strong></td><td>Table filter change callback.</td><td><strong>tableFilterValue</strong> <code>string</code> - undefined</td></tr></tbody></table>', 8);
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSmartTable</span></span>\n<span class="line">    <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsJSONDataExample<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">columnFilter</span></span>\n<span class="line">    <span class="token attr-name">columnSorter</span></span>\n<span class="line">    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>usersJSON<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">itemsPerPageSelect</span></span>\n<span class="line">    <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loadingJSON<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">pagination</span></span>\n<span class="line">    <span class="token attr-name">:tableProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      hover: true,</span>\n<span class="line">      responsive: true,</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">loadingJSON</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">usersJSON</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">columnsJSONDataExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;first_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;last_name&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;130px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;email&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;country&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token string">&#39;120px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;ip_address&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;IP&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">async</span> <span class="token function">getUsersJSON</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoadingJSON</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">&#39;https://apitest.coreui.io/fake_data/users.json&#39;</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setUsersJSON</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span></span>\n<span class="line">            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLoadingJSON</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setLoadingJSON</span> <span class="token punctuation">(</span><span class="token parameter">loading</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>loadingJSON <span class="token operator">=</span> loading</span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token function">setUsersJSON</span> <span class="token punctuation">(</span><span class="token parameter">users</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>usersJSON <span class="token operator">=</span> users</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUsersJSON</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="csmarttable" tabindex="-1">CSmartTable <a class="anchor-link" href="#csmarttable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSmartTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSmartTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/smart-table/CSmartTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-page</strong></td><td>Sets active page. If &#39;pagination&#39; prop is enabled, activePage is set only initially.</td><td>number</td><td>-</td><td>1</td></tr><tr><td><strong>cleaner</strong></td><td>When set, displays table cleaner above table, next to the table filter (or in place of table filter if <code>tableFilter</code> prop is not set)<br>Cleaner resets <code>tableFilterValue</code>, <code>columnFilterValue</code>, <code>sorterValue</code>. If clean is possible it is clickable (<code>tabIndex=&quot;0&quot;</code> <code>role=&quot;button&quot;</code>, <code>color=&quot;danger&quot;</code>), otherwise it is not clickable and transparent. Cleaner can be customized through the <code>cleanerIcon</code> slot.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>clickable-rows</strong></td><td>Style table items as clickable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter</strong></td><td>When set, displays additional filter row between table header and items, allowing filtering by specific column.<br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | ColumnFilter</td><td>-</td><td>-</td></tr><tr><td><strong>column-filter-value</strong></td><td>Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:<br>{ user: &#39;John&#39;, age: 12 }</td><td>ColumnFilterValue</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- filter (Boolean) - removes filter from column when set to false.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- sorter (Boolean) - disables sorting of the column when set to false<br>- <a href="https://coreui.io/vue/docs/components/table.html#ctableheadercell" target="_blank" rel="noopener noreferrer">_props</a> (String/Array/Object) - add props to <code>CTableHeaderCell</code>.<br>- _style (String/Array/Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>column-sorter</strong></td><td>Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.<br><br>Sorter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic sorting inside component.<br>- resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.</td><td>boolean | Sorter</td><td>-</td><td>-</td></tr><tr><td><strong>footer</strong></td><td>If <code>true</code> Displays table footer, which mirrors table header. (without column filter).<br>Or Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br><code>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]</code><br>or<br><code>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</code></td><td>boolean | (FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>header</strong></td><td>Set to false to remove table header.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>items</strong></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can customize each row by passing them by <a href="http://coreui.io/vue/docs/components/table.html#ctablerow" target="_blank" rel="noopener noreferrer">_props</a> key and single cell by <a href="http://coreui.io/vue/docs/components/table.html#ctabledatacell" target="_blank" rel="noopener noreferrer">_cellProps</a>.<br><br>Examples:<br>- <code>_props: { color: &#39;primary&#39;, align: &#39;middle&#39;}</code><br>- <code>_cellProps: { all: { class: &#39;fw-semibold&#39;}, &#39;name&#39;: { color: &#39;info&#39; }}</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>items-number</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>items-per-page</strong></td><td>Number of items per site, when pagination is enabled.</td><td>number</td><td>-</td><td>10</td></tr><tr><td><strong>items-per-page-label</strong></td><td>Label for items per page selector.</td><td>string</td><td>-</td><td>&#39;Items per page:&#39;</td></tr><tr><td><strong>items-per-page-options</strong></td><td>Items per page selector options.</td><td>number[]</td><td>-</td><td>() =&gt; [5, 10, 20, 50]</td></tr><tr><td><strong>items-per-page-select</strong></td><td>Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:<br>- external (Boolean) - disables automatic &#39;itemsPerPage&#39; change (use to change pages externaly by &#39;pagination-change&#39; event).</td><td>boolean | ItemsPerPageSelect</td><td>-</td><td>-</td></tr><tr><td><strong>loading</strong></td><td>When set, table will have loading style: loading spinner and reduced opacity. When &#39;small&#39; prop is enabled spinner will be also smaller.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>no-items-label</strong></td><td>ReactNode or string for passing custom noItemsLabel texts.</td><td>string</td><td>-</td><td>&#39;No items found&#39;</td></tr><tr><td><strong>pagination</strong></td><td>Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and &#39;itemsPerPage&#39; prop. If this restriction is an obstacle, you can make external CPagination instead.</td><td>boolean | Pagination</td><td>-</td><td>-</td></tr><tr><td><strong>pagination-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/smart-pagination#csmartpagination" target="_blank" rel="noopener noreferrer">CSmartPagination</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>selectable</strong></td><td>Add checkboxes to make table rows selectable.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>select-all</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Enables select all checkbox displayed in the header of the table.<br><br>Can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic selection inside the component.</td><td>boolean | { external?: boolean }</td><td>-</td><td>-</td></tr><tr><td><strong>selected</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Array of selected objects, where each object represents one item - row in table.<br><br>Example item: <code>{ name: &#39;John&#39; , age: 12 }</code></td><td>Item[]</td><td>-</td><td>() =&gt; []</td></tr><tr><td><strong>sorter-value</strong></td><td>State of the sorter. Name key is column name, direction can be &#39;asc&#39; or &#39;desc&#39;. eg.:<br>{ column: &#39;status&#39;, state: &#39;asc&#39; }</td><td>SorterValue</td><td>-</td><td>-</td></tr><tr><td><strong>table-body-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablebody" target="_blank" rel="noopener noreferrer">CTableBody</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablefoot" target="_blank" rel="noopener noreferrer">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter</strong></td><td>When set, displays table filter above table, allowing filtering by specific column.<br><br>Column filter can be customized, by passing prop as object with additional options as keys. Available options:<br>- external (Boolean) - Disables automatic filtering inside component.<br>- lazy (Boolean) - Set to true to trigger filter updates only on change event.</td><td>boolean | TableFilter</td><td>-</td><td>-</td></tr><tr><td><strong>table-filter-label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>&#39;Filter:&#39;</td></tr><tr><td><strong>table-filter-placeholder</strong></td><td>Specifies a short hint that is visible in the search input.</td><td>string</td><td>-</td><td>&#39;type string...&#39;</td></tr><tr><td><strong>table-filter-value</strong></td><td>Value of table filter.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctablehead" target="_blank" rel="noopener noreferrer">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-props</strong></td><td>Properties to <a href="https://coreui.io/vue/docs/components/table/#ctable" target="_blank" rel="noopener noreferrer">CTable</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>active-page-change</strong></td><td>Page change callback.</td><td><strong>page</strong> <code>number</code> - active page number</td></tr><tr><td><strong>column-filter-change</strong></td><td>Column filter change callback.</td><td><strong>ColumnFilterValue</strong> <code>object</code> - {[key: string]: string | number}</td></tr><tr><td><strong>filtered-items-change</strong></td><td>Filtered items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>items-per-page-change</strong></td><td>Pagination change callback.</td><td><strong>itemsPerPageNumber</strong> <code>number</code> - items per page number</td></tr><tr><td><strong>row-click</strong></td><td>Row click callback.</td><td><strong>item</strong> <code>object</code> - undefined<br><strong>index</strong> <code>number</code> - undefined<br><strong>columnName</strong> <code>string</code> - undefined<br><strong>event</strong> <code>event</code> - undefined</td></tr><tr><td><strong>select-all</strong></td><td>Select all callback.</td><td></td></tr><tr><td><strong>selected-items-change</strong></td><td>Selected items change callback.</td><td><strong>items</strong> <code>array</code> - undefined</td></tr><tr><td><strong>sorter-change</strong></td><td>Sorter value change callback.</td><td><strong>SorterValue</strong> <code>object</code> - { column?: string, state?: number | string}</td></tr><tr><td><strong>table-filter-change</strong></td><td>Table filter change callback.</td><td><strong>tableFilterValue</strong> <code>string</code> - undefined</td></tr></tbody></table>', 8);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CAvatar = resolveComponent("CAvatar");
   const _component_CBadge = resolveComponent("CBadge");
diff --git a/vue/docs/assets/spinner.html-Dja_Ea9Q.js b/vue/docs/assets/spinner.html-Dja_Ea9Q.js
new file mode 100644
index 00000000000..b82a485449b
--- /dev/null
+++ b/vue/docs/assets/spinner.html-Dja_Ea9Q.js
@@ -0,0 +1,183 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about" aria-hidden="true">#</a></h2><p>CoreUI &quot;spinners&quot; can be used to show the loading state in your projects. They&#39;re built only with HTML and CSS, meaning you don&#39;t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p><p>For accessibility purposes, each loader here includes <code>role=&quot;status&quot;</code> and a nested <code>&lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;</code>.</p><h2 id="border-spinner" tabindex="-1">Border spinner <a class="anchor-link" href="#border-spinner" aria-hidden="true">#</a></h2><p>Use the border spinners for a lightweight loading indicator.</p><h2 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage" aria-hidden="true">#</a></h2>', 6);
+const _hoisted_7 = { class: "docs-example rounded-top p-4" };
+const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="colors" tabindex="-1">Colors <a class="anchor-link" href="#colors" aria-hidden="true">#</a></h3><p>The border spinner uses <code>currentColor</code> for its <code>border-color</code>. You can use any of our text color utilities on the standard spinner.</p>', 3);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="growing-spinner" tabindex="-1">Growing spinner <a class="anchor-link" href="#growing-spinner" aria-hidden="true">#</a></h2><p>If you don&#39;t fancy a border spinner, switch to the grow spinner. While it doesn&#39;t technically spin, it does repeatedly grow!</p>', 3);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>Once again, this spinner is built with <code>currentColor</code>, so you can easily change its appearance. Here it is in blue, along with the supported variants.</p>', 2);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="size" tabindex="-1">Size <a class="anchor-link" href="#size" aria-hidden="true">#</a></h2><p>Add <code>size=&quot;sm&quot;</code>property` to make a smaller spinner that can quickly be used within other components.</p>', 3);
+const _hoisted_22 = { class: "docs-example rounded-top p-4" };
+const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="buttons" tabindex="-1">Buttons <a class="anchor-link" href="#buttons" aria-hidden="true">#</a></h2><p>Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</p>', 3);
+const _hoisted_26 = { class: "docs-example rounded-top p-4" };
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  Loading...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_28 = { class: "docs-example rounded-top p-4" };
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  Loading...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue spinners use local CSS variables on <code>.spinner-border</code> and <code>.spinner-grow</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p><p>Border spinner variables:</p>', 5);
+const _hoisted_34 = /* @__PURE__ */ createBaseVNode("p", null, "Growing spinner variables:", -1);
+const _hoisted_35 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the "),
+  /* @__PURE__ */ createBaseVNode("code", null, ".spinner-border-sm"),
+  /* @__PURE__ */ createTextVNode(" class does the following:")
+], -1);
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CSpinner <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CSpinner<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSpinner <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSpinner <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/spinner/CSpinner&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>visually-hidden-label</strong></td><td>Set visually hidden label for accessibility purposes.</td><td>string</td><td>-</td><td>&#39;Loading...&#39;</td></tr></tbody></table>', 5);
+function _sfc_render(_ctx, _cache) {
+  const _component_CSpinner = resolveComponent("CSpinner");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_7, [
+      createVNode(_component_CSpinner)
+    ]),
+    _hoisted_8,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CSpinner, { color: "primary" }),
+      createVNode(_component_CSpinner, { color: "secondary" }),
+      createVNode(_component_CSpinner, { color: "success" }),
+      createVNode(_component_CSpinner, { color: "danger" }),
+      createVNode(_component_CSpinner, { color: "warning" }),
+      createVNode(_component_CSpinner, { color: "info" }),
+      createVNode(_component_CSpinner, { color: "light" }),
+      createVNode(_component_CSpinner, { color: "dark" })
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_15, [
+      createVNode(_component_CSpinner, { variant: "grow" })
+    ]),
+    _hoisted_16,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CSpinner, {
+        color: "primary",
+        variant: "grow"
+      }),
+      createVNode(_component_CSpinner, {
+        color: "secondary",
+        variant: "grow"
+      }),
+      createVNode(_component_CSpinner, {
+        color: "success",
+        variant: "grow"
+      }),
+      createVNode(_component_CSpinner, {
+        color: "danger",
+        variant: "grow"
+      }),
+      createVNode(_component_CSpinner, {
+        color: "warning",
+        variant: "grow"
+      }),
+      createVNode(_component_CSpinner, {
+        color: "info",
+        variant: "grow"
+      }),
+      createVNode(_component_CSpinner, {
+        color: "light",
+        variant: "grow"
+      }),
+      createVNode(_component_CSpinner, {
+        color: "dark",
+        variant: "grow"
+      })
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_22, [
+      createVNode(_component_CSpinner, { size: "sm" }),
+      createVNode(_component_CSpinner, {
+        size: "sm",
+        variant: "grow"
+      })
+    ]),
+    _hoisted_23,
+    createBaseVNode("div", _hoisted_26, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        disabled: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CSpinner, {
+            as: "span",
+            size: "sm",
+            "aria-hidden": "true"
+          })
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        disabled: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CSpinner, {
+            as: "span",
+            size: "sm",
+            "aria-hidden": "true"
+          }),
+          createTextVNode(" Loading... ")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_27,
+    createBaseVNode("div", _hoisted_28, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        disabled: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CSpinner, {
+            as: "span",
+            size: "sm",
+            variant: "grow",
+            "aria-hidden": "true"
+          })
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        disabled: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CSpinner, {
+            as: "span",
+            size: "sm",
+            variant: "grow",
+            "aria-hidden": "true"
+          }),
+          createTextVNode(" Loading... ")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_29,
+    createVNode(_component_ScssDocs, {
+      file: "_spinners.scss",
+      capture: "spinner-border-css-vars"
+    }),
+    _hoisted_34,
+    createVNode(_component_ScssDocs, {
+      file: "_spinners.scss",
+      capture: "spinner-grow-css-vars"
+    }),
+    _hoisted_35,
+    createVNode(_component_ScssDocs, {
+      file: "_spinners.scss",
+      capture: "spinner-border-sm-css-vars"
+    }),
+    _hoisted_36,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "spinner-variables"
+    }),
+    _hoisted_39
+  ]);
+}
+const spinner_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "spinner.html.vue"]]);
+const data = JSON.parse('{"path":"/components/spinner.html","title":"Vue Spinner Component","lang":"en-US","frontmatter":{"title":"Vue Spinner Component","name":"Spinner","description":"Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.","other_frameworks":"spinner","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/spinner.html"}]]},"headers":[{"level":2,"title":"About","slug":"about","link":"#about","children":[]},{"level":2,"title":"Border spinner","slug":"border-spinner","link":"#border-spinner","children":[]},{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[{"level":3,"title":"Colors","slug":"colors","link":"#colors","children":[]}]},{"level":2,"title":"Growing spinner","slug":"growing-spinner","link":"#growing-spinner","children":[]},{"level":2,"title":"Size","slug":"size","link":"#size","children":[]},{"level":2,"title":"Buttons","slug":"buttons","link":"#buttons","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]}]}],"filePathRelative":"components/spinner.md"}');
+export {
+  spinner_html as comp,
+  data
+};
diff --git a/vue/docs/assets/spinner.html-DqVQR-ZV.js b/vue/docs/assets/spinner.html-DqVQR-ZV.js
deleted file mode 100644
index da1f6edb92f..00000000000
--- a/vue/docs/assets/spinner.html-DqVQR-ZV.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about" aria-hidden="true">#</a></h2><p>CoreUI &quot;spinners&quot; can be used to show the loading state in your projects. They&#39;re built only with HTML and CSS, meaning you don&#39;t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p><p>For accessibility purposes, each loader here includes <code>role=&quot;status&quot;</code> and a nested <code>&lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;</code>.</p><h2 id="border-spinner" tabindex="-1">Border spinner <a class="anchor-link" href="#border-spinner" aria-hidden="true">#</a></h2><p>Use the border spinners for a lightweight loading indicator.</p><h2 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage" aria-hidden="true">#</a></h2>', 6);
-const _hoisted_7 = { class: "docs-example rounded-top p-4" };
-const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="colors" tabindex="-1">Colors <a class="anchor-link" href="#colors" aria-hidden="true">#</a></h3><p>The border spinner uses <code>currentColor</code> for its <code>border-color</code>. You can use any of our text color utilities on the standard spinner.</p>', 3);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="growing-spinner" tabindex="-1">Growing spinner <a class="anchor-link" href="#growing-spinner" aria-hidden="true">#</a></h2><p>If you don&#39;t fancy a border spinner, switch to the grow spinner. While it doesn&#39;t technically spin, it does repeatedly grow!</p>', 3);
-const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>Once again, this spinner is built with <code>currentColor</code>, so you can easily change its appearance. Here it is in blue, along with the supported variants.</p>', 2);
-const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="size" tabindex="-1">Size <a class="anchor-link" href="#size" aria-hidden="true">#</a></h2><p>Add <code>size=&quot;sm&quot;</code>property` to make a smaller spinner that can quickly be used within other components.</p>', 3);
-const _hoisted_22 = { class: "docs-example rounded-top p-4" };
-const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="buttons" tabindex="-1">Buttons <a class="anchor-link" href="#buttons" aria-hidden="true">#</a></h2><p>Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</p>', 3);
-const _hoisted_26 = { class: "docs-example rounded-top p-4" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  Loading...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CSpinner</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  Loading...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue spinners use local CSS variables on <code>.spinner-border</code> and <code>.spinner-grow</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p><p>Border spinner variables:</p>', 5);
-const _hoisted_34 = /* @__PURE__ */ createBaseVNode("p", null, "Growing spinner variables:", -1);
-const _hoisted_35 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the "),
-  /* @__PURE__ */ createBaseVNode("code", null, ".spinner-border-sm"),
-  /* @__PURE__ */ createTextVNode(" class does the following:")
-], -1);
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CSpinner <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CSpinner<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CSpinner <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CSpinner <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/spinner/CSpinner&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component small.</td><td>string</td><td><code>&#39;sm&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;border&#39;</code>, <code>&#39;grow&#39;</code></td><td>&#39;border&#39;</td></tr><tr><td><strong>visually-hidden-label</strong></td><td>Set visually hidden label for accessibility purposes.</td><td>string</td><td>-</td><td>&#39;Loading...&#39;</td></tr></tbody></table>', 5);
-function _sfc_render(_ctx, _cache) {
-  const _component_CSpinner = resolveComponent("CSpinner");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_7, [
-      createVNode(_component_CSpinner)
-    ]),
-    _hoisted_8,
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CSpinner, { color: "primary" }),
-      createVNode(_component_CSpinner, { color: "secondary" }),
-      createVNode(_component_CSpinner, { color: "success" }),
-      createVNode(_component_CSpinner, { color: "danger" }),
-      createVNode(_component_CSpinner, { color: "warning" }),
-      createVNode(_component_CSpinner, { color: "info" }),
-      createVNode(_component_CSpinner, { color: "light" }),
-      createVNode(_component_CSpinner, { color: "dark" })
-    ]),
-    _hoisted_12,
-    createBaseVNode("div", _hoisted_15, [
-      createVNode(_component_CSpinner, { variant: "grow" })
-    ]),
-    _hoisted_16,
-    createBaseVNode("div", _hoisted_18, [
-      createVNode(_component_CSpinner, {
-        color: "primary",
-        variant: "grow"
-      }),
-      createVNode(_component_CSpinner, {
-        color: "secondary",
-        variant: "grow"
-      }),
-      createVNode(_component_CSpinner, {
-        color: "success",
-        variant: "grow"
-      }),
-      createVNode(_component_CSpinner, {
-        color: "danger",
-        variant: "grow"
-      }),
-      createVNode(_component_CSpinner, {
-        color: "warning",
-        variant: "grow"
-      }),
-      createVNode(_component_CSpinner, {
-        color: "info",
-        variant: "grow"
-      }),
-      createVNode(_component_CSpinner, {
-        color: "light",
-        variant: "grow"
-      }),
-      createVNode(_component_CSpinner, {
-        color: "dark",
-        variant: "grow"
-      })
-    ]),
-    _hoisted_19,
-    createBaseVNode("div", _hoisted_22, [
-      createVNode(_component_CSpinner, { size: "sm" }),
-      createVNode(_component_CSpinner, {
-        size: "sm",
-        variant: "grow"
-      })
-    ]),
-    _hoisted_23,
-    createBaseVNode("div", _hoisted_26, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        disabled: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CSpinner, {
-            as: "span",
-            size: "sm",
-            "aria-hidden": "true"
-          })
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CButton, {
-        color: "primary",
-        disabled: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CSpinner, {
-            as: "span",
-            size: "sm",
-            "aria-hidden": "true"
-          }),
-          createTextVNode(" Loading... ")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_27,
-    createBaseVNode("div", _hoisted_28, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        disabled: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CSpinner, {
-            as: "span",
-            size: "sm",
-            variant: "grow",
-            "aria-hidden": "true"
-          })
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CButton, {
-        color: "primary",
-        disabled: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CSpinner, {
-            as: "span",
-            size: "sm",
-            variant: "grow",
-            "aria-hidden": "true"
-          }),
-          createTextVNode(" Loading... ")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_29,
-    createVNode(_component_ScssDocs, {
-      file: "_spinners.scss",
-      capture: "spinner-border-css-vars"
-    }),
-    _hoisted_34,
-    createVNode(_component_ScssDocs, {
-      file: "_spinners.scss",
-      capture: "spinner-grow-css-vars"
-    }),
-    _hoisted_35,
-    createVNode(_component_ScssDocs, {
-      file: "_spinners.scss",
-      capture: "spinner-border-sm-css-vars"
-    }),
-    _hoisted_36,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "spinner-variables"
-    }),
-    _hoisted_39
-  ]);
-}
-const spinner_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "spinner.html.vue"]]);
-const data = JSON.parse('{"path":"/components/spinner.html","title":"Vue Spinner Component","lang":"en-US","frontmatter":{"title":"Vue Spinner Component","name":"Spinner","description":"Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.","other_frameworks":"spinner","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/spinner.html"}]]},"headers":[{"level":2,"title":"About","slug":"about","link":"#about","children":[]},{"level":2,"title":"Border spinner","slug":"border-spinner","link":"#border-spinner","children":[]},{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[{"level":3,"title":"Colors","slug":"colors","link":"#colors","children":[]}]},{"level":2,"title":"Growing spinner","slug":"growing-spinner","link":"#growing-spinner","children":[]},{"level":2,"title":"Size","slug":"size","link":"#size","children":[]},{"level":2,"title":"Buttons","slug":"buttons","link":"#buttons","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]}]}],"filePathRelative":"components/spinner.md"}');
-export {
-  spinner_html as comp,
-  data
-};
diff --git a/vue/docs/assets/style-DvqrglCp.css b/vue/docs/assets/style-CM2j93lE.css
similarity index 99%
rename from vue/docs/assets/style-DvqrglCp.css
rename to vue/docs/assets/style-CM2j93lE.css
index 6c153bc7a0a..ef22fb86129 100644
--- a/vue/docs/assets/style-DvqrglCp.css
+++ b/vue/docs/assets/style-CM2j93lE.css
@@ -1,9 +1,9 @@
 /*!
- * CoreUI PRO  v5.2.0 (https://coreui.io)
+ * CoreUI PRO  v5.3.0 (https://coreui.io)
  * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * License (https://coreui.io/pro/license/)
  */
-/*! @docsearch/css 3.6.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
+/*! @docsearch/css 3.6.1 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
 :root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}
 html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,0.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,0.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 rgba(3,4,9,0.30196078431372547);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}
 .DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}
@@ -636,8 +636,8 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: 0.5rem;
-  font-size: calc(1.275rem + 0.3vw);
   line-height: inherit;
+  font-size: calc(1.275rem + 0.3vw);
 }
 @media (min-width: 1200px) {
   legend {
@@ -700,9 +700,9 @@ progress {
   font-weight: 300;
 }
 .display-1 {
-  font-size: calc(1.625rem + 4.5vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.625rem + 4.5vw);
 }
 @media (min-width: 1200px) {
   .display-1 {
@@ -710,9 +710,9 @@ progress {
   }
 }
 .display-2 {
-  font-size: calc(1.575rem + 3.9vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.575rem + 3.9vw);
 }
 @media (min-width: 1200px) {
   .display-2 {
@@ -720,9 +720,9 @@ progress {
   }
 }
 .display-3 {
-  font-size: calc(1.525rem + 3.3vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.525rem + 3.3vw);
 }
 @media (min-width: 1200px) {
   .display-3 {
@@ -730,9 +730,9 @@ progress {
   }
 }
 .display-4 {
-  font-size: calc(1.475rem + 2.7vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.475rem + 2.7vw);
 }
 @media (min-width: 1200px) {
   .display-4 {
@@ -740,9 +740,9 @@ progress {
   }
 }
 .display-5 {
-  font-size: calc(1.425rem + 2.1vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.425rem + 2.1vw);
 }
 @media (min-width: 1200px) {
   .display-5 {
@@ -750,9 +750,9 @@ progress {
   }
 }
 .display-6 {
-  font-size: calc(1.375rem + 1.5vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.375rem + 1.5vw);
 }
 @media (min-width: 1200px) {
   .display-6 {
@@ -6197,8 +6197,8 @@ select.form-multi-select {
   pointer-events: none;
 }
 .modal.fade .modal-dialog {
-  transition: transform 0.3s ease-out;
   transform: translate(0, -50px);
+  transition: transform 0.3s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .modal.fade .modal-dialog {
@@ -7477,96 +7477,81 @@ select.form-multi-select {
   }
 }
 .avatar {
+  --cui-avatar-width: 2rem;
+  --cui-avatar-height: 2rem;
+  --cui-avatar-font-size: 0.8rem;
+  --cui-avatar-border-radius: 50em;
+  --cui-avatar-status-width: 0.5rem;
+  --cui-avatar-status-height: 0.5rem;
+  --cui-avatar-status-border-radius: 50em;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--cui-avatar-width);
+  height: var(--cui-avatar-height);
+  font-size: var(--cui-avatar-font-size);
   vertical-align: middle;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-border-radius);
   transition: margin 0.15s;
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.8rem;
 }
 @media (prefers-reduced-motion: reduce) {
   .avatar {
     transition: none;
   }
 }
-.avatar .avatar-status {
-  width: 0.5333333333rem;
-  height: 0.5333333333rem;
-}
 .avatar-img {
   width: 100%;
   height: auto;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-border-radius);
 }
 .avatar-status {
   position: absolute;
   right: 0;
   bottom: 0;
   display: block;
+  width: var(--cui-avatar-status-width);
+  height: var(--cui-avatar-status-height);
   border: 1px solid #fff;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-status-border-radius);
 }
 .avatar-sm {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.6rem;
-}
-.avatar-sm .avatar-status {
-  width: 0.4rem;
-  height: 0.4rem;
+  --cui-avatar-width: 1.5rem;
+  --cui-avatar-height: 1.5rem;
+  --cui-avatar-font-size: 0.6rem;
+  --cui-avatar-status-width: 0.4rem;
+  --cui-avatar-status-height: 0.4rem;
 }
 .avatar-md {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 1rem;
-}
-.avatar-md .avatar-status {
-  width: 0.6666666667rem;
-  height: 0.6666666667rem;
+  --cui-avatar-width: 2.5rem;
+  --cui-avatar-height: 2.5rem;
+  --cui-avatar-font-size: 1rem;
+  --cui-avatar-status-width: 0.7rem;
+  --cui-avatar-status-height: 0.7rem;
 }
 .avatar-lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.2rem;
-}
-.avatar-lg .avatar-status {
-  width: 0.8rem;
-  height: 0.8rem;
+  --cui-avatar-width: 3rem;
+  --cui-avatar-height: 3rem;
+  --cui-avatar-font-size: 1.2rem;
+  --cui-avatar-status-width: 0.8rem;
+  --cui-avatar-status-height: 0.8rem;
 }
 .avatar-xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.6rem;
-}
-.avatar-xl .avatar-status {
-  width: 1.0666666667rem;
-  height: 1.0666666667rem;
+  --cui-avatar-width: 4rem;
+  --cui-avatar-height: 4rem;
+  --cui-avatar-font-size: 1.6rem;
+  --cui-avatar-status-width: 1rem;
+  --cui-avatar-status-height: 1rem;
 }
 .avatars-stack {
   display: flex;
 }
 .avatars-stack .avatar {
-  margin-right: -0.8rem;
+  margin-right: calc(-0.4 * var(--cui-avatar-width));
 }
 .avatars-stack .avatar:hover {
   margin-right: 0;
 }
-.avatars-stack .avatar-sm {
-  margin-right: -0.6rem;
-}
-.avatars-stack .avatar-md {
-  margin-right: -1rem;
-}
-.avatars-stack .avatar-lg {
-  margin-right: -1.2rem;
-}
-.avatars-stack .avatar-xl {
-  margin-right: -1.6rem;
-}
 .calendar {
   --cui-calendar-table-margin: 0.5rem;
   --cui-calendar-table-cell-size: 2.75rem;
@@ -14633,6 +14618,9 @@ h2:hover .anchor-link, .h2:hover .anchor-link, h3:hover .anchor-link, .h3:hover
 .docs-example > img + img {
   margin-left: 0.5rem;
 }
+.docs-example > .avatar + .avatar {
+  margin-left: 0.25rem;
+}
 .docs-example > .badge + .badge {
   margin-left: 0.25rem;
 }
@@ -16264,7 +16252,7 @@ div[dir=rtl] .time-picker-lg {
   --cui-time-picker-cleaner-icon-size: 1.25rem;
   --cui-time-picker-indicator-icon-size: 1.25rem;
 }/*!
- * CoreUI PRO  v5.2.0 (https://coreui.io)
+ * CoreUI PRO  v5.3.0 (https://coreui.io)
  * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * License (https://coreui.io/pro/license/)
  */
@@ -16809,8 +16797,8 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: 0.5rem;
-  font-size: calc(1.275rem + 0.3vw);
   line-height: inherit;
+  font-size: calc(1.275rem + 0.3vw);
 }
 @media (min-width: 1200px) {
   legend {
@@ -16873,9 +16861,9 @@ progress {
   font-weight: 300;
 }
 .display-1 {
-  font-size: calc(1.625rem + 4.5vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.625rem + 4.5vw);
 }
 @media (min-width: 1200px) {
   .display-1 {
@@ -16883,9 +16871,9 @@ progress {
   }
 }
 .display-2 {
-  font-size: calc(1.575rem + 3.9vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.575rem + 3.9vw);
 }
 @media (min-width: 1200px) {
   .display-2 {
@@ -16893,9 +16881,9 @@ progress {
   }
 }
 .display-3 {
-  font-size: calc(1.525rem + 3.3vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.525rem + 3.3vw);
 }
 @media (min-width: 1200px) {
   .display-3 {
@@ -16903,9 +16891,9 @@ progress {
   }
 }
 .display-4 {
-  font-size: calc(1.475rem + 2.7vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.475rem + 2.7vw);
 }
 @media (min-width: 1200px) {
   .display-4 {
@@ -16913,9 +16901,9 @@ progress {
   }
 }
 .display-5 {
-  font-size: calc(1.425rem + 2.1vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.425rem + 2.1vw);
 }
 @media (min-width: 1200px) {
   .display-5 {
@@ -16923,9 +16911,9 @@ progress {
   }
 }
 .display-6 {
-  font-size: calc(1.375rem + 1.5vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.375rem + 1.5vw);
 }
 @media (min-width: 1200px) {
   .display-6 {
@@ -22370,8 +22358,8 @@ select.form-multi-select {
   pointer-events: none;
 }
 .modal.fade .modal-dialog {
-  transition: transform 0.3s ease-out;
   transform: translate(0, -50px);
+  transition: transform 0.3s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .modal.fade .modal-dialog {
@@ -23650,96 +23638,81 @@ select.form-multi-select {
   }
 }
 .avatar {
+  --cui-avatar-width: 2rem;
+  --cui-avatar-height: 2rem;
+  --cui-avatar-font-size: 0.8rem;
+  --cui-avatar-border-radius: 50em;
+  --cui-avatar-status-width: 0.5rem;
+  --cui-avatar-status-height: 0.5rem;
+  --cui-avatar-status-border-radius: 50em;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--cui-avatar-width);
+  height: var(--cui-avatar-height);
+  font-size: var(--cui-avatar-font-size);
   vertical-align: middle;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-border-radius);
   transition: margin 0.15s;
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.8rem;
 }
 @media (prefers-reduced-motion: reduce) {
   .avatar {
     transition: none;
   }
 }
-.avatar .avatar-status {
-  width: 0.5333333333rem;
-  height: 0.5333333333rem;
-}
 .avatar-img {
   width: 100%;
   height: auto;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-border-radius);
 }
 .avatar-status {
   position: absolute;
   right: 0;
   bottom: 0;
   display: block;
+  width: var(--cui-avatar-status-width);
+  height: var(--cui-avatar-status-height);
   border: 1px solid #fff;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-status-border-radius);
 }
 .avatar-sm {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.6rem;
-}
-.avatar-sm .avatar-status {
-  width: 0.4rem;
-  height: 0.4rem;
+  --cui-avatar-width: 1.5rem;
+  --cui-avatar-height: 1.5rem;
+  --cui-avatar-font-size: 0.6rem;
+  --cui-avatar-status-width: 0.4rem;
+  --cui-avatar-status-height: 0.4rem;
 }
 .avatar-md {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 1rem;
-}
-.avatar-md .avatar-status {
-  width: 0.6666666667rem;
-  height: 0.6666666667rem;
+  --cui-avatar-width: 2.5rem;
+  --cui-avatar-height: 2.5rem;
+  --cui-avatar-font-size: 1rem;
+  --cui-avatar-status-width: 0.7rem;
+  --cui-avatar-status-height: 0.7rem;
 }
 .avatar-lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.2rem;
-}
-.avatar-lg .avatar-status {
-  width: 0.8rem;
-  height: 0.8rem;
+  --cui-avatar-width: 3rem;
+  --cui-avatar-height: 3rem;
+  --cui-avatar-font-size: 1.2rem;
+  --cui-avatar-status-width: 0.8rem;
+  --cui-avatar-status-height: 0.8rem;
 }
 .avatar-xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.6rem;
-}
-.avatar-xl .avatar-status {
-  width: 1.0666666667rem;
-  height: 1.0666666667rem;
+  --cui-avatar-width: 4rem;
+  --cui-avatar-height: 4rem;
+  --cui-avatar-font-size: 1.6rem;
+  --cui-avatar-status-width: 1rem;
+  --cui-avatar-status-height: 1rem;
 }
 .avatars-stack {
   display: flex;
 }
 .avatars-stack .avatar {
-  margin-right: -0.8rem;
+  margin-right: calc(-0.4 * var(--cui-avatar-width));
 }
 .avatars-stack .avatar:hover {
   margin-right: 0;
 }
-.avatars-stack .avatar-sm {
-  margin-right: -0.6rem;
-}
-.avatars-stack .avatar-md {
-  margin-right: -1rem;
-}
-.avatars-stack .avatar-lg {
-  margin-right: -1.2rem;
-}
-.avatars-stack .avatar-xl {
-  margin-right: -1.6rem;
-}
 .calendar {
   --cui-calendar-table-margin: 0.5rem;
   --cui-calendar-table-cell-size: 2.75rem;
diff --git a/vue/docs/assets/switch.html-BW-dO3so.js b/vue/docs/assets/switch.html-CzcyoMGb.js
similarity index 53%
rename from vue/docs/assets/switch.html-BW-dO3so.js
rename to vue/docs/assets/switch.html-CzcyoMGb.js
index 8dda2810f55..7e56cec8ea5 100644
--- a/vue/docs/assets/switch.html-BW-dO3so.js
+++ b/vue/docs/assets/switch.html-CzcyoMGb.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "about",
@@ -25,12 +25,12 @@ const _hoisted_4 = /* @__PURE__ */ createBaseVNode("h2", {
   }, "#")
 ], -1);
 const _hoisted_5 = { class: "docs-example rounded-top p-4" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Larger or smaller react switches? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;xl&quot;</code> for additional sizes.</p>', 3);
+const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckChecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled checked switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckCheckedDisabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Larger or smaller react switches? Add <code>size=&quot;lg&quot;</code> or <code>size=&quot;xl&quot;</code> for additional sizes.</p>', 3);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Extra large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultXL<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reverse" tabindex="-1">Reverse <a class="anchor-link" href="#reverse" aria-hidden="true">#</a></h2><p>Put your switches on the opposite side by adding <code>reverse</code> boolean property.</p>', 3);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Default switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefault<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultLg<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Extra large switch checkbox input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSwitchCheckDefaultXL<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reverse" tabindex="-1">Reverse <a class="anchor-link" href="#reverse" aria-hidden="true">#</a></h2><p>Put your switches on the opposite side by adding <code>reverse</code> boolean property.</p>', 3);
 const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseFormSwitch1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reverse switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseFormSwitch2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled reverse switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSwitch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSwitch <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSwitch&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component large or extra large. Works only with <code>switch</code>.</td><td>string</td><td><code>&#39;lg&#39; | &#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
+const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseFormSwitch1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Reverse switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSwitch</span> <span class="token attr-name">reverse</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseFormSwitch2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled reverse switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormSwitch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormSwitch <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormSwitch&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong></td><td>The element represents a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>boolean|string</td><td>-</td><td>-</td></tr><tr><td><strong>reverse</strong> <br><div class="badge bg-primary">4.8.0+</div></td><td>Put checkboxes or radios on the opposite side.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>size</strong></td><td>Size the component large or extra large. Works only with <code>switch</code>.</td><td>string</td><td><code>&#39;lg&#39; | &#39;xl&#39;</code></td><td>-</td></tr><tr><td><strong>type</strong></td><td>Specifies the type of component.</td><td>string</td><td><code>&#39;checkbox&#39;</code>, <code>&#39;radio&#39;</code></td><td>&#39;checkbox&#39;</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the checked value has been changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s a change event.</td><td></td></tr></tbody></table>', 7);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormSwitch = resolveComponent("CFormSwitch");
   const _component_ScssDocs = resolveComponent("ScssDocs");
diff --git a/vue/docs/assets/table.html-Blmdpj5L.js b/vue/docs/assets/table.html-BKhXilE_.js
similarity index 66%
rename from vue/docs/assets/table.html-Blmdpj5L.js
rename to vue/docs/assets/table.html-BKhXilE_.js
index 7cdad75651f..d4481779e19 100644
--- a/vue/docs/assets/table.html-Blmdpj5L.js
+++ b/vue/docs/assets/table.html-BKhXilE_.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {
   data: () => {
     return {
@@ -185,41 +185,41 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("-based tables look in CoreUI.")
 ], -1);
 const _hoisted_4 = { class: "docs-example rounded p-4" };
-const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<p>In version <strong>4.5.0</strong> we introduced a new way to create a table, similarly to our <a href="https://coreui.io/vue/docs/components/smart-table.html" target="_blank" rel="noopener noreferrer">Smart Table component</a>.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;#&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@mdo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@fat&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Larry the Bird&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@twitter&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also put all table components together manually as hitherto.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="variants" tabindex="-1">Variants <a class="anchor-link" href="#variants" aria-hidden="true">#</a></h2><p>Use contextual classes to color tables, table rows or individual cells.</p>', 6);
+const _hoisted_5 = /* @__PURE__ */ createStaticVNode('<p>In version <strong>4.5.0</strong> we introduced a new way to create a table, similarly to our <a href="https://coreui.io/vue/docs/components/smart-table.html" target="_blank" rel="noopener noreferrer">Smart Table component</a>.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;#&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@mdo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@fat&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Larry the Bird&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@twitter&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also put all table components together manually as hitherto.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="variants" tabindex="-1">Variants <a class="anchor-link" href="#variants" aria-hidden="true">#</a></h2><p>Use contextual classes to color tables, table rows or individual cells.</p>', 6);
 const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsVariantExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsVariantExample<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsVariantExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsVariantExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Default&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Primary&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;primary&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Secondary&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;secondary&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Success&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;success&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Danger&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;danger&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Warning&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;warning&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Info&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;info&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Light&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Dark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;dark&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="accented-tables" tabindex="-1">Accented tables <a class="anchor-link" href="#accented-tables" aria-hidden="true">#</a></h2><h3 id="striped-rows" tabindex="-1">Striped rows <a class="anchor-link" href="#striped-rows" aria-hidden="true">#</a></h3><p>Use <code>striped</code> property to add zebra-striping to any table row within the <code>&lt;CTableBody&gt;</code>.</p>', 6);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Light<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsVariantExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsVariantExample<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsVariantExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsVariantExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Default&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Primary&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;primary&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Secondary&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;secondary&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Success&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;success&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Danger&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;danger&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Warning&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;warning&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Info&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;info&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Light&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;light&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Dark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;Cell&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&#39;dark&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="accented-tables" tabindex="-1">Accented tables <a class="anchor-link" href="#accented-tables" aria-hidden="true">#</a></h2><h3 id="striped-rows" tabindex="-1">Striped rows <a class="anchor-link" href="#striped-rows" aria-hidden="true">#</a></h3><p>Use <code>striped</code> property to add zebra-striping to any table row within the <code>&lt;CTableBody&gt;</code>.</p>', 6);
 const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="striped-columns" tabindex="-1">Striped columns <a class="anchor-link" href="#striped-columns" aria-hidden="true">#</a></h3><p>Use <code>stripedColumns</code> boolean property to add zebra-striping to any table column.</p>', 3);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="striped-columns" tabindex="-1">Striped columns <a class="anchor-link" href="#striped-columns" aria-hidden="true">#</a></h3><p>Use <code>stripedColumns</code> boolean property to add zebra-striping to any table column.</p>', 3);
 const _hoisted_22 = { class: "docs-example rounded-top p-4" };
-const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">stripedColumns</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These classes can also be added to table variants:</p>', 2);
+const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">stripedColumns</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These classes can also be added to table variants:</p>', 2);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">stripedColumns</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">stripedColumns</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_29 = { class: "docs-example rounded-top p-4" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_31 = { class: "docs-example rounded-top p-4" };
-const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="hoverable-rows" tabindex="-1">Hoverable rows <a class="anchor-link" href="#hoverable-rows" aria-hidden="true">#</a></h3><p>Use <code>hover</code> property to enable a hover state on table rows within a <code>&lt;CTableBody&gt;</code>.</p>', 3);
+const _hoisted_32 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="hoverable-rows" tabindex="-1">Hoverable rows <a class="anchor-link" href="#hoverable-rows" aria-hidden="true">#</a></h3><p>Use <code>hover</code> property to enable a hover state on table rows within a <code>&lt;CTableBody&gt;</code>.</p>', 3);
 const _hoisted_35 = { class: "docs-example rounded-top p-4" };
-const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">hover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">hover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_37 = { class: "docs-example rounded-top p-4" };
-const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These hoverable rows can also be combined with the striped variant:</p>', 2);
+const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>These hoverable rows can also be combined with the striped variant:</p>', 2);
 const _hoisted_40 = { class: "docs-example rounded-top p-4" };
-const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">striped</span> <span class="token attr-name">hover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="active-tables" tabindex="-1">Active tables <a class="anchor-link" href="#active-tables" aria-hidden="true">#</a></h3><p>Highlight a table row or cell by adding a <code>active</code> property.</p>', 3);
+const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">striped</span> <span class="token attr-name">hover</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="active-tables" tabindex="-1">Active tables <a class="anchor-link" href="#active-tables" aria-hidden="true">#</a></h3><p>Highlight a table row or cell by adding a <code>active</code> property.</p>', 3);
 const _hoisted_44 = { class: "docs-example rounded p-4" };
-const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<p>As mentioned before since version <strong>4.5.0</strong> we have two ways to generate tables, also with custom properties for rows, and cells.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;#&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@mdo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@fat&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Larry the Bird&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@twitter&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 3);
+const _hoisted_45 = /* @__PURE__ */ createStaticVNode('<p>As mentioned before since version <strong>4.5.0</strong> we have two ways to generate tables, also with custom properties for rows, and cells.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;#&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@mdo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@fat&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Larry the Bird&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@twitter&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 3);
 const _hoisted_48 = { class: "docs-example rounded-top p-4" };
-const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;#&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@mdo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@fat&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Larry the Bird&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@twitter&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="table-borders" tabindex="-1">Table borders <a class="anchor-link" href="#table-borders" aria-hidden="true">#</a></h2><h3 id="bordered-tables" tabindex="-1">Bordered tables <a class="anchor-link" href="#bordered-tables" aria-hidden="true">#</a></h3><p>Add <code>bordered</code> property for borders on all sides of the table and cells.</p>', 4);
+const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columnsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsActiveTableExample<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columnsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;#&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;class&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_1&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;heading_2&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Heading&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;col&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">itemsActiveTableExample</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@mdo&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_props</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_1</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@fat&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;Larry the Bird&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">heading_2</span><span class="token operator">:</span> <span class="token string">&#39;@twitter&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">_cellProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;row&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">colSpan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="table-borders" tabindex="-1">Table borders <a class="anchor-link" href="#table-borders" aria-hidden="true">#</a></h2><h3 id="bordered-tables" tabindex="-1">Bordered tables <a class="anchor-link" href="#bordered-tables" aria-hidden="true">#</a></h3><p>Add <code>bordered</code> property for borders on all sides of the table and cells.</p>', 4);
 const _hoisted_53 = { class: "docs-example rounded-top p-4" };
-const _hoisted_54 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">bordered</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><a href="https://coreui.io/docs/4.0/utilities/borders#border-color" target="_blank" rel="noopener noreferrer">Border color utilities</a> can be added to change colors:</p>', 2);
+const _hoisted_54 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">bordered</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><a href="https://coreui.io/docs/4.0/utilities/borders#border-color" target="_blank" rel="noopener noreferrer">Border color utilities</a> can be added to change colors:</p>', 2);
 const _hoisted_56 = { class: "docs-example rounded-top p-4" };
-const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">bordered</span> <span class="token attr-name">border-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tables-without-borders" tabindex="-1">Tables without borders <a class="anchor-link" href="#tables-without-borders" aria-hidden="true">#</a></h3><p>Add <code>borderless</code> property for a table without borders.</p>', 3);
+const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">bordered</span> <span class="token attr-name">border-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="tables-without-borders" tabindex="-1">Tables without borders <a class="anchor-link" href="#tables-without-borders" aria-hidden="true">#</a></h3><p>Add <code>borderless</code> property for a table without borders.</p>', 3);
 const _hoisted_60 = { class: "docs-example rounded-top p-4" };
-const _hoisted_61 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">borderless</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_61 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">borderless</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_62 = { class: "docs-example rounded-top p-4" };
-const _hoisted_63 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">borderless</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="small-tables" tabindex="-1">Small tables <a class="anchor-link" href="#small-tables" aria-hidden="true">#</a></h2><p>Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact by cutting all cell <code>padding</code> in half.</p>', 3);
+const _hoisted_63 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">borderless</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="small-tables" tabindex="-1">Small tables <a class="anchor-link" href="#small-tables" aria-hidden="true">#</a></h2><p>Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact by cutting all cell <code>padding</code> in half.</p>', 3);
 const _hoisted_66 = { class: "docs-example rounded-top p-4" };
-const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vertical-alignment" tabindex="-1">Vertical alignment <a class="anchor-link" href="#vertical-alignment" aria-hidden="true">#</a></h2><p>Table cells of <code>&lt;CTableHead&gt;</code> are always vertical aligned to the bottom. Table cells in <code>&lt;CTableBody&gt;</code> inherit their alignment from <code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align property to re-align where needed.</p>', 3);
+const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vertical-alignment" tabindex="-1">Vertical alignment <a class="anchor-link" href="#vertical-alignment" aria-hidden="true">#</a></h2><p>Table cells of <code>&lt;CTableHead&gt;</code> are always vertical aligned to the bottom. Table cells in <code>&lt;CTableBody&gt;</code> inherit their alignment from <code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align property to re-align where needed.</p>', 3);
 const _hoisted_70 = { class: "docs-example rounded-top p-4" };
 const _hoisted_71 = /* @__PURE__ */ createBaseVNode("code", null, "vertical-align: middle;", -1);
 const _hoisted_72 = /* @__PURE__ */ createBaseVNode("code", null, "vertical-align: middle;", -1);
@@ -229,31 +229,31 @@ const _hoisted_75 = /* @__PURE__ */ createBaseVNode("code", null, "vertical-alig
 const _hoisted_76 = /* @__PURE__ */ createBaseVNode("code", null, "vertical-align: bottom;", -1);
 const _hoisted_77 = /* @__PURE__ */ createBaseVNode("code", null, "vertical-align: middle;", -1);
 const _hoisted_78 = /* @__PURE__ */ createBaseVNode("code", null, "vertical-align: middle;", -1);
-const _hoisted_79 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">reponsive</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: bottom;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: bottom;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: bottom;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This cell is aligned to the top.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="nesting" tabindex="-1">Nesting <a class="anchor-link" href="#nesting" aria-hidden="true">#</a></h2><p>Border styles, active styles, and table variants are not inherited by nested tables.</p>', 3);
+const _hoisted_79 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">reponsive</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-25<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: bottom;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: bottom;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: bottom;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This cell inherits <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>vertical-align: middle;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> from the table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This cell is aligned to the top.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="nesting" tabindex="-1">Nesting <a class="anchor-link" href="#nesting" aria-hidden="true">#</a></h2><p>Border styles, active styles, and table variants are not inherited by nested tables.</p>', 3);
 const _hoisted_82 = { class: "docs-example rounded-top p-4" };
-const _hoisted_83 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="anatomy" tabindex="-1">Anatomy <a class="anchor-link" href="#anatomy" aria-hidden="true">#</a></h2><h3 id="table-head" tabindex="-1">Table head <a class="anchor-link" href="#table-head" aria-hidden="true">#</a></h3><p>Similar to tables and dark tables, use the modifier prop <code>color=&quot;light&quot;</code> or <code>color=&quot;dark&quot;</code> to make <code>&lt;CTableHead&gt;</code>s appear light or dark gray.</p>', 4);
+const _hoisted_83 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">striped</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Larry the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="anatomy" tabindex="-1">Anatomy <a class="anchor-link" href="#anatomy" aria-hidden="true">#</a></h2><h3 id="table-head" tabindex="-1">Table head <a class="anchor-link" href="#table-head" aria-hidden="true">#</a></h3><p>Similar to tables and dark tables, use the modifier prop <code>color=&quot;light&quot;</code> or <code>color=&quot;dark&quot;</code> to make <code>&lt;CTableHead&gt;</code>s appear light or dark gray.</p>', 4);
 const _hoisted_87 = { class: "docs-example rounded-top p-4" };
-const _hoisted_88 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you generate a table using the new method incorporated in version <strong>4.5.0</strong>, you have to use tableHeadProps property to pass properties to the table header component.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;light&#39; }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 3);
+const _hoisted_88 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you generate a table using the new method incorporated in version <strong>4.5.0</strong>, you have to use tableHeadProps property to pass properties to the table header component.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;light&#39; }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 3);
 const _hoisted_91 = { class: "docs-example rounded-top p-4" };
-const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Starting from version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;dark&#39; }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="table-foot" tabindex="-1">Table foot <a class="anchor-link" href="#table-foot" aria-hidden="true">#</a></h3>', 4);
+const _hoisted_92 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Starting from version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;dark&#39; }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="table-foot" tabindex="-1">Table foot <a class="anchor-link" href="#table-foot" aria-hidden="true">#</a></h3>', 4);
 const _hoisted_96 = { class: "docs-example rounded-top p-4" };
-const _hoisted_97 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Starting from version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:footer</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;dark&#39; }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="captions" tabindex="-1">Captions <a class="anchor-link" href="#captions" aria-hidden="true">#</a></h3><p>A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it&#39;s about and decide if they want to read it.</p>', 5);
+const _hoisted_97 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>light<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Starting from version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:footer</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tableHeadProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;dark&#39; }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token string">&#39;Footer&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="captions" tabindex="-1">Captions <a class="anchor-link" href="#captions" aria-hidden="true">#</a></h3><p>A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it&#39;s about and decide if they want to read it.</p>', 5);
 const _hoisted_102 = { class: "docs-example rounded-top p-4" };
-const _hoisted_103 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableCaption</span><span class="token punctuation">&gt;</span></span>List of users<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Starting from version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">caption</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>List of users<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with <code>caption=&quot;top&quot;</code>.</p>', 4);
+const _hoisted_103 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableCaption</span><span class="token punctuation">&gt;</span></span>List of users<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    ...</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Starting from version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">caption</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>List of users<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with <code>caption=&quot;top&quot;</code>.</p>', 4);
 const _hoisted_107 = { class: "docs-example rounded-top p-4" };
-const _hoisted_108 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">caption</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableCaption</span><span class="token punctuation">&gt;</span></span>List of users<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Larry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">captionTop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>List of users<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-tables" tabindex="-1">Responsive tables <a class="anchor-link" href="#responsive-tables" aria-hidden="true">#</a></h2><p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a <code>responsive</code> property. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code>responsive=&quot;{-sm|-md|-lg|-xl|-xxl}&quot;</code>.</p>', 5);
+const _hoisted_108 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">caption</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableCaption</span><span class="token punctuation">&gt;</span></span>List of users<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableCaption</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Class<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHead</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Otto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@mdo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Jacob<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Thornton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@fat<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableHeaderCell</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableHeaderCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>Larry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>the Bird<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span>@twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableDataCell</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTableBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Since version <strong>4.5.0</strong> also this way.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">captionTop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>List of users<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-tables" tabindex="-1">Responsive tables <a class="anchor-link" href="#responsive-tables" aria-hidden="true">#</a></h2><p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a <code>responsive</code> property. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code>responsive=&quot;{-sm|-md|-lg|-xl|-xxl}&quot;</code>.</p>', 5);
 const _hoisted_113 = { class: "docs-example rounded-top p-4" };
-const _hoisted_114 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_114 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_115 = { class: "docs-example rounded-top p-4" };
-const _hoisted_116 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_116 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_117 = { class: "docs-example rounded-top p-4" };
-const _hoisted_118 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_118 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_119 = { class: "docs-example rounded-top p-4" };
-const _hoisted_120 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_120 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_121 = { class: "docs-example rounded-top p-4" };
-const _hoisted_122 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_122 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_123 = { class: "docs-example rounded-top p-4" };
-const _hoisted_124 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctable" tabindex="-1">CTable <a class="anchor-link" href="#ctable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>border-color</strong></td><td>Sets the border color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>bordered</strong></td><td>Add borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>borderless</strong></td><td>Remove borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>caption</strong></td><td>Put the <code>&lt;caption&gt;</code> on the top of the table.</td><td>string</td><td><code>&#39;top&#39; | string</code></td><td>-</td></tr><tr><td><strong>caption-top</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Set the text of the table caption and the caption on the top of the table.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- _props (Object) - adds classes to all cels in column, ex. _props: { scope: &#39;col&#39;, className: &#39;custom-class&#39; },<br>- _style (Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>footer</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]<br>or<br>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</td><td>(FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>hover</strong></td><td>Enable a hover state on table rows within a <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>items</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by &#39;_props&#39; key and to single cell by &#39;_cellProps&#39;.<br><br>Example item:<br>{ name: &#39;John&#39; , age: 12, _props: { color: &#39;success&#39; }, _cellProps: { age: { className: &#39;fw-bold&#39;}}}</td><td>Item[]</td><td>-</td><td>-</td></tr><tr><td><strong>small</strong></td><td>Make table more compact by cutting all cell <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped</strong></td><td>Add zebra-striping to any table row within the <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped-columns</strong> <br><div class="badge bg-primary">4.4.0+</div></td><td>Add zebra-striping to any table column.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table footer component.<br><br>Properties to <a href="#ctablefoot">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table head component.<br><br> Properties to <a href="#ctablehead">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table><h3 id="ctablebody" tabindex="-1">CTableBody <a class="anchor-link" href="#ctablebody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctabledatacell" tabindex="-1">CTableDataCell <a class="anchor-link" href="#ctabledatacell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableDataCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableDataCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableDataCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctablefoot" tabindex="-1">CTableFoot <a class="anchor-link" href="#ctablefoot" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableFoot <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableFoot <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableFoot&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctablehead" tabindex="-1">CTableHead <a class="anchor-link" href="#ctablehead" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHead <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHead <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHead&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctableheadercell" tabindex="-1">CTableHeaderCell <a class="anchor-link" href="#ctableheadercell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHeaderCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHeaderCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHeaderCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-5" tabindex="-1">Props <a class="anchor-link" href="#props-5" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctablerow" tabindex="-1">CTableRow <a class="anchor-link" href="#ctablerow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-6" tabindex="-1">Props <a class="anchor-link" href="#props-6" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell..</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 30);
+const _hoisted_124 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTable</span> <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  ...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTable</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctable" tabindex="-1">CTable <a class="anchor-link" href="#ctable" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTable <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTable&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>border-color</strong></td><td>Sets the border color of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>bordered</strong></td><td>Add borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>borderless</strong></td><td>Remove borders on all sides of the table and cells.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>caption</strong></td><td>Put the <code>&lt;caption&gt;</code> on the top of the table.</td><td>string</td><td><code>&#39;top&#39; | string</code></td><td>-</td></tr><tr><td><strong>caption-top</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Set the text of the table caption and the caption on the top of the table.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>columns</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. &#39;_props&#39;)<br><br>In columns prop each array item represents one column. Item might be specified in two ways:<br>String: each item define column name equal to item value.<br>Object: item is object with following keys available as column configuration:<br>- key (required)(String) - define column name equal to item key.<br>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br>- _props (Object) - adds classes to all cels in column, ex. _props: { scope: &#39;col&#39;, className: &#39;custom-class&#39; },<br>- _style (Object) - adds styles to the column header (useful for defining widths)</td><td>(Column | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>footer</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects or strings, where each element represents one cell in the table footer.<br><br>Example items:<br>[&#39;FooterCell&#39;, &#39;FooterCell&#39;, &#39;FooterCell&#39;]<br>or<br>[{ label: &#39;FooterCell&#39;, _props: { color: &#39;success&#39; }, ...]</td><td>(FooterItem | string)[]</td><td>-</td><td>-</td></tr><tr><td><strong>hover</strong></td><td>Enable a hover state on table rows within a <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>items</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by &#39;_props&#39; key and to single cell by &#39;_cellProps&#39;.<br><br>Example item:<br>{ name: &#39;John&#39; , age: 12, _props: { color: &#39;success&#39; }, _cellProps: { age: { className: &#39;fw-bold&#39;}}}</td><td>Item[]</td><td>-</td><td>-</td></tr><tr><td><strong>small</strong></td><td>Make table more compact by cutting all cell <code>padding</code> in half.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped</strong></td><td>Add zebra-striping to any table row within the <code>&lt;CTableBody&gt;</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>striped-columns</strong> <br><div class="badge bg-primary">4.4.0+</div></td><td>Add zebra-striping to any table column.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>table-foot-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table footer component.<br><br>Properties to <a href="#ctablefoot">CTableFoot</a> component.</td><td>object</td><td>-</td><td>-</td></tr><tr><td><strong>table-head-props</strong> <br><div class="badge bg-primary">4.5.0+</div></td><td>Properties that will be passed to the table head component.<br><br> Properties to <a href="#ctablehead">CTableHead</a> component.</td><td>object</td><td>-</td><td>-</td></tr></tbody></table><h3 id="ctablebody" tabindex="-1">CTableBody <a class="anchor-link" href="#ctablebody" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableBody <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableBody <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableBody&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctabledatacell" tabindex="-1">CTableDataCell <a class="anchor-link" href="#ctabledatacell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableDataCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableDataCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableDataCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctablefoot" tabindex="-1">CTableFoot <a class="anchor-link" href="#ctablefoot" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableFoot <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableFoot <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableFoot&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctablehead" tabindex="-1">CTableHead <a class="anchor-link" href="#ctablehead" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHead <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHead <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHead&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctableheadercell" tabindex="-1">CTableHeaderCell <a class="anchor-link" href="#ctableheadercell" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableHeaderCell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableHeaderCell <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableHeaderCell&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-5" tabindex="-1">Props <a class="anchor-link" href="#props-5" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table><h3 id="ctablerow" tabindex="-1">CTableRow <a class="anchor-link" href="#ctablerow" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTableRow <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTableRow <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/table/CTableRow&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-6" tabindex="-1">Props <a class="anchor-link" href="#props-6" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active</strong></td><td>Highlight a table row or cell..</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>align</strong></td><td>Set the vertical aligment.</td><td>string</td><td><code>&#39;bottom&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;top&#39;</code></td><td>-</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr></tbody></table>', 30);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CTable = resolveComponent("CTable");
   const _component_CTableHeaderCell = resolveComponent("CTableHeaderCell");
diff --git a/vue/docs/assets/tabs.html-CkdFhm8K.js b/vue/docs/assets/tabs.html-BryTxUY8.js
similarity index 54%
rename from vue/docs/assets/tabs.html-CkdFhm8K.js
rename to vue/docs/assets/tabs.html-BryTxUY8.js
index cbcc01a1b5e..1546ad39f6f 100644
--- a/vue/docs/assets/tabs.html-CkdFhm8K.js
+++ b/vue/docs/assets/tabs.html-BryTxUY8.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -17,19 +17,19 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode(" props to generate a tabbed interface.")
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">disabled</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="available-styles" tabindex="-1">Available styles <a class="anchor-link" href="#available-styles" aria-hidden="true">#</a></h2><p>Change the style of <code>&lt;CTabs&gt;</code>&#39;s component with modifiers and utilities. Mix and match as needed, or build your own.</p><h3 id="unstyled" tabindex="-1">Unstyled <a class="anchor-link" href="#unstyled" aria-hidden="true">#</a></h3><p>If you don’t provide the <code>variant</code> prop, the component will default to a basic style.</p>', 5);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">disabled</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="available-styles" tabindex="-1">Available styles <a class="anchor-link" href="#available-styles" aria-hidden="true">#</a></h2><p>Change the style of <code>&lt;CTabs&gt;</code>&#39;s component with modifiers and utilities. Mix and match as needed, or build your own.</p><h3 id="unstyled" tabindex="-1">Unstyled <a class="anchor-link" href="#unstyled" aria-hidden="true">#</a></h3><p>If you don’t provide the <code>variant</code> prop, the component will default to a basic style.</p>', 5);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">disabled</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pills" tabindex="-1">Pills <a class="anchor-link" href="#pills" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;pills&quot;</code> instead:</p>', 3);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">disabled</span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pills" tabindex="-1">Pills <a class="anchor-link" href="#pills" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;pills&quot;</code> instead:</p>', 3);
 const _hoisted_13 = { class: "docs-example rounded-top p-4" };
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>2</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline" tabindex="-1">Underline <a class="anchor-link" href="#underline" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline&quot;</code> instead:</p>', 3);
+const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>2</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pills<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline" tabindex="-1">Underline <a class="anchor-link" href="#underline" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline&quot;</code> instead:</p>', 3);
 const _hoisted_17 = { class: "docs-example rounded-top p-4" };
-const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline-border" tabindex="-1">Underline border <a class="anchor-link" href="#underline-border" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline-border&quot;</code> instead:</p>', 3);
+const _hoisted_18 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="underline-border" tabindex="-1">Underline border <a class="anchor-link" href="#underline-border" aria-hidden="true">#</a></h3><p>Take that same code, but use <code>variant=&quot;underline-border&quot;</code> instead:</p>', 3);
 const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline-border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="fill-and-justify" tabindex="-1">Fill and justify <a class="anchor-link" href="#fill-and-justify" aria-hidden="true">#</a></h3><p>Force your <code>&lt;CTabs&gt;</code>&#39;s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use <code>layout=&quot;fill&quot;</code>. Notice that all horizontal space is occupied, but not every nav item has the same width.</p>', 3);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>underline-border<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="fill-and-justify" tabindex="-1">Fill and justify <a class="anchor-link" href="#fill-and-justify" aria-hidden="true">#</a></h3><p>Force your <code>&lt;CTabs&gt;</code>&#39;s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use <code>layout=&quot;fill&quot;</code>. Notice that all horizontal space is occupied, but not every nav item has the same width.</p>', 3);
 const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile tab with longer content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For equal-width elements, use <code>layout=&quot;justified&quot;</code>. All horizontal space will be occupied by nav links, but unlike the <code>layout=&quot;fill&quot;</code> above, every nav item will be the same width.</p>', 2);
+const _hoisted_26 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fill<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile tab with longer content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For equal-width elements, use <code>layout=&quot;justified&quot;</code>. All horizontal space will be occupied by nav links, but unlike the <code>layout=&quot;fill&quot;</code> above, every nav item will be the same width.</p>', 2);
 const _hoisted_28 = { class: "docs-example rounded-top p-4" };
-const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justified<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h2><p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code>role=&quot;tablist&quot;</code>, <code>role=&quot;tab&quot;</code>, <code>role=&quot;tabpanel&quot;</code>, and additional <code>aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p><h3 id="wai-aria-roles" tabindex="-1">WAI-ARIA Roles <a class="anchor-link" href="#wai-aria-roles" aria-hidden="true">#</a></h3><ul><li>The element that serves as the container for the set of tabs has the role <code>tablist</code>.</li><li>Each element that serves as a tab has the role <code>tab</code> and is contained within the element with the role <code>tablist</code>.</li><li>Each element that contains the content panel for a tab has the role <code>tabpanel</code>.</li><li>If the tab list has a visible label, the element with the role <code>tablist</code> has <code>aria-labelledby</code> set to a value that refers to the labeling element. Otherwise, the <code>tablist</code> element has a label provided by <code>aria-label</code>.</li><li>Each element with the role <code>tab</code> has the property <code>aria-controls</code> referring to its associated <code>tabpanel</code> element.</li><li>The active tab element has the state <code>aria-selected</code> set to <code>true</code>, and all other tab elements have it set to <code>false</code>.</li><li>Each element with the role <code>tabpanel</code> has the property <code>aria-labelledby</code> referring to its associated <code>tab</code> element.</li></ul><p>Our Vue Tabs component automatically manages all <code>role=&quot;...&quot;</code> and <code>aria-</code> attributes for accessibility. It also handles the selected state by adding <code>aria-selected=&quot;true&quot;</code> to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:</p><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabs</span></span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabList</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Profile</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Contact</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Disabled</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabList</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabContent</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Home tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabContent</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabs</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>This example demonstrates how to manually set <code>aria-selected</code>, <code>aria-controls</code>, and <code>aria-labelledby</code> attributes on your <code>&lt;CTab&gt;</code>&#39;s and <code>&lt;CTabPanels&gt;</code>&#39;s.</p><h3 id="keyboard-interaction" tabindex="-1">Keyboard Interaction <a class="anchor-link" href="#keyboard-interaction" aria-hidden="true">#</a></h3><p><strong>When focus enters the tab list:</strong></p><p><kbd>Tab</kbd>: It places focus on the active <code>tab</code> element.</p><p><strong>When focus is on a tab element:</strong></p><p><kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.</p><p><kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.</p><p><kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.</p><p><kbd>Home</kbd>: Moves focus to the first tab.</p><p><kbd>End</kbd>: Moves focus to the last tab.</p><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue tabs use local CSS variables on <code>.nav</code>, <code>.nav-tabs</code>, <code>.nav-pills</code>, <code>.nav-underline</code> and <code>.nav-underline-border</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p><p>On the <code>.nav</code> base class:</p>', 21);
+const _hoisted_29 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabs</span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabList</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>justified<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Profile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTab</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTab</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabList</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Home tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTabPanel</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabPanel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabContent</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTabs</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="accessibility" tabindex="-1">Accessibility <a class="anchor-link" href="#accessibility" aria-hidden="true">#</a></h2><p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel" target="_blank" rel="noopener noreferrer"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code>role=&quot;tablist&quot;</code>, <code>role=&quot;tab&quot;</code>, <code>role=&quot;tabpanel&quot;</code>, and additional <code>aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p><h3 id="wai-aria-roles" tabindex="-1">WAI-ARIA Roles <a class="anchor-link" href="#wai-aria-roles" aria-hidden="true">#</a></h3><ul><li>The element that serves as the container for the set of tabs has the role <code>tablist</code>.</li><li>Each element that serves as a tab has the role <code>tab</code> and is contained within the element with the role <code>tablist</code>.</li><li>Each element that contains the content panel for a tab has the role <code>tabpanel</code>.</li><li>If the tab list has a visible label, the element with the role <code>tablist</code> has <code>aria-labelledby</code> set to a value that refers to the labeling element. Otherwise, the <code>tablist</code> element has a label provided by <code>aria-label</code>.</li><li>Each element with the role <code>tab</code> has the property <code>aria-controls</code> referring to its associated <code>tabpanel</code> element.</li><li>The active tab element has the state <code>aria-selected</code> set to <code>true</code>, and all other tab elements have it set to <code>false</code>.</li><li>Each element with the role <code>tabpanel</code> has the property <code>aria-labelledby</code> referring to its associated <code>tab</code> element.</li></ul><p>Our Vue Tabs component automatically manages all <code>role=&quot;...&quot;</code> and <code>aria-</code> attributes for accessibility. It also handles the selected state by adding <code>aria-selected=&quot;true&quot;</code> to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:</p><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabs</span></span> <span class="token attr-name">:activeItemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabList</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Profile</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Contact</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTab</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Disabled</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTab</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabList</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabContent</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Home tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>profile-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Profile tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Contact tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabPanel</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled-tab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">      Disabled tab content</span>\n<span class="line">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabContent</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>\n<span class="line"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabs</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>This example demonstrates how to manually set <code>aria-selected</code>, <code>aria-controls</code>, and <code>aria-labelledby</code> attributes on your <code>&lt;CTab&gt;</code>&#39;s and <code>&lt;CTabPanels&gt;</code>&#39;s.</p><h3 id="keyboard-interaction" tabindex="-1">Keyboard Interaction <a class="anchor-link" href="#keyboard-interaction" aria-hidden="true">#</a></h3><p><strong>When focus enters the tab list:</strong></p><p><kbd>Tab</kbd>: It places focus on the active <code>tab</code> element.</p><p><strong>When focus is on a tab element:</strong></p><p><kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.</p><p><kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.</p><p><kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.</p><p><kbd>Home</kbd>: Moves focus to the first tab.</p><p><kbd>End</kbd>: Moves focus to the last tab.</p><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue tabs use local CSS variables on <code>.nav</code>, <code>.nav-tabs</code>, <code>.nav-pills</code>, <code>.nav-underline</code> and <code>.nav-underline-border</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p><p>On the <code>.nav</code> base class:</p>', 21);
 const _hoisted_50 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createTextVNode("On the "),
   /* @__PURE__ */ createBaseVNode("code", null, ".nav-tabs"),
@@ -50,8 +50,8 @@ const _hoisted_53 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, ".nav-underline-border"),
   /* @__PURE__ */ createTextVNode(" modifier class:")
 ], -1);
-const _hoisted_54 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabs</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vars<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabs</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctab" tabindex="-1">CTab <a class="anchor-link" href="#ctab" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTab <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTab <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTab&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="ctabcontent" tabindex="-1">CTabContent <a class="anchor-link" href="#ctabcontent" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabContent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabContent <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabContent&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="ctablist" tabindex="-1">CTabList <a class="anchor-link" href="#ctablist" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabList <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabList&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table><h3 id="ctabpanel" tabindex="-1">CTabPanel <a class="anchor-link" href="#ctabpanel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabPanel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabPanel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabPanel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Enable fade in and fade out transition.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="ctabs" tabindex="-1">CTabs <a class="anchor-link" href="#ctabs" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabs <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabs&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>The callback is fired when the active tab changes.</td><td></td></tr></tbody></table>', 23);
+const _hoisted_54 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTabs</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vars<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CTabs</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctab" tabindex="-1">CTab <a class="anchor-link" href="#ctab" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTab <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTab <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTab&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="ctabcontent" tabindex="-1">CTabContent <a class="anchor-link" href="#ctabcontent" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabContent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabContent <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabContent&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="ctablist" tabindex="-1">CTabList <a class="anchor-link" href="#ctablist" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabList <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabList&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>layout</strong></td><td>Specify a layout type for component.</td><td>string</td><td><code>&#39;fill&#39;</code>, <code>&#39;justified&#39;</code></td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the nav variant to tabs or pills.</td><td>string</td><td><code>&#39;pills&#39;</code>, <code>&#39;tabs&#39;</code>, <code>&#39;underline&#39;</code>, <code>&#39;underline-border&#39;</code></td><td>-</td></tr></tbody></table><h3 id="ctabpanel" tabindex="-1">CTabPanel <a class="anchor-link" href="#ctabpanel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabPanel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabPanel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabPanel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>item-key</strong></td><td>Item key.</td><td>number|string</td><td>-</td><td>-</td></tr><tr><td><strong>transition</strong></td><td>Enable fade in and fade out transition.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>false</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="ctabs" tabindex="-1">CTabs <a class="anchor-link" href="#ctabs" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTabs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTabs <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tabs/CTabs&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>active-item-key</strong></td><td>The active item key.</td><td>number|string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>The callback is fired when the active tab changes.</td><td></td></tr></tbody></table>', 23);
 function _sfc_render(_ctx, _cache) {
   const _component_CTab = resolveComponent("CTab");
   const _component_CTabList = resolveComponent("CTabList");
diff --git a/vue/docs/assets/textarea.html-DyU8nYiI.js b/vue/docs/assets/textarea.html-VjAtYprD.js
similarity index 51%
rename from vue/docs/assets/textarea.html-DyU8nYiI.js
rename to vue/docs/assets/textarea.html-VjAtYprD.js
index eaa8990f3e0..9333960b55d 100644
--- a/vue/docs/assets/textarea.html-DyU8nYiI.js
+++ b/vue/docs/assets/textarea.html-VjAtYprD.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -12,11 +12,11 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   }, "#")
 ], -1);
 const _hoisted_2 = { class: "docs-example rounded-top p-4" };
-const _hoisted_3 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Must be 8-20 words long.<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you need to add custom classs to form&#39;s components, or need to add some custom elements you can add each form component separately. Please check the example below.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Example textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpInline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Must be 8-20 words long.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also use slots.</p><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#label</span><span class="token punctuation">&gt;</span></span>Example textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#text</span><span class="token punctuation">&gt;</span></span>Must be 8-20 word long.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 7);
+const _hoisted_3 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Must be 8-20 words long.<span class="token punctuation">&quot;</span></span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you need to add custom classs to form&#39;s components, or need to add some custom elements you can add each form component separately. Please check the example below.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Example textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormText</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordHelpInline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Must be 8-20 words long.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also use slots.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exampleFormControlTextarea1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#label</span><span class="token punctuation">&gt;</span></span>Example textarea<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#text</span><span class="token punctuation">&gt;</span></span>Must be 8-20 word long.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 7);
 const _hoisted_10 = { class: "docs-example rounded-top p-4" };
-const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled textarea example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>readonly</code> boolean attribute on an textarea to prevent modification of the textarea&#39;s value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.</p>', 3);
+const _hoisted_11 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled textarea example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>readonly</code> boolean attribute on an textarea to prevent modification of the textarea&#39;s value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.</p>', 3);
 const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly textarea example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">disabled</span></span>\n<span class="line">  <span class="token attr-name">readonly</span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3><p><code>$input-*</code> are shared across most of our form controls (and not buttons).</p>', 4);
+const _hoisted_15 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Readonly textarea example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token attr-name">disabled</span></span>\n<span class="line">  <span class="token attr-name">readonly</span></span>\n<span class="line"><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3><p><code>$input-*</code> are shared across most of our form controls (and not buttons).</p>', 4);
 const _hoisted_19 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, "$form-label-*"),
   /* @__PURE__ */ createTextVNode(" and "),
@@ -27,7 +27,7 @@ const _hoisted_19 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__PURE__ */ createBaseVNode("code", null, "<CFormText />"),
   /* @__PURE__ */ createTextVNode(" component.")
 ], -1);
-const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormTextarea <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormTextarea <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormTextarea&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table><h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFeedback <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFeedback <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFeedback&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>invalid</strong></td><td>Method called immediately after the <code>value</code> prop changes.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip</strong></td><td>If your form layout allows it, you can display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformlabel" tabindex="-1">CFormLabel <a class="anchor-link" href="#cformlabel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormLabel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormLabel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>A string of all className you want to be applied to the component, and override standard className value.</td><td>array|string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 19);
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormTextarea <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormTextarea <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormTextarea&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>disabled</strong></td><td>Toggle the disabled state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>floating-label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>model-value</strong></td><td>The default name for a value passed using v-model.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>plain-text</strong></td><td>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>readonly</code>.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>readonly</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.3.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Event occurs when the element loses focus, after the content has been changed.</td><td></td></tr><tr><td><strong>input</strong></td><td>Event occurs immediately after the value of a component has changed.</td><td></td></tr><tr><td><strong>update:modelValue</strong></td><td>Emit the new value whenever there’s an input or change event.</td><td></td></tr></tbody></table><h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormFeedback <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormFeedback <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormFeedback&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr><tr><td><strong>invalid</strong></td><td>Method called immediately after the <code>value</code> prop changes.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip</strong></td><td>If your form layout allows it, you can display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformlabel" tabindex="-1">CFormLabel <a class="anchor-link" href="#cformlabel" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormLabel <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormLabel&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>custom-class-name</strong></td><td>A string of all className you want to be applied to the component, and override standard className value.</td><td>array|string</td><td>-</td><td>-</td></tr></tbody></table><h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CFormText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CFormText <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/form/CFormText&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>&#39;div&#39;</td></tr></tbody></table>', 19);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormTextarea = resolveComponent("CFormTextarea");
   const _component_ScssDocs = resolveComponent("ScssDocs");
diff --git a/vue/docs/assets/time-picker.html-D-LRJcuD.js b/vue/docs/assets/time-picker.html-DlV52mWV.js
similarity index 55%
rename from vue/docs/assets/time-picker.html-D-LRJcuD.js
rename to vue/docs/assets/time-picker.html-DlV52mWV.js
index b0789c17561..bd09935017f 100644
--- a/vue/docs/assets/time-picker.html-D-LRJcuD.js
+++ b/vue/docs/assets/time-picker.html-DlV52mWV.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, t as toDisplayString, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, t as toDisplayString, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {
   setup() {
     const vTime = ref("02:17:35 PM");
@@ -23,66 +23,66 @@ const _hoisted_3 = { class: "docs-example rounded-top p-4" };
 const _hoisted_4 = { class: "row" };
 const _hoisted_5 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
 const _hoisted_6 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">time</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>02:17:35 PM<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3><p>By default, <code>&lt;CTimePicker&gt;</code> returns <code>time</code> as a <code>Date.prototype.toLocaleTimeString()</code>. If no date is selected, <code>&lt;CTimePicker&gt;</code> returns <code>null</code>.</p>', 3);
+const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">time</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>02:17:35 PM<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vmodel" tabindex="-1">vModel <a class="anchor-link" href="#vmodel" aria-hidden="true">#</a></h3><p>By default, <code>&lt;CTimePicker&gt;</code> returns <code>time</code> as a <code>Date.prototype.toLocaleTimeString()</code>. If no date is selected, <code>&lt;CTimePicker&gt;</code> returns <code>null</code>.</p>', 3);
 const _hoisted_10 = { class: "docs-example rounded-top p-4" };
 const _hoisted_11 = { class: "row mb-3" };
 const _hoisted_12 = { class: "col-lg-6" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-model:</span>time</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vTime<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{ vTime }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> vTime <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;02:17:35 PM&#39;</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        vTime</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-model:</span>time</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vTime<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{ vTime }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">const</span> vTime <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;02:17:35 PM&#39;</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        vTime</span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizing" tabindex="-1">Sizing <a class="anchor-link" href="#sizing" aria-hidden="true">#</a></h2><p>Set heights using <code>size</code> property like <code>size=&quot;lg&quot;</code> and <code>size=&quot;sm&quot;</code>.</p>', 3);
 const _hoisted_16 = { class: "docs-example rounded-top p-4" };
 const _hoisted_17 = { class: "row" };
 const _hoisted_18 = { class: "col-lg-4 mb-3" };
 const _hoisted_19 = { class: "row" };
 const _hoisted_20 = { class: "col-lg-3" };
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="anchor-link" href="#disabled" aria-hidden="true">#</a></h2><p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>', 3);
 const _hoisted_24 = { class: "docs-example rounded-top p-4" };
 const _hoisted_25 = { class: "row" };
 const _hoisted_26 = { class: "col-lg-4" };
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">disabled</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>inputReadOnly</code> boolean attribute to prevent modification of the input&#39;s value.</p>', 3);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">disabled</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="readonly" tabindex="-1">Readonly <a class="anchor-link" href="#readonly" aria-hidden="true">#</a></h2><p>Add the <code>inputReadOnly</code> boolean attribute to prevent modification of the input&#39;s value.</p>', 3);
 const _hoisted_30 = { class: "docs-example rounded-top p-4" };
 const _hoisted_31 = { class: "row" };
 const _hoisted_32 = { class: "col-lg-4" };
-const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">inputReadOnly</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="custom-formats" tabindex="-1">Custom formats <a class="anchor-link" href="#custom-formats" aria-hidden="true">#</a></h2><h3 id="disable-minutes-and-seconds" tabindex="-1">Disable minutes and seconds <a class="anchor-link" href="#disable-minutes-and-seconds" aria-hidden="true">#</a></h3><p>Customize Vue Time Picker to display only hours, or hours and minutes by disabling minutes/seconds.</p>', 4);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">inputReadOnly</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="custom-formats" tabindex="-1">Custom formats <a class="anchor-link" href="#custom-formats" aria-hidden="true">#</a></h2><h3 id="disable-minutes-and-seconds" tabindex="-1">Disable minutes and seconds <a class="anchor-link" href="#disable-minutes-and-seconds" aria-hidden="true">#</a></h3><p>Customize Vue Time Picker to display only hours, or hours and minutes by disabling minutes/seconds.</p>', 4);
 const _hoisted_37 = { class: "docs-example rounded-top p-4" };
 const _hoisted_38 = { class: "row" };
 const _hoisted_39 = { class: "col-sm-6 col-lg-5 mb-3 mb-sm-0" };
 const _hoisted_40 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTimePicker</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Only hours and minutes<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:seconds</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTimePicker</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Only hours<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:minutes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:seconds</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-hours-minutes-and-seconds" tabindex="-1">Custom hours, minutes and seconds <a class="anchor-link" href="#custom-hours-minutes-and-seconds" aria-hidden="true">#</a></h3><p>Tailor the Vue Time Picker to your needs by specifying custom values for hours, minutes, and seconds. Use arrays to define selectable options or functions for dynamic filtering. The example below demonstrates setting specific hour options, minute intervals, and a condition for seconds only to include values less than 20.</p>', 3);
+const _hoisted_41 = /* @__PURE__ */ createStaticVNode('<div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTimePicker</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Only hours and minutes<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:seconds</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CTimePicker</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Only hours<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:minutes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:seconds</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-hours-minutes-and-seconds" tabindex="-1">Custom hours, minutes and seconds <a class="anchor-link" href="#custom-hours-minutes-and-seconds" aria-hidden="true">#</a></h3><p>Tailor the Vue Time Picker to your needs by specifying custom values for hours, minutes, and seconds. Use arrays to define selectable options or functions for dynamic filtering. The example below demonstrates setting specific hour options, minute intervals, and a condition for seconds only to include values less than 20.</p>', 3);
 const _hoisted_44 = { class: "docs-example rounded-top p-4" };
 const _hoisted_45 = { class: "row" };
 const _hoisted_46 = { class: "col-sm-6 col-lg-5" };
-const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:hours</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[1, 3, 5, 7]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:minutes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[0, 15, 30, 45]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:seconds</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(s) =&gt; s &lt; 20<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>In this configuration, the Vue TimePicker restricts hours to a predefined set, minutes to quarter intervals, and seconds to values under 20, offering a high degree of customization for precise time selection scenarios.</p><h2 id="non-english-locale" tabindex="-1">Non-english locale <a class="anchor-link" href="#non-english-locale" aria-hidden="true">#</a></h2><p>Tailor the Vue Time Picker to match different locales, offering an inclusive user experience across diverse languages. Automatically adapt or set specific locales to meet your application&#39;s needs.</p><h3 id="auto" tabindex="-1">Auto <a class="anchor-link" href="#auto" aria-hidden="true">#</a></h3><p>Our Time Picker compoennt automatically detects and adapts to the user&#39;s locale, ensuring a localized experience without explicit configuration.</p>', 6);
+const _hoisted_47 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en-US<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:hours</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[1, 3, 5, 7]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:minutes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[0, 15, 30, 45]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:seconds</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(s) =&gt; s &lt; 20<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>In this configuration, the Vue TimePicker restricts hours to a predefined set, minutes to quarter intervals, and seconds to values under 20, offering a high degree of customization for precise time selection scenarios.</p><h2 id="non-english-locale" tabindex="-1">Non-english locale <a class="anchor-link" href="#non-english-locale" aria-hidden="true">#</a></h2><p>Tailor the Vue Time Picker to match different locales, offering an inclusive user experience across diverse languages. Automatically adapt or set specific locales to meet your application&#39;s needs.</p><h3 id="auto" tabindex="-1">Auto <a class="anchor-link" href="#auto" aria-hidden="true">#</a></h3><p>Our Time Picker compoennt automatically detects and adapts to the user&#39;s locale, ensuring a localized experience without explicit configuration.</p>', 6);
 const _hoisted_53 = { class: "docs-example rounded-top p-4" };
 const _hoisted_54 = { class: "row" };
 const _hoisted_55 = { class: "col-lg-4" };
-const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="chinese" tabindex="-1">Chinese <a class="anchor-link" href="#chinese" aria-hidden="true">#</a></h3><p>Specify the locale to Chinese (<code>zh-CN</code>) for users in China, enhancing usability with a familiar format and language.</p>', 3);
+const _hoisted_56 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="chinese" tabindex="-1">Chinese <a class="anchor-link" href="#chinese" aria-hidden="true">#</a></h3><p>Specify the locale to Chinese (<code>zh-CN</code>) for users in China, enhancing usability with a familiar format and language.</p>', 3);
 const _hoisted_59 = { class: "docs-example rounded-top p-4" };
 const _hoisted_60 = { class: "row" };
 const _hoisted_61 = { class: "col-lg-4" };
-const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>入住日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="japanese" tabindex="-1">Japanese <a class="anchor-link" href="#japanese" aria-hidden="true">#</a></h3><p>Set the Time Picker&#39;s locale to Japanese (<code>ja</code>) to cater to Japanese users, presenting date and time in a localized format.</p>', 3);
+const _hoisted_62 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>入住日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="japanese" tabindex="-1">Japanese <a class="anchor-link" href="#japanese" aria-hidden="true">#</a></h3><p>Set the Time Picker&#39;s locale to Japanese (<code>ja</code>) to cater to Japanese users, presenting date and time in a localized format.</p>', 3);
 const _hoisted_65 = { class: "docs-example rounded-top p-4" };
 const _hoisted_66 = { class: "row" };
 const _hoisted_67 = { class: "col-lg-4" };
-const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>日付を選択<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ja<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="korean" tabindex="-1">Korean <a class="anchor-link" href="#korean" aria-hidden="true">#</a></h3><p>Configure the locale to Korean (<code>ko</code>) for a tailored experience in Korea, offering date and time selection in the local language.</p>', 3);
+const _hoisted_68 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>日付を選択<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ja<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="korean" tabindex="-1">Korean <a class="anchor-link" href="#korean" aria-hidden="true">#</a></h3><p>Configure the locale to Korean (<code>ko</code>) for a tailored experience in Korea, offering date and time selection in the local language.</p>', 3);
 const _hoisted_71 = { class: "docs-example rounded-top p-4" };
 const _hoisted_72 = { class: "row" };
 const _hoisted_73 = { class: "col-lg-4" };
-const _hoisted_74 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>날짜 선택<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ko<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="right-to-left-support" tabindex="-1">Right to left support <a class="anchor-link" href="#right-to-left-support" aria-hidden="true">#</a></h2><p>RTL support is built-in and can be explicitly controlled through the <code>$enable-rtl</code> variables in scss.</p><h3 id="hebrew" tabindex="-1">Hebrew <a class="anchor-link" href="#hebrew" aria-hidden="true">#</a></h3>', 4);
+const _hoisted_74 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>날짜 선택<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ko<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="right-to-left-support" tabindex="-1">Right to left support <a class="anchor-link" href="#right-to-left-support" aria-hidden="true">#</a></h2><p>RTL support is built-in and can be explicitly controlled through the <code>$enable-rtl</code> variables in scss.</p><h3 id="hebrew" tabindex="-1">Hebrew <a class="anchor-link" href="#hebrew" aria-hidden="true">#</a></h3>', 4);
 const _hoisted_78 = { class: "docs-example rounded-top p-4" };
 const _hoisted_79 = {
   class: "row",
   dir: "rtl"
 };
 const _hoisted_80 = { class: "col-lg-4" };
-const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>בחר תאריך<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>he-IL<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="persian" tabindex="-1">Persian <a class="anchor-link" href="#persian" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_81 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>בחר תאריך<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>he-IL<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="persian" tabindex="-1">Persian <a class="anchor-link" href="#persian" aria-hidden="true">#</a></h3>', 2);
 const _hoisted_83 = { class: "docs-example rounded-top p-4" };
 const _hoisted_84 = {
   class: "row",
   dir: "rtl"
 };
 const _hoisted_85 = { class: "col-lg-4" };
-const _hoisted_86 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>تاریخ شروع<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa-IR<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue time pickers use local CSS variables on <code>.time-picker</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_90 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CTimePicker <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CTimePicker<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_93 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctimepicker" tabindex="-1">CTimePicker <a class="anchor-link" href="#ctimepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTimePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTimePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/time-picker/CTimePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>ampm</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Set if the component should use the 12/24 hour format. If <code>true</code> forces the interface to a 12-hour format. If <code>false</code> forces the interface into a 24-hour format. If <code>auto</code> the current locale will determine the 12 or 24-hour interface by default locales.</td><td>boolean|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hours</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify a list of available hours using an array, or customize the filtering of hours through a function.</td><td>number[] | ((hour: number) =&gt; number[])</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>minutes</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select time&#39;</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>seconds</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>time</strong></td><td>Initial selected time.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the time picker variant to a roll or select.</td><td>string</td><td><code>&#39;roll&#39;</code>, <code>&#39;select&#39;</code></td><td>&#39;roll&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Callback fired when the time changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>update:time</strong></td><td>Callback fired when the time changed.</td><td></td></tr></tbody></table>', 7);
+const _hoisted_86 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>تاریخ شروع<span class="token punctuation">&quot;</span></span> <span class="token attr-name">locale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa-IR<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue time pickers use local CSS variables on <code>.time-picker</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_90 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CTimePicker <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CTimePicker<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_93 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctimepicker" tabindex="-1">CTimePicker <a class="anchor-link" href="#ctimepicker" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTimePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTimePicker <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue-pro/src/components/time-picker/CTimePicker&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>ampm</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Set if the component should use the 12/24 hour format. If <code>true</code> forces the interface to a 12-hour format. If <code>false</code> forces the interface into a 24-hour format. If <code>auto</code> the current locale will determine the 12 or 24-hour interface by default locales.</td><td>boolean|string</td><td>-</td><td>&#39;auto&#39;</td></tr><tr><td><strong>cancel-button</strong></td><td>Toggle visibility or set the content of cancel button.</td><td>boolean|string</td><td>-</td><td>&#39;Cancel&#39;</td></tr><tr><td><strong>cancel-button-color</strong></td><td>Sets the color context of the cancel button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>cancel-button-size</strong></td><td>Size the cancel button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>cancel-button-variant</strong></td><td>Set the cancel button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>&#39;ghost&#39;</td></tr><tr><td><strong>cleaner</strong></td><td>Toggle visibility of the cleaner button.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>confirm-button</strong></td><td>Toggle visibility or set the content of confirm button.</td><td>boolean|string</td><td>-</td><td>&#39;OK&#39;</td></tr><tr><td><strong>confirm-button-color</strong></td><td>Sets the color context of the confirm button to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>&#39;primary&#39;</td></tr><tr><td><strong>confirm-button-size</strong></td><td>Size the confirm button small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>&#39;sm&#39;</td></tr><tr><td><strong>confirm-button-variant</strong></td><td>Set the confirm button variant to an outlined button or a ghost button.</td><td>string</td><td><code>&#39;ghost&#39;</code>, <code>&#39;outline&#39;</code></td><td>-</td></tr><tr><td><strong>feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable feedback.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>feedback-valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>:invalid</code> and <code>:valid</code>.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>hours</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Specify a list of available hours using an array, or customize the filtering of hours through a function.</td><td>number[] | ((hour: number) =&gt; number[])</td><td>-</td><td>-</td></tr><tr><td><strong>id</strong></td><td>The id global attribute defines an identifier (ID) that must be unique in the whole document.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>indicator</strong></td><td>Toggle visibility or set the content of the input indicator.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>input-on-change-delay</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Defines the delay (in milliseconds) for the input field&#39;s onChange event.</td><td>number</td><td>-</td><td>750</td></tr><tr><td><strong>input-read-only</strong></td><td>Toggle the readonly state for the component.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>invalid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to invalid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>label</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add a caption for a component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>locale</strong></td><td>Sets the default locale for components. If not set, it is inherited from the navigator.language.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>minutes</strong> <br><div class="badge bg-primary">5.0.0+</div></td><td>Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>name</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>Set the name attribute for the input element.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>placeholder</strong></td><td>Specifies a short hint that is visible in the input.</td><td>string</td><td>-</td><td>&#39;Select time&#39;</td></tr><tr><td><strong>required</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>When present, it specifies that must be filled out before submitting the form.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>seconds</strong> <br><div class="badge bg-primary">4.7.0+</div></td><td>Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.</td><td>number[] | ((hour: number) =&gt; number[]) | boolean</td><td>-</td><td>true</td></tr><tr><td><strong>size</strong></td><td>Size the component small or large.</td><td>string</td><td><code>&#39;sm&#39;</code>, <code>&#39;lg&#39;</code></td><td>-</td></tr><tr><td><strong>text</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Add helper text to the component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>time</strong></td><td>Initial selected time.</td><td>date|string</td><td>-</td><td>-</td></tr><tr><td><strong>tooltip-feedback</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Display validation feedback in a styled tooltip.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>valid</strong> <br><div class="badge bg-primary">4.6.0+</div></td><td>Set component validation state to valid.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>variant</strong></td><td>Set the time picker variant to a roll or select.</td><td>string</td><td><code>&#39;roll&#39;</code>, <code>&#39;select&#39;</code></td><td>&#39;roll&#39;</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of the component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>change</strong></td><td>Callback fired when the time changed.</td><td></td></tr><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr><tr><td><strong>update:time</strong></td><td>Callback fired when the time changed.</td><td></td></tr></tbody></table>', 7);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CTimePicker = resolveComponent("CTimePicker");
   const _component_ScssDocs = resolveComponent("ScssDocs");
diff --git a/vue/docs/assets/toast.html-B70IM5zC.js b/vue/docs/assets/toast.html-B70IM5zC.js
new file mode 100644
index 00000000000..bd86351c978
--- /dev/null
+++ b/vue/docs/assets/toast.html-B70IM5zC.js
@@ -0,0 +1,366 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode, F as Fragment, j as renderList, h as createBlock, t as toDisplayString } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  data() {
+    return {
+      toasts: []
+    };
+  },
+  methods: {
+    createToast() {
+      this.toasts.push({
+        title: "new toast",
+        content: "Lorem ipsum dolor cet emit"
+      });
+    }
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>Vue toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p><h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>Things to know when using the toast plugin:</p><ul><li>Toasts are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li><li>Toasts will automatically hide if you do not specify <code>autohide: false</code>.</li></ul><h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples" aria-hidden="true">#</a></h2><h3 id="basic" tabindex="-1">Basic <a class="anchor-link" href="#basic" aria-hidden="true">#</a></h3><p>To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use <code>display: flex</code>, allowing easy alignment of content thanks to our margin and flexbox utilities.</p><p>Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your &quot;toasted&quot; content and strongly encourage a dismiss button.</p>', 8);
+const _hoisted_9 = { class: "docs-example rounded-top p-4" };
+const _hoisted_10 = /* @__PURE__ */ createBaseVNode("svg", {
+  class: "rounded me-2",
+  width: "20",
+  height: "20",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid slice",
+  focusable: "false",
+  role: "img"
+}, [
+  /* @__PURE__ */ createBaseVNode("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#007aff"
+  })
+], -1);
+const _hoisted_11 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
+const _hoisted_12 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_14 = { class: "docs-example rounded-top p-4" };
+const _hoisted_15 = { class: "me-auto fw-bold" };
+const _hoisted_16 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>createToast<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Send a toast<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToaster</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(toast, index) in toasts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{toast.title}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        {{ toast.content }}</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToaster</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">toasts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">createToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>toasts<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;new toast&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&#39;Lorem ipsum dolor cet emit&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="translucent" tabindex="-1">Translucent <a class="anchor-link" href="#translucent" aria-hidden="true">#</a></h3><p>Toasts are slightly translucent to blend in with what&#39;s below them.</p>', 3);
+const _hoisted_20 = { class: "docs-example rounded-top p-4 bg-dark" };
+const _hoisted_21 = /* @__PURE__ */ createBaseVNode("svg", {
+  class: "rounded me-2",
+  width: "20",
+  height: "20",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid slice",
+  focusable: "false",
+  role: "img"
+}, [
+  /* @__PURE__ */ createBaseVNode("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#007aff"
+  })
+], -1);
+const _hoisted_22 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
+const _hoisted_23 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="stacking" tabindex="-1">Stacking <a class="anchor-link" href="#stacking" aria-hidden="true">#</a></h3><p>You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.</p>', 3);
+const _hoisted_27 = { class: "docs-example rounded-top p-4" };
+const _hoisted_28 = /* @__PURE__ */ createBaseVNode("svg", {
+  class: "rounded me-2",
+  width: "20",
+  height: "20",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid slice",
+  focusable: "false",
+  role: "img"
+}, [
+  /* @__PURE__ */ createBaseVNode("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#007aff"
+  })
+], -1);
+const _hoisted_29 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
+const _hoisted_30 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
+const _hoisted_31 = /* @__PURE__ */ createBaseVNode("svg", {
+  class: "rounded me-2",
+  width: "20",
+  height: "20",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid slice",
+  focusable: "false",
+  role: "img"
+}, [
+  /* @__PURE__ */ createBaseVNode("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#007aff"
+  })
+], -1);
+const _hoisted_32 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
+const _hoisted_33 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToaster</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-static<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">        <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">        <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToaster</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-content" tabindex="-1">Custom content <a class="anchor-link" href="#custom-content" aria-hidden="true">#</a></h3><p>Customize your toasts by removing sub-components, tweaking them with <a href="https://coreui.io/docs/4.0/utilities/api" target="_blank" rel="noopener noreferrer">utilities</a>, or by adding your own markup. Here we&#39;ve created a simpler toast by removing the default <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from <a href="https://icons.coreui.io" target="_blank" rel="noopener noreferrer">CoreUI Icons</a>, and using some <a href="https://coreui.io/docs/4.0/utilities/flex" target="_blank" rel="noopener noreferrer">flexbox utilities</a> to adjust the layout.</p>', 3);
+const _hoisted_37 = { class: "docs-example rounded-top p-4" };
+const _hoisted_38 = { class: "d-flex" };
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastClose</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2 m-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Alternatively, you can also add additional controls and components to toasts.</p>', 2);
+const _hoisted_41 = { class: "docs-example rounded-top p-4" };
+const _hoisted_42 = { class: "mt-2 pt-2 border-top" };
+const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Hello, world! This is a toast message.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 pt-2 border-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Take action</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastClose</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>CButton<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastClose</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="color-schemes" tabindex="-1">Color schemes <a class="anchor-link" href="#color-schemes" aria-hidden="true">#</a></h3><p>Building on the above example, you can create different toast color schemes with our <a href="https://coreui.io/docs/4.0/utilities/colors" target="_blank" rel="noopener noreferrer">color</a> and <a href="https://coreui.io/docs/4.0//utilities/background" target="_blank" rel="noopener noreferrer">background</a> utilities. Here we&#39;ve set <code>color=&quot;primary&quot;</code> and added <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to our close button. For a crisp edge, we remove the default border with <code>.border-0</code>.</p>', 3);
+const _hoisted_46 = { class: "docs-example rounded-top p-4" };
+const _hoisted_47 = { class: "d-flex" };
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-white align-items-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastClose</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2 m-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">white</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue toasts use local CSS variables on <code>.toast</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CToast <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CToast<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctoast" tabindex="-1">CToast <a class="anchor-link" href="#ctoast" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToast <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToast&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>autohide</strong></td><td>Auto hide the toast.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>delay</strong></td><td>Delay hiding the toast (ms).</td><td>number</td><td>-</td><td>5000</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to component and allow it to self dismiss.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>index</strong></td><td>index of the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title node for your component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="ctoastclose" tabindex="-1">CToastClose <a class="anchor-link" href="#ctoastclose" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastClose <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastClose <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastClose&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called before the dissmiss animation has started.</td><td></td></tr></tbody></table><h3 id="ctoastheader" tabindex="-1">CToastHeader <a class="anchor-link" href="#ctoastheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Automatically add a close button to the header.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-2" tabindex="-1">Events <a class="anchor-link" href="#events-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called after clicking the close button.</td><td></td></tr></tbody></table><h3 id="ctoaster" tabindex="-1">CToaster <a class="anchor-link" href="#ctoaster" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToaster <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToaster <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToaster&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>placement</strong></td><td>Describes the placement of component.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;middle-start&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;middle-end&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-end&#39;</code></td><td>-</td></tr></tbody></table>', 23);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CToastHeader = resolveComponent("CToastHeader");
+  const _component_CToastBody = resolveComponent("CToastBody");
+  const _component_CToast = resolveComponent("CToast");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CToaster = resolveComponent("CToaster");
+  const _component_CToastClose = resolveComponent("CToastClose");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_9, [
+      createVNode(_component_CToast, {
+        autohide: false,
+        visible: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CToastHeader, { closeButton: "" }, {
+            default: withCtx(() => [
+              _hoisted_10,
+              _hoisted_11,
+              _hoisted_12
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CToastBody, null, {
+            default: withCtx(() => [
+              createTextVNode("Hello, world! This is a toast message.")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_13,
+    createBaseVNode("div", _hoisted_14, [
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: $options.createToast
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Send a toast")
+        ]),
+        _: 1
+      }, 8, ["onClick"]),
+      createVNode(_component_CToaster, {
+        class: "p-3",
+        placement: "top-end"
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($data.toasts, (toast, index) => {
+            return openBlock(), createBlock(_component_CToast, {
+              visible: "",
+              key: index
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_CToastHeader, { closeButton: "" }, {
+                  default: withCtx(() => [
+                    createBaseVNode("span", _hoisted_15, toDisplayString(toast.title), 1),
+                    _hoisted_16
+                  ]),
+                  _: 2
+                }, 1024),
+                createVNode(_component_CToastBody, null, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(toast.content), 1)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1024);
+          }), 128))
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_17,
+    createBaseVNode("div", _hoisted_20, [
+      createVNode(_component_CToast, {
+        autohide: false,
+        visible: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CToastHeader, { closeButton: "" }, {
+            default: withCtx(() => [
+              _hoisted_21,
+              _hoisted_22,
+              _hoisted_23
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CToastBody, null, {
+            default: withCtx(() => [
+              createTextVNode("Hello, world! This is a toast message.")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_24,
+    createBaseVNode("div", _hoisted_27, [
+      createVNode(_component_CToaster, { class: "position-static" }, {
+        default: withCtx(() => [
+          createVNode(_component_CToast, {
+            autohide: false,
+            visible: ""
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CToastHeader, { closeButton: "" }, {
+                default: withCtx(() => [
+                  _hoisted_28,
+                  _hoisted_29,
+                  _hoisted_30
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CToastBody, null, {
+                default: withCtx(() => [
+                  createTextVNode("Hello, world! This is a toast message.")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CToast, {
+            autohide: false,
+            visible: ""
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CToastHeader, { closeButton: "" }, {
+                default: withCtx(() => [
+                  _hoisted_31,
+                  _hoisted_32,
+                  _hoisted_33
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CToastBody, null, {
+                default: withCtx(() => [
+                  createTextVNode("Hello, world! This is a toast message.")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_34,
+    createBaseVNode("div", _hoisted_37, [
+      createVNode(_component_CToast, {
+        autohide: false,
+        class: "align-items-center",
+        visible: ""
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_38, [
+            createVNode(_component_CToastBody, null, {
+              default: withCtx(() => [
+                createTextVNode("Hello, world! This is a toast message.")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CToastClose, { class: "me-2 m-auto" })
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_39,
+    createBaseVNode("div", _hoisted_41, [
+      createVNode(_component_CToast, {
+        autohide: false,
+        class: "align-items-center",
+        visible: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CToastBody, null, {
+            default: withCtx(() => [
+              createTextVNode(" Hello, world! This is a toast message. "),
+              createBaseVNode("div", _hoisted_42, [
+                createVNode(_component_CButton, {
+                  type: "button",
+                  color: "primary",
+                  size: "sm"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(" Take action ")
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_CToastClose, {
+                  as: "CButton",
+                  color: "secondary",
+                  size: "sm",
+                  class: "ms-1"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("Close")
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_43,
+    createBaseVNode("div", _hoisted_46, [
+      createVNode(_component_CToast, {
+        autohide: false,
+        color: "primary",
+        class: "text-white align-items-center",
+        visible: ""
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_47, [
+            createVNode(_component_CToastBody, null, {
+              default: withCtx(() => [
+                createTextVNode("Hello, world! This is a toast message.")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_CToastClose, {
+              class: "me-2 m-auto",
+              white: ""
+            })
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_48,
+    createVNode(_component_ScssDocs, {
+      file: "_toasts.scss",
+      capture: "toast-css-vars"
+    }),
+    _hoisted_52,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "toast-variables"
+    }),
+    _hoisted_55
+  ]);
+}
+const toast_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "toast.html.vue"]]);
+const data = JSON.parse('{"path":"/components/toast.html","title":"Vue Toast Component","lang":"en-US","frontmatter":{"title":"Vue Toast Component","name":"Toast","description":"Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.","other_frameworks":"toast","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/toast.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Basic","slug":"basic","link":"#basic","children":[]},{"level":3,"title":"Translucent","slug":"translucent","link":"#translucent","children":[]},{"level":3,"title":"Stacking","slug":"stacking","link":"#stacking","children":[]},{"level":3,"title":"Custom content","slug":"custom-content","link":"#custom-content","children":[]},{"level":3,"title":"Color schemes","slug":"color-schemes","link":"#color-schemes","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CToast","slug":"ctoast","link":"#ctoast","children":[]},{"level":3,"title":"CToastClose","slug":"ctoastclose","link":"#ctoastclose","children":[]},{"level":3,"title":"CToastHeader","slug":"ctoastheader","link":"#ctoastheader","children":[]},{"level":3,"title":"CToaster","slug":"ctoaster","link":"#ctoaster","children":[]}]}],"filePathRelative":"components/toast.md"}');
+export {
+  toast_html as comp,
+  data
+};
diff --git a/vue/docs/assets/toast.html-CSjYawpB.js b/vue/docs/assets/toast.html-CSjYawpB.js
deleted file mode 100644
index 68c55ce8320..00000000000
--- a/vue/docs/assets/toast.html-CSjYawpB.js
+++ /dev/null
@@ -1,366 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode, F as Fragment, j as renderList, h as createBlock, t as toDisplayString } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  data() {
-    return {
-      toasts: []
-    };
-  },
-  methods: {
-    createToast() {
-      this.toasts.push({
-        title: "new toast",
-        content: "Lorem ipsum dolor cet emit"
-      });
-    }
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>Vue toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p><h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview" aria-hidden="true">#</a></h2><p>Things to know when using the toast plugin:</p><ul><li>Toasts are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li><li>Toasts will automatically hide if you do not specify <code>autohide: false</code>.</li></ul><h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples" aria-hidden="true">#</a></h2><h3 id="basic" tabindex="-1">Basic <a class="anchor-link" href="#basic" aria-hidden="true">#</a></h3><p>To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use <code>display: flex</code>, allowing easy alignment of content thanks to our margin and flexbox utilities.</p><p>Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your &quot;toasted&quot; content and strongly encourage a dismiss button.</p>', 8);
-const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createBaseVNode("svg", {
-  class: "rounded me-2",
-  width: "20",
-  height: "20",
-  xmlns: "http://www.w3.org/2000/svg",
-  preserveAspectRatio: "xMidYMid slice",
-  focusable: "false",
-  role: "img"
-}, [
-  /* @__PURE__ */ createBaseVNode("rect", {
-    width: "100%",
-    height: "100%",
-    fill: "#007aff"
-  })
-], -1);
-const _hoisted_11 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
-const _hoisted_12 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
-const _hoisted_14 = { class: "docs-example rounded-top p-4" };
-const _hoisted_15 = { class: "me-auto fw-bold" };
-const _hoisted_16 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>createToast<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Send a toast<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToaster</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(toast, index) in toasts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{toast.title}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        {{ toast.content }}</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToaster</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">toasts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">createToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>toasts<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>\n<span class="line">          <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;new toast&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">          <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&#39;Lorem ipsum dolor cet emit&#39;</span></span>\n<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="translucent" tabindex="-1">Translucent <a class="anchor-link" href="#translucent" aria-hidden="true">#</a></h3><p>Toasts are slightly translucent to blend in with what&#39;s below them.</p>', 3);
-const _hoisted_20 = { class: "docs-example rounded-top p-4 bg-dark" };
-const _hoisted_21 = /* @__PURE__ */ createBaseVNode("svg", {
-  class: "rounded me-2",
-  width: "20",
-  height: "20",
-  xmlns: "http://www.w3.org/2000/svg",
-  preserveAspectRatio: "xMidYMid slice",
-  focusable: "false",
-  role: "img"
-}, [
-  /* @__PURE__ */ createBaseVNode("rect", {
-    width: "100%",
-    height: "100%",
-    fill: "#007aff"
-  })
-], -1);
-const _hoisted_22 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
-const _hoisted_23 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="stacking" tabindex="-1">Stacking <a class="anchor-link" href="#stacking" aria-hidden="true">#</a></h3><p>You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.</p>', 3);
-const _hoisted_27 = { class: "docs-example rounded-top p-4" };
-const _hoisted_28 = /* @__PURE__ */ createBaseVNode("svg", {
-  class: "rounded me-2",
-  width: "20",
-  height: "20",
-  xmlns: "http://www.w3.org/2000/svg",
-  preserveAspectRatio: "xMidYMid slice",
-  focusable: "false",
-  role: "img"
-}, [
-  /* @__PURE__ */ createBaseVNode("rect", {
-    width: "100%",
-    height: "100%",
-    fill: "#007aff"
-  })
-], -1);
-const _hoisted_29 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
-const _hoisted_30 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
-const _hoisted_31 = /* @__PURE__ */ createBaseVNode("svg", {
-  class: "rounded me-2",
-  width: "20",
-  height: "20",
-  xmlns: "http://www.w3.org/2000/svg",
-  preserveAspectRatio: "xMidYMid slice",
-  focusable: "false",
-  role: "img"
-}, [
-  /* @__PURE__ */ createBaseVNode("rect", {
-    width: "100%",
-    height: "100%",
-    fill: "#007aff"
-  })
-], -1);
-const _hoisted_32 = /* @__PURE__ */ createBaseVNode("span", { class: "me-auto fw-bold" }, "CoreUI for Vue.js", -1);
-const _hoisted_33 = /* @__PURE__ */ createBaseVNode("small", null, "7 min ago", -1);
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToaster</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-static<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">        <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastHeader</span> <span class="token attr-name">closeButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span></span>\n<span class="line">        <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rounded me-2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xMidYMid slice<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">focusable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#007aff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-auto fw-bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CoreUI for Vue.js<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>7 min ago<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastHeader</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToaster</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-content" tabindex="-1">Custom content <a class="anchor-link" href="#custom-content" aria-hidden="true">#</a></h3><p>Customize your toasts by removing sub-components, tweaking them with <a href="https://coreui.io/docs/4.0/utilities/api" target="_blank" rel="noopener noreferrer">utilities</a>, or by adding your own markup. Here we&#39;ve created a simpler toast by removing the default <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from <a href="https://icons.coreui.io" target="_blank" rel="noopener noreferrer">CoreUI Icons</a>, and using some <a href="https://coreui.io/docs/4.0/utilities/flex" target="_blank" rel="noopener noreferrer">flexbox utilities</a> to adjust the layout.</p>', 3);
-const _hoisted_37 = { class: "docs-example rounded-top p-4" };
-const _hoisted_38 = { class: "d-flex" };
-const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastClose</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2 m-auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Alternatively, you can also add additional controls and components to toasts.</p>', 2);
-const _hoisted_41 = { class: "docs-example rounded-top p-4" };
-const _hoisted_42 = { class: "mt-2 pt-2 border-top" };
-const _hoisted_43 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align-items-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Hello, world! This is a toast message.</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 pt-2 border-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    Take action</span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastClose</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>CButton<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastClose</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="color-schemes" tabindex="-1">Color schemes <a class="anchor-link" href="#color-schemes" aria-hidden="true">#</a></h3><p>Building on the above example, you can create different toast color schemes with our <a href="https://coreui.io/docs/4.0/utilities/colors" target="_blank" rel="noopener noreferrer">color</a> and <a href="https://coreui.io/docs/4.0//utilities/background" target="_blank" rel="noopener noreferrer">background</a> utilities. Here we&#39;ve set <code>color=&quot;primary&quot;</code> and added <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to our close button. For a crisp edge, we remove the default border with <code>.border-0</code>.</p>', 3);
-const _hoisted_46 = { class: "docs-example rounded-top p-4" };
-const _hoisted_47 = { class: "d-flex" };
-const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToast</span> <span class="token attr-name">:autohide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-white align-items-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">visible</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastBody</span><span class="token punctuation">&gt;</span></span>Hello, world! This is a toast message.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToastBody</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CToastClose</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>me-2 m-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">white</span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CToast</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue toasts use local CSS variables on <code>.toast</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_52 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CToast <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CToast<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctoast" tabindex="-1">CToast <a class="anchor-link" href="#ctoast" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToast <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToast&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>autohide</strong></td><td>Auto hide the toast.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code>, <code>string</code></td><td>-</td></tr><tr><td><strong>delay</strong></td><td>Delay hiding the toast (ms).</td><td>number</td><td>-</td><td>5000</td></tr><tr><td><strong>dismissible</strong></td><td>Optionally add a close button to component and allow it to self dismiss.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>index</strong></td><td>index of the component.</td><td>number</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title node for your component.</td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Callback fired when the component requests to be closed.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table><h3 id="ctoastclose" tabindex="-1">CToastClose <a class="anchor-link" href="#ctoastclose" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastClose <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastClose <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastClose&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>as</strong></td><td>Component used for the root node. Either a string to use a HTML element or a component.</td><td>string</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-1" tabindex="-1">Events <a class="anchor-link" href="#events-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called before the dissmiss animation has started.</td><td></td></tr></tbody></table><h3 id="ctoastheader" tabindex="-1">CToastHeader <a class="anchor-link" href="#ctoastheader" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToastHeader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToastHeader <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToastHeader&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>close-button</strong></td><td>Automatically add a close button to the header.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events-2" tabindex="-1">Events <a class="anchor-link" href="#events-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>close</strong></td><td>Event called after clicking the close button.</td><td></td></tr></tbody></table><h3 id="ctoaster" tabindex="-1">CToaster <a class="anchor-link" href="#ctoaster" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CToaster <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CToaster <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/toast/CToaster&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>placement</strong></td><td>Describes the placement of component.</td><td>string</td><td><code>&#39;top-start&#39;</code>, <code>&#39;top&#39;</code>, <code>&#39;top-end&#39;</code>, <code>&#39;middle-start&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;middle-end&#39;</code>, <code>&#39;bottom-start&#39;</code>, <code>&#39;bottom&#39;</code>, <code>&#39;bottom-end&#39;</code></td><td>-</td></tr></tbody></table>', 23);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CToastHeader = resolveComponent("CToastHeader");
-  const _component_CToastBody = resolveComponent("CToastBody");
-  const _component_CToast = resolveComponent("CToast");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CToaster = resolveComponent("CToaster");
-  const _component_CToastClose = resolveComponent("CToastClose");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_9, [
-      createVNode(_component_CToast, {
-        autohide: false,
-        visible: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CToastHeader, { closeButton: "" }, {
-            default: withCtx(() => [
-              _hoisted_10,
-              _hoisted_11,
-              _hoisted_12
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CToastBody, null, {
-            default: withCtx(() => [
-              createTextVNode("Hello, world! This is a toast message.")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_13,
-    createBaseVNode("div", _hoisted_14, [
-      createVNode(_component_CButton, {
-        color: "primary",
-        onClick: $options.createToast
-      }, {
-        default: withCtx(() => [
-          createTextVNode("Send a toast")
-        ]),
-        _: 1
-      }, 8, ["onClick"]),
-      createVNode(_component_CToaster, {
-        class: "p-3",
-        placement: "top-end"
-      }, {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList($data.toasts, (toast, index) => {
-            return openBlock(), createBlock(_component_CToast, {
-              visible: "",
-              key: index
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_CToastHeader, { closeButton: "" }, {
-                  default: withCtx(() => [
-                    createBaseVNode("span", _hoisted_15, toDisplayString(toast.title), 1),
-                    _hoisted_16
-                  ]),
-                  _: 2
-                }, 1024),
-                createVNode(_component_CToastBody, null, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(toast.content), 1)
-                  ]),
-                  _: 2
-                }, 1024)
-              ]),
-              _: 2
-            }, 1024);
-          }), 128))
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_17,
-    createBaseVNode("div", _hoisted_20, [
-      createVNode(_component_CToast, {
-        autohide: false,
-        visible: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CToastHeader, { closeButton: "" }, {
-            default: withCtx(() => [
-              _hoisted_21,
-              _hoisted_22,
-              _hoisted_23
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CToastBody, null, {
-            default: withCtx(() => [
-              createTextVNode("Hello, world! This is a toast message.")
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_24,
-    createBaseVNode("div", _hoisted_27, [
-      createVNode(_component_CToaster, { class: "position-static" }, {
-        default: withCtx(() => [
-          createVNode(_component_CToast, {
-            autohide: false,
-            visible: ""
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CToastHeader, { closeButton: "" }, {
-                default: withCtx(() => [
-                  _hoisted_28,
-                  _hoisted_29,
-                  _hoisted_30
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CToastBody, null, {
-                default: withCtx(() => [
-                  createTextVNode("Hello, world! This is a toast message.")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CToast, {
-            autohide: false,
-            visible: ""
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CToastHeader, { closeButton: "" }, {
-                default: withCtx(() => [
-                  _hoisted_31,
-                  _hoisted_32,
-                  _hoisted_33
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CToastBody, null, {
-                default: withCtx(() => [
-                  createTextVNode("Hello, world! This is a toast message.")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_34,
-    createBaseVNode("div", _hoisted_37, [
-      createVNode(_component_CToast, {
-        autohide: false,
-        class: "align-items-center",
-        visible: ""
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("div", _hoisted_38, [
-            createVNode(_component_CToastBody, null, {
-              default: withCtx(() => [
-                createTextVNode("Hello, world! This is a toast message.")
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CToastClose, { class: "me-2 m-auto" })
-          ])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_39,
-    createBaseVNode("div", _hoisted_41, [
-      createVNode(_component_CToast, {
-        autohide: false,
-        class: "align-items-center",
-        visible: ""
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CToastBody, null, {
-            default: withCtx(() => [
-              createTextVNode(" Hello, world! This is a toast message. "),
-              createBaseVNode("div", _hoisted_42, [
-                createVNode(_component_CButton, {
-                  type: "button",
-                  color: "primary",
-                  size: "sm"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(" Take action ")
-                  ]),
-                  _: 1
-                }),
-                createVNode(_component_CToastClose, {
-                  as: "CButton",
-                  color: "secondary",
-                  size: "sm",
-                  class: "ms-1"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("Close")
-                  ]),
-                  _: 1
-                })
-              ])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_43,
-    createBaseVNode("div", _hoisted_46, [
-      createVNode(_component_CToast, {
-        autohide: false,
-        color: "primary",
-        class: "text-white align-items-center",
-        visible: ""
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("div", _hoisted_47, [
-            createVNode(_component_CToastBody, null, {
-              default: withCtx(() => [
-                createTextVNode("Hello, world! This is a toast message.")
-              ]),
-              _: 1
-            }),
-            createVNode(_component_CToastClose, {
-              class: "me-2 m-auto",
-              white: ""
-            })
-          ])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_48,
-    createVNode(_component_ScssDocs, {
-      file: "_toasts.scss",
-      capture: "toast-css-vars"
-    }),
-    _hoisted_52,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "toast-variables"
-    }),
-    _hoisted_55
-  ]);
-}
-const toast_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "toast.html.vue"]]);
-const data = JSON.parse('{"path":"/components/toast.html","title":"Vue Toast Component","lang":"en-US","frontmatter":{"title":"Vue Toast Component","name":"Toast","description":"Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.","other_frameworks":"toast","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/toast.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Basic","slug":"basic","link":"#basic","children":[]},{"level":3,"title":"Translucent","slug":"translucent","link":"#translucent","children":[]},{"level":3,"title":"Stacking","slug":"stacking","link":"#stacking","children":[]},{"level":3,"title":"Custom content","slug":"custom-content","link":"#custom-content","children":[]},{"level":3,"title":"Color schemes","slug":"color-schemes","link":"#color-schemes","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CToast","slug":"ctoast","link":"#ctoast","children":[]},{"level":3,"title":"CToastClose","slug":"ctoastclose","link":"#ctoastclose","children":[]},{"level":3,"title":"CToastHeader","slug":"ctoastheader","link":"#ctoastheader","children":[]},{"level":3,"title":"CToaster","slug":"ctoaster","link":"#ctoaster","children":[]}]}],"filePathRelative":"components/toast.md"}');
-export {
-  toast_html as comp,
-  data
-};
diff --git a/vue/docs/assets/tooltip.html-D2DMDPTK.js b/vue/docs/assets/tooltip.html-D2DMDPTK.js
new file mode 100644
index 00000000000..c1e2eca232b
--- /dev/null
+++ b/vue/docs/assets/tooltip.html-D2DMDPTK.js
@@ -0,0 +1,267 @@
+import { _ as _export_sfc, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, e as createBaseVNode, f as createTextVNode, Y as withDirectives, h as createBlock, d as withCtx, b as createVNode, Z as normalizeStyle, a as createStaticVNode, $ as mergeProps, a0 as toHandlers } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  data() {
+    return {
+      customTooltipStyle: {
+        "--cui-tooltip-bg": "var(--cui-primary)"
+      }
+    };
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "tooltips-on-links",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Tooltips on links "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#tooltips-on-links",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, "Hover over the links below to see tooltips:", -1);
+const _hoisted_4 = { class: "docs-example rounded-top p-4" };
+const _hoisted_5 = { class: "text-body-secondary" };
+const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Tight pants next level keffiyeh</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> you probably <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    haven&#39;t heard of them.</span>\n<span class="line">  Photo booth beard raw denim letterpress vegan messenger</span>\n<span class="line">  bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie</span>\n<span class="line">  sustainable quinoa 8-bit american apparel</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> have a <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  terry richardson vinyl chambray. Beard stumptown,</span>\n<span class="line">  cardigans banh mi lomo thundercats. Tofu biodiesel</span>\n<span class="line">  williamsburg marfa, four loko mcsweeney&#39;&#39;s cleanse</span>\n<span class="line">  vegan chambray. A really ironic artisan</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> whatever keytar <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  scenester farm-to-table banksy Austin</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> twitter handle <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  freegan cred raw denim single-origin coffee viral.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="component" tabindex="-1">Component <a class="anchor-link" href="#component" aria-hidden="true">#</a></h3><p>Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.</p>', 3);
+const _hoisted_9 = { class: "docs-example rounded-top p-4" };
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="directive" tabindex="-1">Directive <a class="anchor-link" href="#directive" aria-hidden="true">#</a></h3>', 2);
+const _hoisted_12 = { class: "docs-example rounded-top p-4" };
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;top&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;right&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;bottom&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;left&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-popovers" tabindex="-1">Custom popovers <a class="anchor-link" href="#custom-popovers" aria-hidden="true">#</a></h3><p>You can customize the appearance of tooltips using <a href="#css-variables">CSS variables</a>. We set a custom <code>style</code> to scope our custom appearance and use it to override some of the local CSS variables.</p>', 3);
+const _hoisted_16 = { class: "docs-example rounded-top p-4" };
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span></span>\n<span class="line">    <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>This top tooltip is themed via CSS variables.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customTooltipStyle<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">       <span class="token literal-property property">customTooltipStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-tooltip-bg&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-primary)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage" tabindex="-1">Usage <a class="anchor-link" href="#usage" aria-hidden="true">#</a></h2><h3 id="disabled-elements" tabindex="-1">Disabled elements <a class="anchor-link" href="#disabled-elements" aria-hidden="true">#</a></h3><p>Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, ideally made keyboard-focusable using <code>tabindex=&quot;0&quot;</code>.</p>', 4);
+const _hoisted_21 = { class: "docs-example rounded-top p-4" };
+const _hoisted_22 = ["aria-describedby"];
+const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled tooltip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-block<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue toltips use local CSS variables on <code>.tooltip</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CTooltip <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CTooltip<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTooltip <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTooltip <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tooltip/CTooltip&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the tooltip.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the tooltip relative to its target.</td><td>array</td><td>-</td><td>[0, 6]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>() =&gt; [&#39;hover&#39;, &#39;focus&#39;]</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of tooltip component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 7);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CLink = resolveComponent("CLink");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CTooltip = resolveComponent("CTooltip");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  const _directive_c_tooltip = resolveDirective("c-tooltip");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    _hoisted_2,
+    _hoisted_3,
+    createBaseVNode("div", _hoisted_4, [
+      createBaseVNode("p", _hoisted_5, [
+        createTextVNode(" Tight pants next level keffiyeh "),
+        withDirectives((openBlock(), createBlock(_component_CLink, null, {
+          default: withCtx(() => [
+            createTextVNode(" you probably ")
+          ]),
+          _: 1
+        })), [
+          [_directive_c_tooltip, "Tooltip text"]
+        ]),
+        createTextVNode(" haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel "),
+        withDirectives((openBlock(), createBlock(_component_CLink, null, {
+          default: withCtx(() => [
+            createTextVNode(" have a ")
+          ]),
+          _: 1
+        })), [
+          [_directive_c_tooltip, "Tooltip text"]
+        ]),
+        createTextVNode(" terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic artisan "),
+        withDirectives((openBlock(), createBlock(_component_CLink, null, {
+          default: withCtx(() => [
+            createTextVNode(" whatever keytar ")
+          ]),
+          _: 1
+        })), [
+          [_directive_c_tooltip, "Tooltip text"]
+        ]),
+        createTextVNode(" scenester farm-to-table banksy Austin "),
+        withDirectives((openBlock(), createBlock(_component_CLink, null, {
+          default: withCtx(() => [
+            createTextVNode(" twitter handle ")
+          ]),
+          _: 1
+        })), [
+          [_directive_c_tooltip, "Tooltip text"]
+        ]),
+        createTextVNode(" freegan cred raw denim single-origin coffee viral. ")
+      ])
+    ]),
+    _hoisted_6,
+    createBaseVNode("div", _hoisted_9, [
+      createVNode(_component_CTooltip, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "top"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Tooltip on top")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CTooltip, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "right"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Tooltip on right")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CTooltip, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "bottom"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Tooltip on bottom")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CTooltip, {
+        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
+        placement: "left"
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Tooltip on left")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_10,
+    createBaseVNode("div", _hoisted_12, [
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Tooltip on top")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "top" }]
+      ]),
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Tooltip on right")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "right" }]
+      ]),
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Tooltip on bottom")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "bottom" }]
+      ]),
+      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
+        default: withCtx(() => [
+          createTextVNode("Tooltip on left")
+        ]),
+        _: 1
+      })), [
+        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "left" }]
+      ])
+    ]),
+    _hoisted_13,
+    createBaseVNode("div", _hoisted_16, [
+      createVNode(_component_CTooltip, {
+        content: "This top tooltip is themed via CSS variables.",
+        placement: "top",
+        style: normalizeStyle($data.customTooltipStyle)
+      }, {
+        toggler: withCtx(({ id, on }) => [
+          createVNode(_component_CButton, mergeProps({
+            color: "secondary",
+            "aria-describedby": id
+          }, toHandlers(on)), {
+            default: withCtx(() => [
+              createTextVNode("Custom popover")
+            ]),
+            _: 2
+          }, 1040, ["aria-describedby"])
+        ]),
+        _: 1
+      }, 8, ["style"])
+    ]),
+    _hoisted_17,
+    createBaseVNode("div", _hoisted_21, [
+      createVNode(_component_CTooltip, { content: "Disabled tooltip" }, {
+        toggler: withCtx(({ id, on }) => [
+          createBaseVNode("span", mergeProps({
+            class: "d-inline-block",
+            tabindex: 0,
+            "aria-describedby": id
+          }, toHandlers(on, true)), [
+            createVNode(_component_CButton, {
+              color: "primary",
+              disabled: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode("Disabled button")
+              ]),
+              _: 1
+            })
+          ], 16, _hoisted_22)
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_23,
+    createVNode(_component_ScssDocs, {
+      file: "_tooltip.scss",
+      capture: "tooltip-css-vars"
+    }),
+    _hoisted_27,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "tooltip-variables"
+    }),
+    _hoisted_30
+  ]);
+}
+const tooltip_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "tooltip.html.vue"]]);
+const data = JSON.parse('{"path":"/components/tooltip.html","title":"Vue Tooltip Component and Directive","lang":"en-US","frontmatter":{"title":"Vue Tooltip Component and Directive","name":"Tooltip","description":"Documentation and examples for adding Vue Tooltips.","other_frameworks":"tooltip","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/tooltip.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Tooltips on links","slug":"tooltips-on-links","link":"#tooltips-on-links","children":[]},{"level":3,"title":"Component","slug":"component","link":"#component","children":[]},{"level":3,"title":"Directive","slug":"directive","link":"#directive","children":[]},{"level":3,"title":"Custom popovers","slug":"custom-popovers","link":"#custom-popovers","children":[]}]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[{"level":3,"title":"Disabled elements","slug":"disabled-elements","link":"#disabled-elements","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CTooltip","slug":"ctooltip","link":"#ctooltip","children":[]}]}],"filePathRelative":"components/tooltip.md"}');
+export {
+  tooltip_html as comp,
+  data
+};
diff --git a/vue/docs/assets/tooltip.html-D9ViTdwE.js b/vue/docs/assets/tooltip.html-D9ViTdwE.js
deleted file mode 100644
index e1819f46c78..00000000000
--- a/vue/docs/assets/tooltip.html-D9ViTdwE.js
+++ /dev/null
@@ -1,267 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, Y as resolveDirective, o as openBlock, c as createElementBlock, a as createBaseVNode, e as createTextVNode, Z as withDirectives, h as createBlock, d as withCtx, b as createVNode, $ as normalizeStyle, f as createStaticVNode, a0 as mergeProps, a1 as toHandlers } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  data() {
-    return {
-      customTooltipStyle: {
-        "--cui-tooltip-bg": "var(--cui-primary)"
-      }
-    };
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
-  id: "examples",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Examples "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "tooltips-on-links",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Tooltips on links "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#tooltips-on-links",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, "Hover over the links below to see tooltips:", -1);
-const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = { class: "text-body-secondary" };
-const _hoisted_6 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-body-secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  Tight pants next level keffiyeh</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> you probably <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    haven&#39;t heard of them.</span>\n<span class="line">  Photo booth beard raw denim letterpress vegan messenger</span>\n<span class="line">  bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie</span>\n<span class="line">  sustainable quinoa 8-bit american apparel</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> have a <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  terry richardson vinyl chambray. Beard stumptown,</span>\n<span class="line">  cardigans banh mi lomo thundercats. Tofu biodiesel</span>\n<span class="line">  williamsburg marfa, four loko mcsweeney&#39;&#39;s cleanse</span>\n<span class="line">  vegan chambray. A really ironic artisan</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> whatever keytar <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  scenester farm-to-table banksy Austin</span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>Tooltip text&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> twitter handle <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  freegan cred raw denim single-origin coffee viral.</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="component" tabindex="-1">Component <a class="anchor-link" href="#component" aria-hidden="true">#</a></h3><p>Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.</p>', 3);
-const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="directive" tabindex="-1">Directive <a class="anchor-link" href="#directive" aria-hidden="true">#</a></h3>', 2);
-const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;top&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;right&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;bottom&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-c-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{content: &#39;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.&#39;, placement: &#39;left&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Tooltip on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-popovers" tabindex="-1">Custom popovers <a class="anchor-link" href="#custom-popovers" aria-hidden="true">#</a></h3><p>You can customize the appearance of tooltips using <a href="#css-variables">CSS variables</a>. We set a custom <code>style</code> to scope our custom appearance and use it to override some of the local CSS variables.</p>', 3);
-const _hoisted_16 = { class: "docs-example rounded-top p-4" };
-const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span></span>\n<span class="line">    <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>This top tooltip is themed via CSS variables.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customTooltipStyle<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom popover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> </span>\n<span class="line">       <span class="token literal-property property">customTooltipStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">          <span class="token string-property property">&#39;--cui-tooltip-bg&#39;</span><span class="token operator">:</span> <span class="token string">&#39;var(--cui-primary)&#39;</span><span class="token punctuation">,</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usage" tabindex="-1">Usage <a class="anchor-link" href="#usage" aria-hidden="true">#</a></h2><h3 id="disabled-elements" tabindex="-1">Disabled elements <a class="anchor-link" href="#disabled-elements" aria-hidden="true">#</a></h3><p>Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, ideally made keyboard-focusable using <code>tabindex=&quot;0&quot;</code>.</p>', 4);
-const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = ["aria-describedby"];
-const _hoisted_23 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled tooltip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#toggler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ id, on }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d-inline-block<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CTooltip</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>Vue toltips use local CSS variables on <code>.tooltip</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_27 = /* @__PURE__ */ createStaticVNode('<h4 id="how-to-use-css-variables" tabindex="-1">How to use CSS variables <a class="anchor-link" href="#how-to-use-css-variables" aria-hidden="true">#</a></h4><div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> vars <span class="token operator">=</span> <span class="token punctuation">{</span> </span>\n<span class="line">  <span class="token string-property property">&#39;--my-css-var&#39;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span>\n<span class="line">  <span class="token string-property property">&#39;--my-another-css-var&#39;</span><span class="token operator">:</span> <span class="token string">&quot;red&quot;</span> </span>\n<span class="line"><span class="token punctuation">}</span></span>\n<span class="line"><span class="token keyword">return</span> <span class="token operator">&lt;</span>CTooltip <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;vars&quot;</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>CTooltip<span class="token operator">&gt;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables" aria-hidden="true">#</a></h3>', 3);
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CTooltip <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CTooltip <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/tooltip/CTooltip&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>animation</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Apply a CSS fade transition to the tooltip.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>container</strong> <br><div class="badge bg-primary">v5.0.0+</div></td><td>Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default <code>document.body</code>.</td><td>HTMLElement | (() =&gt; HTMLElement) | string</td><td>-</td><td>&#39;body&#39;</td></tr><tr><td><strong>content</strong></td><td>Content for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #content&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>delay</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{ &#39;show&#39;: 500, &#39;hide&#39;: 100 }</code>.</td><td>number | { show: number; hide: number }</td><td>-</td><td>0</td></tr><tr><td><strong>fallback-placements</strong> <br><div class="badge bg-primary">4.9.0+</div></td><td>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td><td>Placements | Placements[]</td><td>-</td><td>() =&gt; [&#39;top&#39;, &#39;right&#39;, &#39;bottom&#39;, &#39;left&#39;]</td></tr><tr><td><strong>offset</strong></td><td>Offset of the tooltip relative to its target.</td><td>array</td><td>-</td><td>[0, 6]</td></tr><tr><td><strong>placement</strong></td><td>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.</td><td>Placement</td><td>-</td><td>&#39;top&#39;</td></tr><tr><td><strong>trigger</strong></td><td>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td><td>Triggers | Triggers[]</td><td><code>&#39;click&#39;</code>, <code>&#39;focus&#39;</code>, <code>&#39;hover&#39;</code></td><td>() =&gt; [&#39;hover&#39;, &#39;focus&#39;]</td></tr><tr><td><strong>visible</strong></td><td>Toggle the visibility of tooltip component.</td><td>boolean</td><td>-</td><td>-</td></tr></tbody></table><h4 id="events" tabindex="-1">Events <a class="anchor-link" href="#events" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Event name</th><th>Description</th><th>Properties</th></tr></thead><tbody><tr><td><strong>hide</strong></td><td>Callback fired when the component requests to be hidden.</td><td></td></tr><tr><td><strong>show</strong></td><td>Callback fired when the component requests to be shown.</td><td></td></tr></tbody></table>', 7);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CLink = resolveComponent("CLink");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CTooltip = resolveComponent("CTooltip");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  const _directive_c_tooltip = resolveDirective("c-tooltip");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    createBaseVNode("div", _hoisted_4, [
-      createBaseVNode("p", _hoisted_5, [
-        createTextVNode(" Tight pants next level keffiyeh "),
-        withDirectives((openBlock(), createBlock(_component_CLink, null, {
-          default: withCtx(() => [
-            createTextVNode(" you probably ")
-          ]),
-          _: 1
-        })), [
-          [_directive_c_tooltip, "Tooltip text"]
-        ]),
-        createTextVNode(" haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel "),
-        withDirectives((openBlock(), createBlock(_component_CLink, null, {
-          default: withCtx(() => [
-            createTextVNode(" have a ")
-          ]),
-          _: 1
-        })), [
-          [_directive_c_tooltip, "Tooltip text"]
-        ]),
-        createTextVNode(" terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic artisan "),
-        withDirectives((openBlock(), createBlock(_component_CLink, null, {
-          default: withCtx(() => [
-            createTextVNode(" whatever keytar ")
-          ]),
-          _: 1
-        })), [
-          [_directive_c_tooltip, "Tooltip text"]
-        ]),
-        createTextVNode(" scenester farm-to-table banksy Austin "),
-        withDirectives((openBlock(), createBlock(_component_CLink, null, {
-          default: withCtx(() => [
-            createTextVNode(" twitter handle ")
-          ]),
-          _: 1
-        })), [
-          [_directive_c_tooltip, "Tooltip text"]
-        ]),
-        createTextVNode(" freegan cred raw denim single-origin coffee viral. ")
-      ])
-    ]),
-    _hoisted_6,
-    createBaseVNode("div", _hoisted_9, [
-      createVNode(_component_CTooltip, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "top"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Tooltip on top")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CTooltip, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "right"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Tooltip on right")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CTooltip, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "bottom"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Tooltip on bottom")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_CTooltip, {
-        content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus",
-        placement: "left"
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Tooltip on left")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_10,
-    createBaseVNode("div", _hoisted_12, [
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Tooltip on top")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "top" }]
-      ]),
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Tooltip on right")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "right" }]
-      ]),
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Tooltip on bottom")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "bottom" }]
-      ]),
-      withDirectives((openBlock(), createBlock(_component_CButton, { color: "secondary" }, {
-        default: withCtx(() => [
-          createTextVNode("Tooltip on left")
-        ]),
-        _: 1
-      })), [
-        [_directive_c_tooltip, { content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", placement: "left" }]
-      ])
-    ]),
-    _hoisted_13,
-    createBaseVNode("div", _hoisted_16, [
-      createVNode(_component_CTooltip, {
-        content: "This top tooltip is themed via CSS variables.",
-        placement: "top",
-        style: normalizeStyle($data.customTooltipStyle)
-      }, {
-        toggler: withCtx(({ id, on }) => [
-          createVNode(_component_CButton, mergeProps({
-            color: "secondary",
-            "aria-describedby": id
-          }, toHandlers(on)), {
-            default: withCtx(() => [
-              createTextVNode("Custom popover")
-            ]),
-            _: 2
-          }, 1040, ["aria-describedby"])
-        ]),
-        _: 1
-      }, 8, ["style"])
-    ]),
-    _hoisted_17,
-    createBaseVNode("div", _hoisted_21, [
-      createVNode(_component_CTooltip, { content: "Disabled tooltip" }, {
-        toggler: withCtx(({ id, on }) => [
-          createBaseVNode("span", mergeProps({
-            class: "d-inline-block",
-            tabindex: 0,
-            "aria-describedby": id
-          }, toHandlers(on, true)), [
-            createVNode(_component_CButton, {
-              color: "primary",
-              disabled: ""
-            }, {
-              default: withCtx(() => [
-                createTextVNode("Disabled button")
-              ]),
-              _: 1
-            })
-          ], 16, _hoisted_22)
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_23,
-    createVNode(_component_ScssDocs, {
-      file: "_tooltip.scss",
-      capture: "tooltip-css-vars"
-    }),
-    _hoisted_27,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "tooltip-variables"
-    }),
-    _hoisted_30
-  ]);
-}
-const tooltip_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "tooltip.html.vue"]]);
-const data = JSON.parse('{"path":"/components/tooltip.html","title":"Vue Tooltip Component and Directive","lang":"en-US","frontmatter":{"title":"Vue Tooltip Component and Directive","name":"Tooltip","description":"Documentation and examples for adding Vue Tooltips.","other_frameworks":"tooltip","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/tooltip.html"}]]},"headers":[{"level":2,"title":"Examples","slug":"examples","link":"#examples","children":[{"level":3,"title":"Tooltips on links","slug":"tooltips-on-links","link":"#tooltips-on-links","children":[]},{"level":3,"title":"Component","slug":"component","link":"#component","children":[]},{"level":3,"title":"Directive","slug":"directive","link":"#directive","children":[]},{"level":3,"title":"Custom popovers","slug":"custom-popovers","link":"#custom-popovers","children":[]}]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[{"level":3,"title":"Disabled elements","slug":"disabled-elements","link":"#disabled-elements","children":[]}]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CTooltip","slug":"ctooltip","link":"#ctooltip","children":[]}]}],"filePathRelative":"components/tooltip.md"}');
-export {
-  tooltip_html as comp,
-  data
-};
diff --git a/vue/docs/assets/v4.html-q9ZeJS7t.js b/vue/docs/assets/v4.html-Br_AIuga.js
similarity index 99%
rename from vue/docs/assets/v4.html-q9ZeJS7t.js
rename to vue/docs/assets/v4.html-Br_AIuga.js
index 58c5aac4037..2ff09992e83 100644
--- a/vue/docs/assets/v4.html-q9ZeJS7t.js
+++ b/vue/docs/assets/v4.html-Br_AIuga.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>CoreUI for Vue is the Vue.js version of CoreUI components library, so before read this migration guide, please check also <a href="https://coreui.io/docs/migration/v4/" target="_blank" rel="noopener noreferrer">CoreUI 3 to 4 migration guide</a>.</p><h2 id="components" tabindex="-1">Components <a class="anchor-link" href="#components" aria-hidden="true">#</a></h2><h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>fade</code>.</li><li>Deprecated property <code>closeButton</code>, use <code>dismissible</code> instead of.</li><li>Deprecated property <code>show</code>, use <code>visible</code> instead of.</li></ul><h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h3 id="cbreadcrumb" tabindex="-1">CBreadcrumb <a class="anchor-link" href="#cbreadcrumb" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>addClasses</code>.</li><li>Deprecated property <code>addLinkClasses</code>.</li><li>Deprecated property <code>addLastItemClasses</code>.</li><li>Deprecated property <code>items</code>.</li></ul><h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>block</code>.</li><li>Deprecated property <code>pressed</code>.</li></ul><h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>accentColor</code>, use utilities <code>class=&quot;border-top-{#color} border-top-3&quot;</code> instead of.</li><li>Deprecated property <code>align</code>.</li><li>Deprecated property <code>bodyWrapper</code>.</li><li>Deprecated property <code>borderColor</code>.</li><li>Deprecated property <code>tag</code>.</li></ul><h4 id="ccardbody" tabindex="-1">CCardBody <a class="anchor-link" href="#ccardbody" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>align</code>.</li><li>Deprecated property <code>color</code>.</li><li>Deprecated property <code>borderColor</code>.</li><li>Deprecated property <code>tag</code>.</li><li>Deprecated property <code>textColor</code>.</li></ul><h4 id="ccardfooter" tabindex="-1">CCardFooter <a class="anchor-link" href="#ccardfooter" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>align</code>.</li><li>Deprecated property <code>color</code>.</li><li>Deprecated property <code>borderColor</code>.</li><li>Deprecated property <code>tag</code>.</li><li>Deprecated property <code>textColor</code>.</li></ul><h4 id="ccardgroup" tabindex="-1">CCardGroup <a class="anchor-link" href="#ccardgroup" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>columns</code>.</li><li>Deprecated property <code>deck</code>.</li><li>Deprecated property <code>tag</code>.</li></ul><h4 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>align</code>.</li><li>Deprecated property <code>color</code>.</li><li>Deprecated property <code>borderColor</code>.</li><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li><li>Deprecated property <code>textColor</code>.</li></ul><h4 id="ccardimg" tabindex="-1">CCardImg <a class="anchor-link" href="#ccardimg" aria-hidden="true">#</a></h4><ul><li><strong>Component renamed to <code>CCardImage</code></strong></li><li>Deprecated property <code>variant</code>, use <code>orientation</code> instead of.</li></ul><h4 id="ccardimgoverlay" tabindex="-1">CCardImgOverlay <a class="anchor-link" href="#ccardimgoverlay" aria-hidden="true">#</a></h4><ul><li><strong>Component renamed to <code>CCardImageOverlay</code></strong></li><li>Deprecated property <code>tag</code>.</li></ul><h4 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h4 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h4 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h3 id="ccarousel" tabindex="-1">CCarousel <a class="anchor-link" href="#ccarousel" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>animate</code>.</li><li>Deprecated property <code>arrows</code>, use <code>controls</code> instead of.</li><li>Deprecated property <code>indicatorClasses</code>.</li><li>Deprecated property <code>height</code>.</li></ul><h4 id="ccarouselcontrol" tabindex="-1">CCarouselControl <a class="anchor-link" href="#ccarouselcontrol" aria-hidden="true">#</a></h4><ul><li>Component is depracated, use <code>&lt;CCarousel controls&gt;</code> instead of.</li></ul><h4 id="ccarouselindicators" tabindex="-1">CCarouselIndicators <a class="anchor-link" href="#ccarouselindicators" aria-hidden="true">#</a></h4><ul><li>Component is depracated, use <code>&lt;CCarousel indicators&gt;</code> instead of.</li></ul><h4 id="ccarouselinner" tabindex="-1">CCarouselInner <a class="anchor-link" href="#ccarouselinner" aria-hidden="true">#</a></h4><ul><li>Component is depracated.</li></ul><h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>duration</code>.</li><li>Deprecated property <code>navbar</code>.</li><li>Deprecated property <code>transition</code>.</li><li>Deprecated property <code>show</code>, use <code>visible</code> instead of.</li></ul><h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>addMenuClasses</code>.</li><li>Deprecated property <code>addTogglerClasses</code>.</li><li>Deprecated property <code>caret</code>.</li><li>Deprecated property <code>color</code>.</li><li>Deprecated property <code>inNav</code>, use <code>variant=&quot;nav-item&quot;</code> instead of.</li><li>Deprecated property <code>togglerText</code>.</li><li>Deprecated property <code>show</code>, use <code>visible</code> instead of.</li><li>Deprecated property <code>size</code>.</li><li>Deprecated property <code>split</code>.</li></ul><h4 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h3 id="cembed" tabindex="-1">CEmbed <a class="anchor-link" href="#cembed" aria-hidden="true">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cfade" tabindex="-1">CFade <a class="anchor-link" href="#cfade" aria-hidden="true">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>withSubheader</code>.</li><li>Deprecated component <code>CHeaderNavItem</code>, use <code>CNavItem</code> instead of.</li><li>Deprecated component <code>CHeaderNavLink</code>, use <code>CNavLink</code> instead of.</li></ul><h3 id="cimg" tabindex="-1">CImg <a class="anchor-link" href="#cimg" aria-hidden="true">#</a></h3><ul><li><strong>Component renamed to <code>CImage</code></strong></li><li>Deprecated property <code>block</code>.</li><li>Deprecated property <code>fluidGrow</code>.</li><li>Deprecated property <code>placeholderColor</code>.</li><li>Deprecated property <code>shape</code>.</li><li>Deprecated property <code>tag</code>.</li></ul><h3 id="cjumbotron" tabindex="-1">CJumbotron <a class="anchor-link" href="#cjumbotron" aria-hidden="true">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>horizontal</code>, use <code>layout</code> instead of.</li><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h4 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>accent</code>.</li><li>Deprecated property <code>action</code>, use property <code>component=&quot;a&quot;</code> or <code>component=&quot;button&quot;</code> instead of.</li><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h3 id="cmedia" tabindex="-1">CMedia <a class="anchor-link" href="#cmedia" aria-hidden="true">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>addContentClass</code>.</li><li>Deprecated property <code>borderColor</code>, use utilities <code>class=&quot;border border-{#color}&quot;</code> instead of.</li><li>Deprecated property <code>centered</code>.</li><li>Deprecated property <code>closeOnBackdrop</code>.</li><li>Deprecated property <code>fade</code>, use <code>transition</code> instead of.</li><li>Deprecated property <code>onClosed</code>.</li><li>Deprecated property <code>onOpened</code>.</li><li>Deprecated property <code>show</code>, use <code>visible</code> instead of.</li></ul><h4 id="cmodalbody" tabindex="-1">CModalBody <a class="anchor-link" href="#cmodalbody" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>.</li></ul><h4 id="cmodalfooter" tabindex="-1">CModalFooter <a class="anchor-link" href="#cmodalfooter" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>.</li></ul><h4 id="cmodalheader" tabindex="-1">CModalHeader <a class="anchor-link" href="#cmodalheader" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>.</li></ul><h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>inCard</code>.</li><li>Deprecated property <code>fill</code>, use <code>layout=&quot;fill&quot;</code> instead of.</li><li>Deprecated property <code>justified</code>, use <code>layout=&quot;justified&quot;</code> instead of.</li></ul><h4 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>default</code>.</li></ul><h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>expandable</code>, use <code>expand</code> instead of.</li><li>Deprecated property <code>fixed</code>, use <code>placement=&quot;fixed-top&quot;</code> instead of.</li><li>Deprecated property <code>light</code>, use <code>colorScheme=&quot;light&quot;</code> instead of.</li><li>Deprecated property <code>sticky</code>, use <code>placement=&quot;sticky-top&quot;</code> instead of.</li><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h4 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h4 id="cnavbartext" tabindex="-1">CNavbarText <a class="anchor-link" href="#cnavbartext" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h3 id="cpagination" tabindex="-1">CPagination <a class="anchor-link" href="#cpagination" aria-hidden="true">#</a></h3><ul><li>**The component has been split into <code>CPagination</code> and to <code>CSmartPagination</code> components.</li></ul><h3 id="cpopover" tabindex="-1">CPopover <a class="anchor-link" href="#cpopover" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>header</code>, use <code>title</code> instead of.</li></ul><h3 id="cprogress" tabindex="-1">CProgress <a class="anchor-link" href="#cprogress" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>max</code>.</li><li>Deprecated property <code>precision</code>.</li><li>Deprecated property <code>showPercentage</code>.</li><li>Deprecated property <code>showValue</code>.</li><li>Deprecated property <code>size</code>, use <code>height</code> instead of.</li><li>Deprecated property <code>striped</code>, use <code>variant=&quot;striped&quot;</code> instead of.</li></ul><h3 id="cprogressbar" tabindex="-1">CProgressBar <a class="anchor-link" href="#cprogressbar" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>max</code>.</li><li>Deprecated property <code>precision</code>.</li><li>Deprecated property <code>showPercentage</code>.</li><li>Deprecated property <code>showValue</code>.</li><li>Deprecated property <code>size</code>, use <code>height</code> instead of.</li><li>Deprecated property <code>striped</code>, use <code>variant=&quot;striped&quot;</code> instead of.</li></ul><h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>minimize</code> use <code>narrow</code> instead of.</li><li>Deprecated property <code>dropdownMode</code>.</li><li>Deprecated component <code>CSidebarForm</code>, use <code>CForm</code> instead of.</li><li>Deprecated component <code>CSidebarNavDivider</code>, use <code>CNavDivider</code> instead of.</li><li>Deprecated component <code>CSidebarNavDropdown</code>, use <code>CNavGroup</code> instead of.</li><li>Deprecated component <code>CSidebarNavLink</code>, use <code>CNavLink</code> instead of.</li><li>Deprecated component <code>CSidebarNavItem</code>, use <code>CNavItem</code> instead of.</li><li>Deprecated component <code>CSidebarNavTitile</code>, use <code>CNavTitle</code> instead of.</li></ul><h3 id="cswitch" tabindex="-1">CSwitch <a class="anchor-link" href="#cswitch" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>CFormSwitch</code> instead of.</li></ul><h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>grow</code>, use <code>variant=&quot;grow&quot;</code> instead of.</li><li>Deprecated property <code>tag</code>, use <code>component</code> instead of.</li></ul><h3 id="ctabs" tabindex="-1">CTabs <a class="anchor-link" href="#ctabs" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>&lt;CNav variant=&quot;tabs&quot; role=&quot;tablist&quot;&gt;</code> instead of</li></ul><h4 id="ctabcontent" tabindex="-1">CTabContent <a class="anchor-link" href="#ctabcontent" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>fade</code>.</li></ul><h4 id="ctabpane" tabindex="-1">CTabPane <a class="anchor-link" href="#ctabpane" aria-hidden="true">#</a></h4><ul><li>Deprecated property <code>active</code>, use <code>visible</code> instead of.</li></ul><h3 id="ctoast" tabindex="-1">CToast <a class="anchor-link" href="#ctoast" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>fade</code>, use <code>animation</code> instead of.</li><li>Deprecated property <code>show</code>, use <code>visible</code> instead of.</li><li>Deprecated property <code>onStateChange</code>.</li></ul><h4 id="ctoastbody" tabindex="-1">CToastBody <a class="anchor-link" href="#ctoastbody" aria-hidden="true">#</a></h4><h4 id="ctoastheader" tabindex="-1">CToastHeader <a class="anchor-link" href="#ctoastheader" aria-hidden="true">#</a></h4><h3 id="ctoggler" tabindex="-1">CToggler <a class="anchor-link" href="#ctoggler" aria-hidden="true">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>interactive</code>.</li><li>Deprecated property <code>advancedOptions</code>.</li></ul><h2 id="forms" tabindex="-1">Forms <a class="anchor-link" href="#forms" aria-hidden="true">#</a></h2><h3 id="cformgroup" tabindex="-1">CFormGroup <a class="anchor-link" href="#cformgroup" aria-hidden="true">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cinput" tabindex="-1">CInput <a class="anchor-link" href="#cinput" aria-hidden="true">#</a></h3><ul><li><strong>Component renamed to <code>CFormInput</code></strong></li><li>Deprecated property <code>plaintext</code>, use <code>plain-text</code> instead of.</li></ul><h3 id="cinputcheckbox" tabindex="-1">CInputCheckbox <a class="anchor-link" href="#cinputcheckbox" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>&lt;CFormCheck&gt;</code> instead of.</li></ul><h3 id="cinputfile" tabindex="-1">CInputFile <a class="anchor-link" href="#cinputfile" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>&lt;CFormInput type=&quot;file&quot;&gt;</code> instead of.</li></ul><h3 id="cinputradio" tabindex="-1">CInputRadio <a class="anchor-link" href="#cinputradio" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>&lt;CFormCheck type=&quot;radio&quot;&gt;</code> instead of.</li></ul><h3 id="cinputgroup" tabindex="-1">CInputGroup <a class="anchor-link" href="#cinputgroup" aria-hidden="true">#</a></h3><h4 id="cinputgroupaddon" tabindex="-1">CInputGroupAddon <a class="anchor-link" href="#cinputgroupaddon" aria-hidden="true">#</a></h4><ul><li>Component is depracated, use <code>CInputGroupText</code> instead of.</li></ul><h3 id="cselect" tabindex="-1">CSelect <a class="anchor-link" href="#cselect" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>&lt;CFormSelect&gt;</code> instead of.</li></ul><h3 id="cvalidfeedback" tabindex="-1">CValidFeedback <a class="anchor-link" href="#cvalidfeedback" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>&lt;CFormFeedback valid&gt;</code> instead of.</li></ul><h3 id="cinvalidfeedback" tabindex="-1">CInvalidFeedback <a class="anchor-link" href="#cinvalidfeedback" aria-hidden="true">#</a></h3><ul><li>Component is depracated, use <code>&lt;CCFormFeedback invalid&gt;</code> instead of.</li></ul><h2 id="layout" tabindex="-1">Layout <a class="anchor-link" href="#layout" aria-hidden="true">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>tag</code>.</li></ul><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>tag</code>.</li><li>Deprecated property <code>width</code>, use <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>.</li></ul><h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>alignHorizontal</code>.</li><li>Deprecated property <code>alignVertical</code>.</li><li>Deprecated property <code>form</code>.</li><li>Deprecated property <code>gutters</code>.</li><li>Deprecated property <code>tag</code>.</li><li>Deprecated property <code>width</code>, use <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>.</li></ul>', 133);
 const _hoisted_134 = [
diff --git a/vue/docs/assets/v5.html-zQzsnVtz.js b/vue/docs/assets/v5.html-D8yxOVYF.js
similarity index 86%
rename from vue/docs/assets/v5.html-zQzsnVtz.js
rename to vue/docs/assets/v5.html-D8yxOVYF.js
index d487a8e0380..fdd074d78e9 100644
--- a/vue/docs/assets/v5.html-zQzsnVtz.js
+++ b/vue/docs/assets/v5.html-D8yxOVYF.js
@@ -1,6 +1,6 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>CoreUI for Vue is the Vue.js version of CoreUI components library, so before read this migration guide, please check also <a href="https://coreui.io/docs/migration/v5/" target="_blank" rel="noopener noreferrer">CoreUI 4 to 5 migration guide</a>.</p><h2 id="components" tabindex="-1">Components <a class="anchor-link" href="#components" aria-hidden="true">#</a></h2><h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar" aria-hidden="true">#</a></h3><ul><li>Deprecated <code>textColor</code> values: <code>muted</code>, <code>high-emphasis</code>, <code>medium-emphasis</code>, <code>disabled</code>, <code>high-emphasis-inverse</code>, <code>medium-emphasis-inverse</code>, <code>disabled-inverse</code>.</li><li>New <code>textColor</code> values: <code>primary-emphasis</code>, <code>secondary-emphasis</code>, <code>success-emphasis</code>, <code>danger-emphasis</code>, <code>warning-emphasis</code>, <code>info-emphasis</code>, <code>light-emphasis</code>, <code>body</code>, <code>body-emphasis</code>, <code>body-secondary</code>, <code>body-tertiary</code>, <code>black</code>, <code>black-50</code>, <code>white</code>, <code>white-50</code>.</li></ul><h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li><li>Deprecated <code>textColor</code> values: <code>muted</code>, <code>high-emphasis</code>, <code>medium-emphasis</code>, <code>disabled</code>, <code>high-emphasis-inverse</code>, <code>medium-emphasis-inverse</code>, <code>disabled-inverse</code>.</li><li>New <code>textColor</code> values: <code>primary-emphasis</code>, <code>secondary-emphasis</code>, <code>success-emphasis</code>, <code>danger-emphasis</code>, <code>warning-emphasis</code>, <code>info-emphasis</code>, <code>light-emphasis</code>, <code>body</code>, <code>body-emphasis</code>, <code>body-secondary</code>, <code>body-tertiary</code>, <code>black</code>, <code>black-50</code>, <code>white</code>, <code>white-50</code>.</li></ul><h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard" aria-hidden="true">#</a></h3><ul><li>Deprecated <code>textColor</code> values: <code>muted</code>, <code>high-emphasis</code>, <code>medium-emphasis</code>, <code>disabled</code>, <code>high-emphasis-inverse</code>, <code>medium-emphasis-inverse</code>, <code>disabled-inverse</code>.</li><li>New <code>textColor</code> values: <code>primary-emphasis</code>, <code>secondary-emphasis</code>, <code>success-emphasis</code>, <code>danger-emphasis</code>, <code>warning-emphasis</code>, <code>info-emphasis</code>, <code>light-emphasis</code>, <code>body</code>, <code>body-emphasis</code>, <code>body-secondary</code>, <code>body-tertiary</code>, <code>black</code>, <code>black-50</code>, <code>white</code>, <code>white-50</code>.</li></ul><h3 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardimage" tabindex="-1">CCardImage <a class="anchor-link" href="#ccardimage" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>white</code>, use <code>dark</code> instead of.</li></ul><h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker" aria-hidden="true">#</a></h3><ul><li>Removed property <code>format</code>, use <code>inputDateFormat</code> instead of.</li></ul><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Previous markup</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>MMMM-dd-yyyy<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">// New markup</span>\n<span class="line">import { format } from &#39;date-fns&#39;</span>\n<span class="line">//...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM-dd-yyyy&#39;)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><code>date-change</code> event return only the date object, instead of the date object and formatted string.</li></ul><h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker" aria-hidden="true">#</a></h3><ul><li>Removed property <code>format</code>, use <code>inputDateFormat</code> instead of.</li></ul><div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Previous markup</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>MMMM-dd-yyyy<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">// New markup</span>\n<span class="line">import { format } from &#39;date-fns&#39;</span>\n<span class="line">//...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM-dd-yyyy&#39;)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><code>start-date-change</code> and <code>end-date-change</code> events return only the date object, instead of the date object and formatted string.</li></ul><h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownitem" tabindex="-1">CDropdownItem <a class="anchor-link" href="#cdropdownitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownitemplain" tabindex="-1">CDropdownItemPlain <a class="anchor-link" href="#cdropdownitemplain" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownmenu" tabindex="-1">CDropdownMenu <a class="anchor-link" href="#cdropdownmenu" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdowntoggle" tabindex="-1">CDropdownToggle <a class="anchor-link" href="#cdropdowntoggle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cheaderbrand" tabindex="-1">CHeaderBrand <a class="anchor-link" href="#cheaderbrand" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cheadernav" tabindex="-1">CHeaderNav <a class="anchor-link" href="#cheadernav" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cinputgrouptext" tabindex="-1">CInputGroupText <a class="anchor-link" href="#cinputgrouptext" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="clink" tabindex="-1">CLink <a class="anchor-link" href="#clink" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cmodaltitle" tabindex="-1">CModalTitle <a class="anchor-link" href="#cmodaltitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect" aria-hidden="true">#</a></h3><ul><li>Removed key <code>text</code> in the options list, use <code>label</code> instead</li></ul><h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav" aria-hidden="true">#</a></h3><ul><li>The <code>underline</code> variant has been changed to <code>underline-border</code></li></ul><h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavbarbrand" tabindex="-1">CNavbarBrand <a class="anchor-link" href="#cnavbarbrand" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavlink" tabindex="-1">CNavLink <a class="anchor-link" href="#cnavlink" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavtitle" tabindex="-1">CNavTitle <a class="anchor-link" href="#cnavtitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="coffcanvastitle" tabindex="-1">COffcanvasTitle <a class="anchor-link" href="#coffcanvastitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cpaginationitem" tabindex="-1">CPaginationItem <a class="anchor-link" href="#cpaginationitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Sidebar has a light color scheme by default, use <code>colorScheme=&quot;dark&quot;</code> to make it dark.</li></ul><h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ctoastclose" tabindex="-1">CToastClose <a class="anchor-link" href="#ctoastclose" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li><li>Deprecated property <code>white</code>, use <code>dark</code> instead of.</li></ul>', 90);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<p>CoreUI for Vue is the Vue.js version of CoreUI components library, so before read this migration guide, please check also <a href="https://coreui.io/docs/migration/v5/" target="_blank" rel="noopener noreferrer">CoreUI 4 to 5 migration guide</a>.</p><h2 id="components" tabindex="-1">Components <a class="anchor-link" href="#components" aria-hidden="true">#</a></h2><h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar" aria-hidden="true">#</a></h3><ul><li>Deprecated <code>textColor</code> values: <code>muted</code>, <code>high-emphasis</code>, <code>medium-emphasis</code>, <code>disabled</code>, <code>high-emphasis-inverse</code>, <code>medium-emphasis-inverse</code>, <code>disabled-inverse</code>.</li><li>New <code>textColor</code> values: <code>primary-emphasis</code>, <code>secondary-emphasis</code>, <code>success-emphasis</code>, <code>danger-emphasis</code>, <code>warning-emphasis</code>, <code>info-emphasis</code>, <code>light-emphasis</code>, <code>body</code>, <code>body-emphasis</code>, <code>body-secondary</code>, <code>body-tertiary</code>, <code>black</code>, <code>black-50</code>, <code>white</code>, <code>white-50</code>.</li></ul><h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li><li>Deprecated <code>textColor</code> values: <code>muted</code>, <code>high-emphasis</code>, <code>medium-emphasis</code>, <code>disabled</code>, <code>high-emphasis-inverse</code>, <code>medium-emphasis-inverse</code>, <code>disabled-inverse</code>.</li><li>New <code>textColor</code> values: <code>primary-emphasis</code>, <code>secondary-emphasis</code>, <code>success-emphasis</code>, <code>danger-emphasis</code>, <code>warning-emphasis</code>, <code>info-emphasis</code>, <code>light-emphasis</code>, <code>body</code>, <code>body-emphasis</code>, <code>body-secondary</code>, <code>body-tertiary</code>, <code>black</code>, <code>black-50</code>, <code>white</code>, <code>white-50</code>.</li></ul><h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard" aria-hidden="true">#</a></h3><ul><li>Deprecated <code>textColor</code> values: <code>muted</code>, <code>high-emphasis</code>, <code>medium-emphasis</code>, <code>disabled</code>, <code>high-emphasis-inverse</code>, <code>medium-emphasis-inverse</code>, <code>disabled-inverse</code>.</li><li>New <code>textColor</code> values: <code>primary-emphasis</code>, <code>secondary-emphasis</code>, <code>success-emphasis</code>, <code>danger-emphasis</code>, <code>warning-emphasis</code>, <code>info-emphasis</code>, <code>light-emphasis</code>, <code>body</code>, <code>body-emphasis</code>, <code>body-secondary</code>, <code>body-tertiary</code>, <code>black</code>, <code>black-50</code>, <code>white</code>, <code>white-50</code>.</li></ul><h3 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardimage" tabindex="-1">CCardImage <a class="anchor-link" href="#ccardimage" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton" aria-hidden="true">#</a></h3><ul><li>Deprecated property <code>white</code>, use <code>dark</code> instead of.</li></ul><h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker" aria-hidden="true">#</a></h3><ul><li>Removed property <code>format</code>, use <code>inputDateFormat</code> instead of.</li></ul><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Previous markup</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>MMMM-dd-yyyy<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">// New markup</span>\n<span class="line">import { format } from &#39;date-fns&#39;</span>\n<span class="line">//...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDatePicker</span> <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM-dd-yyyy&#39;)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><code>date-change</code> event return only the date object, instead of the date object and formatted string.</li></ul><h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker" aria-hidden="true">#</a></h3><ul><li>Removed property <code>format</code>, use <code>inputDateFormat</code> instead of.</li></ul><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line">// Previous markup</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>MMMM-dd-yyyy<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span>\n<span class="line">// New markup</span>\n<span class="line">import { format } from &#39;date-fns&#39;</span>\n<span class="line">//...</span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span> <span class="token attr-name">:inputDateFormat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(date) =&gt; format(new Date(date), &#39;MMMM-dd-yyyy&#39;)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><code>start-date-change</code> and <code>end-date-change</code> events return only the date object, instead of the date object and formatted string.</li></ul><h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownitem" tabindex="-1">CDropdownItem <a class="anchor-link" href="#cdropdownitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownitemplain" tabindex="-1">CDropdownItemPlain <a class="anchor-link" href="#cdropdownitemplain" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdownmenu" tabindex="-1">CDropdownMenu <a class="anchor-link" href="#cdropdownmenu" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cdropdowntoggle" tabindex="-1">CDropdownToggle <a class="anchor-link" href="#cdropdowntoggle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cheaderbrand" tabindex="-1">CHeaderBrand <a class="anchor-link" href="#cheaderbrand" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cheadernav" tabindex="-1">CHeaderNav <a class="anchor-link" href="#cheadernav" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cinputgrouptext" tabindex="-1">CInputGroupText <a class="anchor-link" href="#cinputgrouptext" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="clink" tabindex="-1">CLink <a class="anchor-link" href="#clink" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cmodaltitle" tabindex="-1">CModalTitle <a class="anchor-link" href="#cmodaltitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect" aria-hidden="true">#</a></h3><ul><li>Removed key <code>text</code> in the options list, use <code>label</code> instead</li></ul><h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav" aria-hidden="true">#</a></h3><ul><li>The <code>underline</code> variant has been changed to <code>underline-border</code></li></ul><h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavbarbrand" tabindex="-1">CNavbarBrand <a class="anchor-link" href="#cnavbarbrand" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavlink" tabindex="-1">CNavLink <a class="anchor-link" href="#cnavlink" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cnavtitle" tabindex="-1">CNavTitle <a class="anchor-link" href="#cnavtitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="coffcanvastitle" tabindex="-1">COffcanvasTitle <a class="anchor-link" href="#coffcanvastitle" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cpaginationitem" tabindex="-1">CPaginationItem <a class="anchor-link" href="#cpaginationitem" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Sidebar has a light color scheme by default, use <code>colorScheme=&quot;dark&quot;</code> to make it dark.</li></ul><h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li></ul><h3 id="ctoastclose" tabindex="-1">CToastClose <a class="anchor-link" href="#ctoastclose" aria-hidden="true">#</a></h3><ul><li><span class="badge bg-danger">Breaking</span> Renamed <code>component</code> property to <code>as</code>.</li><li>Deprecated property <code>white</code>, use <code>dark</code> instead of.</li></ul>', 90);
 const _hoisted_91 = [
   _hoisted_1
 ];
diff --git a/vue/docs/assets/validation.html-2QwCYaBH.js b/vue/docs/assets/validation.html-2QwCYaBH.js
new file mode 100644
index 00000000000..486af9eac42
--- /dev/null
+++ b/vue/docs/assets/validation.html-2QwCYaBH.js
@@ -0,0 +1,825 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-BoHWg5jI.js";
+const _sfc_main = {
+  data: () => {
+    return {
+      validatedCustom01: null,
+      validatedTooltip01: null
+    };
+  },
+  methods: {
+    handleSubmitCustom01(event) {
+      const form = event.currentTarget;
+      if (form.checkValidity() === false) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      this.validatedCustom01 = true;
+    },
+    handleSubmitTooltip01(event) {
+      const form = event.currentTarget;
+      if (form.checkValidity() === false) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      this.validatedTooltip01 = true;
+    }
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>For custom CoreUI form validation messages, you&#39;ll need to add the <code>novalidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your form controls.</p><p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.</p>', 3);
+const _hoisted_4 = { class: "docs-example rounded-top p-4" };
+const _hoisted_5 = /* @__PURE__ */ createBaseVNode("option", {
+  selected: "",
+  disabled: "",
+  value: ""
+}, " Choose... ", -1);
+const _hoisted_6 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
+const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> </span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3 needs-validation<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">novalidate</span> </span>\n<span class="line">    <span class="token attr-name">:validated</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validatedCustom01<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmitCustom01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">        <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mark<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom02<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Otto<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustomUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">          <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustomUsername<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">          <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please choose a username.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">        <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom04Feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid state.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom04<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Choose...</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid zip.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom05<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid date range.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom06<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid time.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom07<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>You must agree before submitting.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>invalidCheck<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Agree to terms and conditions<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">validatedCustom01</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">handleSubmitCustom01</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> form <span class="token operator">=</span> event<span class="token punctuation">.</span>currentTarget</span>\n<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>form<span class="token punctuation">.</span><span class="token function">checkValidity</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>validatedCustom01 <span class="token operator">=</span> <span class="token boolean">true</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="browser-defaults" tabindex="-1">Browser defaults <a class="anchor-link" href="#browser-defaults" aria-hidden="true">#</a></h2><p>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you&#39;ll see a slightly different style of feedback.</p><p>While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.</p>', 4);
+const _hoisted_11 = { class: "docs-example rounded-top p-4" };
+const _hoisted_12 = /* @__PURE__ */ createBaseVNode("option", {
+  selected: "",
+  disabled: "",
+  value: ""
+}, " Choose... ", -1);
+const _hoisted_13 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
+const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mark<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">      <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault02<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Otto<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefaultUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefaultUsername<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please choose a username.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">      <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault04Feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid state.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault04<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Choose...</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid zip.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault05<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>You must agree before submitting.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>invalidCheck<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Agree to terms and conditions<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-validation" tabindex="-1">Custom validation <a class="anchor-link" href="#custom-validation" aria-hidden="true">#</a></h2><p>In case you require custom or server-side validation, you can indicate invalid and valid form fields with <code>invalid</code> and <code>valid</code> boolean properties.</p><p>For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using <code>aria-describedby</code> (noting that this attribute allows more than one <code>id</code> to be referenced, in case the field already points to additional form text).</p>', 4);
+const _hoisted_18 = { class: "docs-example rounded-top p-4" };
+const _hoisted_19 = /* @__PURE__ */ createBaseVNode("option", { disabled: "" }, "Choose...", -1);
+const _hoisted_20 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
+const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3 needs-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">valid</span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@surname.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer02<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Repeat email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">valid</span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@surname.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServerUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend03<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">          <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please choose a username.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServerUsername<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">invalid</span></span>\n<span class="line">          <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer04<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid zip.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer05<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zip<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>You must agree before submitting.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>invalidCheck<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Agree to terms and conditions<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="supported-elements" tabindex="-1">Supported elements <a class="anchor-link" href="#supported-elements" aria-hidden="true">#</a></h2><p>Validation styles are available for the following form controls and components:</p><ul><li><code>&lt;CFormCheck&gt;</code>s</li><li><code>&lt;CFormInput&gt;</code>s</li><li><code>&lt;CFormSelect&gt;</code>s</li><li><code>&lt;CFormTextarea&gt;</code>s</li></ul>', 4);
+const _hoisted_25 = { class: "docs-example rounded-top p-4" };
+const _hoisted_26 = { class: "mb-3" };
+const _hoisted_27 = { class: "mb-3" };
+const _hoisted_28 = /* @__PURE__ */ createBaseVNode("option", {
+  selected: "",
+  value: ""
+}, " Open this select menu ", -1);
+const _hoisted_29 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
+const _hoisted_30 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
+const _hoisted_31 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
+const _hoisted_32 = { class: "mb-3" };
+const _hoisted_33 = { class: "mb-3" };
+const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">:validated</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please enter a message in the textarea.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTextarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Required example textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationFormCheck1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check this checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example invalid feedback text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">required</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio-stacked<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationFormCheck2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check this checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">required</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio-stacked<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationFormCheck3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Or toggle this other radio<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>More example invalid feedback text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">required</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example invalid select feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Open this select menu</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTextarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example invalid form file feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="tooltips" tabindex="-1">Tooltips <a class="anchor-link" href="#tooltips" aria-hidden="true">#</a></h2><p>If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with <code>position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>', 3);
+const _hoisted_37 = { class: "docs-example rounded-top p-4" };
+const _hoisted_38 = /* @__PURE__ */ createBaseVNode("option", {
+  selected: "",
+  disabled: "",
+  value: ""
+}, " Choose... ", -1);
+const _hoisted_39 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3 needs-validation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">novalidate</span> <span class="token attr-name">:validated</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validatedTooltip01<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmitTooltip01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip01<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">valid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Looks good!</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip02<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Otto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">valid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Looks good!</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltipUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltipUsername<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please choose a username.</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip03<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please provide a valid city.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip04<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please provide a valid city.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip05<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip05<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please provide a valid zip.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">validatedTooltip01</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">handleSubmitTooltip01</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> form <span class="token operator">=</span> event<span class="token punctuation">.</span>currentTarget</span>\n<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>form<span class="token punctuation">.</span><span class="token function">checkValidity</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>validatedTooltip01 <span class="token operator">=</span> <span class="token boolean">true</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>CoreUI for Vue components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
+const _hoisted_44 = /* @__PURE__ */ createBaseVNode("p", null, "These variables are also color mode adaptive, meaning they change color while in dark mode.", -1);
+const _hoisted_45 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "sass-variables",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("SASS variables "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#sass-variables",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_46 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "sass-mixins",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("SASS mixins "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#sass-mixins",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_47 = /* @__PURE__ */ createBaseVNode("p", null, "Two mixins are combined, through our loop, to generate our form validation feedback styles.", -1);
+const _hoisted_48 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "sass-maps",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("SASS maps "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#sass-maps",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_49 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("This is the validation Sass map from "),
+  /* @__PURE__ */ createBaseVNode("code", null, "_variables.scss"),
+  /* @__PURE__ */ createTextVNode(". Override or extend this to generate different or additional states.")
+], -1);
+const _hoisted_50 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("Maps of "),
+  /* @__PURE__ */ createBaseVNode("code", null, "$form-validation-states"),
+  /* @__PURE__ */ createTextVNode(" can contain three optional parameters to override tooltips and focus styles.")
+], -1);
+const _hoisted_51 = /* @__PURE__ */ createBaseVNode("h3", {
+  id: "sass-loops",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("SASS loops "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#sass-loops",
+    "aria-hidden": "true"
+  }, "#")
+], -1);
+const _hoisted_52 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode("Used to iterate over "),
+  /* @__PURE__ */ createBaseVNode("code", null, "$form-validation-states"),
+  /* @__PURE__ */ createTextVNode(" map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.")
+], -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CFormInput = resolveComponent("CFormInput");
+  const _component_CCol = resolveComponent("CCol");
+  const _component_CFormLabel = resolveComponent("CFormLabel");
+  const _component_CInputGroupText = resolveComponent("CInputGroupText");
+  const _component_CInputGroup = resolveComponent("CInputGroup");
+  const _component_CFormSelect = resolveComponent("CFormSelect");
+  const _component_CDateRangePicker = resolveComponent("CDateRangePicker");
+  const _component_CTimePicker = resolveComponent("CTimePicker");
+  const _component_CFormCheck = resolveComponent("CFormCheck");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CForm = resolveComponent("CForm");
+  const _component_CFormTextarea = resolveComponent("CFormTextarea");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_4, [
+      createVNode(_component_CForm, {
+        class: "row g-3 needs-validation",
+        novalidate: "",
+        validated: _ctx.validatedCustom01,
+        onSubmit: $options.handleSubmitCustom01
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackValid: "Looks good!",
+                id: "validationCustom01",
+                label: "First name",
+                required: "",
+                value: "Mark"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackValid: "Looks good!",
+                id: "validationCustom02",
+                label: "Email",
+                value: "Otto",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormLabel, { for: "validationCustomUsername" }, {
+                default: withCtx(() => [
+                  createTextVNode("Username")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CInputGroup, { class: "has-validation" }, {
+                default: withCtx(() => [
+                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend" }, {
+                    default: withCtx(() => [
+                      createTextVNode("@")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_CFormInput, {
+                    id: "validationCustomUsername",
+                    "aria-describedby": "inputGroupPrepend",
+                    feedbackInvalid: "Please choose a username.",
+                    required: ""
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "6" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackInvalid: "Please provide a valid city.",
+                id: "validationCustom03",
+                label: "City",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "3" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormSelect, {
+                "aria-describedby": "validationCustom04Feedback",
+                feedbackInvalid: "Please select a valid state.",
+                id: "validationCustom04",
+                label: "State",
+                required: ""
+              }, {
+                default: withCtx(() => [
+                  _hoisted_5,
+                  _hoisted_6
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "3" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackInvalid: "Please provide a valid zip.",
+                id: "validationCustom05",
+                label: "Zip",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "8" }, {
+            default: withCtx(() => [
+              createVNode(_component_CDateRangePicker, {
+                feedbackInvalid: "Please select a valid date range.",
+                id: "validationCustom06",
+                label: "Date range",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CTimePicker, {
+                feedbackInvalid: "Please select a valid time.",
+                id: "validationCustom07",
+                label: "Time",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "12" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormCheck, {
+                feedbackInvalid: "You must agree before submitting.",
+                id: "invalidCheck",
+                label: "Agree to terms and conditions",
+                required: "",
+                type: "checkbox"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "12" }, {
+            default: withCtx(() => [
+              createVNode(_component_CButton, {
+                color: "primary",
+                type: "submit"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("Submit form")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["validated", "onSubmit"])
+    ]),
+    _hoisted_7,
+    createBaseVNode("div", _hoisted_11, [
+      createVNode(_component_CForm, { class: "row g-3" }, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackValid: "Looks good!",
+                id: "validationDefault01",
+                label: "First name",
+                required: "",
+                value: "Mark"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackValid: "Looks good!",
+                id: "validationDefault02",
+                label: "Email",
+                value: "Otto",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormLabel, { for: "validationDefaultUsername" }, {
+                default: withCtx(() => [
+                  createTextVNode("Username")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CInputGroup, { class: "has-validation" }, {
+                default: withCtx(() => [
+                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend" }, {
+                    default: withCtx(() => [
+                      createTextVNode("@")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_CFormInput, {
+                    id: "validationDefaultUsername",
+                    "aria-describedby": "inputGroupPrepend",
+                    feedbackInvalid: "Please choose a username.",
+                    required: ""
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "6" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackInvalid: "Please provide a valid city.",
+                id: "validationDefault03",
+                label: "City",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "3" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormSelect, {
+                "aria-describedby": "validationDefault04Feedback",
+                feedbackInvalid: "Please select a valid state.",
+                id: "validationDefault04",
+                label: "State",
+                required: ""
+              }, {
+                default: withCtx(() => [
+                  _hoisted_12,
+                  _hoisted_13
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "3" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackInvalid: "Please provide a valid zip.",
+                id: "validationDefault05",
+                label: "Zip",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "12" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormCheck, {
+                feedbackInvalid: "You must agree before submitting.",
+                id: "invalidCheck",
+                label: "Agree to terms and conditions",
+                required: "",
+                type: "checkbox"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "12" }, {
+            default: withCtx(() => [
+              createVNode(_component_CButton, {
+                color: "primary",
+                type: "submit"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("Submit form")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_14,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CForm, { class: "row g-3 needs-validation" }, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedback: "Looks good!",
+                id: "validationServer01",
+                label: "Email",
+                required: "",
+                valid: "",
+                value: "name@surname.com"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedback: "Looks good!",
+                id: "validationServer02",
+                label: "Repeat email",
+                required: "",
+                valid: "",
+                value: "name@surname.com"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "4" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormLabel, { for: "validationServerUsername" }, {
+                default: withCtx(() => [
+                  createTextVNode("Username")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CInputGroup, { class: "has-validation" }, {
+                default: withCtx(() => [
+                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend03" }, {
+                    default: withCtx(() => [
+                      createTextVNode("@")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_CFormInput, {
+                    "aria-describedby": "inputGroupPrepend03",
+                    feedback: "Please choose a username.",
+                    id: "validationServerUsername",
+                    invalid: "",
+                    required: ""
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "6" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedback: "Please provide a valid city.",
+                id: "validationServer03",
+                invalid: "",
+                label: "City",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "3" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormSelect, {
+                feedback: "Please provide a valid city.",
+                id: "validationServer04",
+                invalid: "",
+                label: "State"
+              }, {
+                default: withCtx(() => [
+                  _hoisted_19,
+                  _hoisted_20
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: "3" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedback: "Please provide a valid zip.",
+                id: "validationServer05",
+                invalid: "",
+                label: "zip",
+                required: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "12" }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormCheck, {
+                feedbackInvalid: "You must agree before submitting.",
+                id: "invalidCheck",
+                invalid: "",
+                label: "Agree to terms and conditions",
+                required: "",
+                type: "checkbox"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { xs: "12" }, {
+            default: withCtx(() => [
+              createVNode(_component_CButton, {
+                color: "primary",
+                type: "submit"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("Submit form")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_21,
+    createBaseVNode("div", _hoisted_25, [
+      createVNode(_component_CForm, { validated: true }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_26, [
+            createVNode(_component_CFormTextarea, {
+              feedbackInvalid: "Please enter a message in the textarea.",
+              id: "validationTextarea",
+              label: "Textarea",
+              placeholder: "Required example textarea",
+              required: ""
+            })
+          ]),
+          createVNode(_component_CFormCheck, {
+            class: "mb-3",
+            id: "validationFormCheck1",
+            label: "Check this checkbox",
+            feedbackInvalid: "Example invalid feedback text",
+            required: ""
+          }),
+          createVNode(_component_CFormCheck, {
+            type: "radio",
+            name: "radio-stacked",
+            id: "validationFormCheck2",
+            label: "Check this checkbox",
+            required: ""
+          }),
+          createVNode(_component_CFormCheck, {
+            class: "mb-3",
+            type: "radio",
+            name: "radio-stacked",
+            id: "validationFormCheck3",
+            label: "Or toggle this other radio",
+            feedbackInvalid: "More example invalid feedback text",
+            required: ""
+          }),
+          createBaseVNode("div", _hoisted_27, [
+            createVNode(_component_CFormSelect, {
+              feedbackInvalid: "Example invalid select feedback",
+              "aria-label": "select example",
+              required: ""
+            }, {
+              default: withCtx(() => [
+                _hoisted_28,
+                _hoisted_29,
+                _hoisted_30,
+                _hoisted_31
+              ]),
+              _: 1
+            })
+          ]),
+          createBaseVNode("div", _hoisted_32, [
+            createVNode(_component_CFormInput, {
+              type: "file",
+              id: "validationTextarea",
+              feedbackInvalid: "Example invalid form file feedback",
+              "aria-label": "file example",
+              required: ""
+            })
+          ]),
+          createBaseVNode("div", _hoisted_33, [
+            createVNode(_component_CButton, {
+              type: "submit",
+              color: "primary",
+              disabled: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode("Submit form")
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_34,
+    createBaseVNode("div", _hoisted_37, [
+      createVNode(_component_CForm, {
+        class: "row g-3 needs-validation",
+        novalidate: "",
+        validated: _ctx.validatedTooltip01,
+        onSubmit: $options.handleSubmitTooltip01
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CCol, {
+            md: "4",
+            class: "position-relative"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackValid: "Looks good!",
+                id: "validationTooltip01",
+                label: "First name",
+                required: "",
+                tooltipFeedback: "",
+                value: "Mark"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            md: "4",
+            class: "position-relative"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                feedbackValid: "Looks good!",
+                id: "validationTooltip02",
+                label: "Last name",
+                required: "",
+                tooltipFeedback: "",
+                value: "Otto"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            md: "4",
+            class: "position-relative"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormLabel, { for: "validationTooltipUsername" }, {
+                default: withCtx(() => [
+                  createTextVNode("Username")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CInputGroup, { class: "has-validation" }, {
+                default: withCtx(() => [
+                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend" }, {
+                    default: withCtx(() => [
+                      createTextVNode("@")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_CFormInput, {
+                    "aria-describedby": "inputGroupPrependFeedback",
+                    feedbackInvalid: "Please choose a username.",
+                    id: "validationTooltipUsername",
+                    required: "",
+                    tooltipFeedback: ""
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            md: "6",
+            class: "position-relative"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                "aria-describedby": "validationTooltip03Feedback",
+                feedbackInvalid: "Please provide a valid city.",
+                id: "validationTooltip03",
+                label: "City",
+                required: "",
+                tooltipFeedback: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            md: "3",
+            class: "position-relative"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormSelect, {
+                "aria-describedby": "validationTooltip04Feedback",
+                feedbackInvalid: "Please select a valid state.",
+                id: "validationTooltip04",
+                label: "State",
+                required: "",
+                tooltipFeedback: ""
+              }, {
+                default: withCtx(() => [
+                  _hoisted_38,
+                  _hoisted_39
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            md: "3",
+            class: "position-relative"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CFormInput, {
+                "aria-describedby": "validationTooltip05Feedback",
+                feedbackInvalid: "Please provide a valid zip.",
+                id: "validationTooltip05",
+                label: "Zip",
+                required: "",
+                tooltipFeedback: ""
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            xs: "12",
+            class: "position-relative"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CButton, {
+                color: "primary",
+                type: "submit"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("Submit form")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["validated", "onSubmit"])
+    ]),
+    _hoisted_40,
+    createVNode(_component_ScssDocs, {
+      file: "_root.scss",
+      capture: "root-form-validation-variables"
+    }),
+    _hoisted_44,
+    _hoisted_45,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-feedback-variables"
+    }),
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-validation-colors"
+    }),
+    createVNode(_component_ScssDocs, {
+      file: "_variables-dark.scss",
+      capture: "form-validation-colors-dark"
+    }),
+    _hoisted_46,
+    _hoisted_47,
+    createVNode(_component_ScssDocs, {
+      file: "mixins/_forms.scss",
+      capture: "form-validation-mixins"
+    }),
+    _hoisted_48,
+    _hoisted_49,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "form-validation-states"
+    }),
+    _hoisted_50,
+    _hoisted_51,
+    _hoisted_52,
+    createVNode(_component_ScssDocs, {
+      file: "forms/_validation.scss",
+      capture: "form-validation-states-loop"
+    })
+  ]);
+}
+const validation_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "validation.html.vue"]]);
+const data = JSON.parse('{"path":"/forms/validation.html","title":"Vue Form Validation","lang":"en-US","frontmatter":{"title":"Vue Form Validation","name":"Validation","description":"Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/validation.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Browser defaults","slug":"browser-defaults","link":"#browser-defaults","children":[]},{"level":2,"title":"Custom validation","slug":"custom-validation","link":"#custom-validation","children":[]},{"level":2,"title":"Supported elements","slug":"supported-elements","link":"#supported-elements","children":[]},{"level":2,"title":"Tooltips","slug":"tooltips","link":"#tooltips","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]},{"level":3,"title":"SASS mixins","slug":"sass-mixins","link":"#sass-mixins","children":[]},{"level":3,"title":"SASS maps","slug":"sass-maps","link":"#sass-maps","children":[]},{"level":3,"title":"SASS loops","slug":"sass-loops","link":"#sass-loops","children":[]}]}],"filePathRelative":"forms/validation.md"}');
+export {
+  validation_html as comp,
+  data
+};
diff --git a/vue/docs/assets/validation.html-raaYsSh8.js b/vue/docs/assets/validation.html-raaYsSh8.js
deleted file mode 100644
index c581537c8b3..00000000000
--- a/vue/docs/assets/validation.html-raaYsSh8.js
+++ /dev/null
@@ -1,825 +0,0 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, f as createStaticVNode, e as createTextVNode } from "./app-Dv803XR0.js";
-const _sfc_main = {
-  data: () => {
-    return {
-      validatedCustom01: null,
-      validatedTooltip01: null
-    };
-  },
-  methods: {
-    handleSubmitCustom01(event) {
-      const form = event.currentTarget;
-      if (form.checkValidity() === false) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      this.validatedCustom01 = true;
-    },
-    handleSubmitTooltip01(event) {
-      const form = event.currentTarget;
-      if (form.checkValidity() === false) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      this.validatedTooltip01 = true;
-    }
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example" aria-hidden="true">#</a></h2><p>For custom CoreUI form validation messages, you&#39;ll need to add the <code>novalidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your form controls.</p><p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.</p>', 3);
-const _hoisted_4 = { class: "docs-example rounded-top p-4" };
-const _hoisted_5 = /* @__PURE__ */ createBaseVNode("option", {
-  selected: "",
-  disabled: "",
-  value: ""
-}, " Choose... ", -1);
-const _hoisted_6 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
-const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> </span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3 needs-validation<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">novalidate</span> </span>\n<span class="line">    <span class="token attr-name">:validated</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validatedCustom01<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">    <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmitCustom01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">        <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mark<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom02<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Otto<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustomUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">          <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustomUsername<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">          <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please choose a username.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">        <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom04Feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid state.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom04<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          Choose...</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid zip.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom05<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDateRangePicker</span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid date range.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom06<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date range<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CTimePicker</span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid time.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationCustom07<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>You must agree before submitting.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>invalidCheck<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Agree to terms and conditions<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">validatedCustom01</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">handleSubmitCustom01</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> form <span class="token operator">=</span> event<span class="token punctuation">.</span>currentTarget</span>\n<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>form<span class="token punctuation">.</span><span class="token function">checkValidity</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>validatedCustom01 <span class="token operator">=</span> <span class="token boolean">true</span></span>\n<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> </span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="browser-defaults" tabindex="-1">Browser defaults <a class="anchor-link" href="#browser-defaults" aria-hidden="true">#</a></h2><p>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you&#39;ll see a slightly different style of feedback.</p><p>While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.</p>', 4);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = /* @__PURE__ */ createBaseVNode("option", {
-  selected: "",
-  disabled: "",
-  value: ""
-}, " Choose... ", -1);
-const _hoisted_13 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
-const _hoisted_14 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First name<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mark<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">      <span class="token attr-name">feedbackValid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault02<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Otto<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefaultUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefaultUsername<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span> </span>\n<span class="line">        <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please choose a username.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">      <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault04Feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please select a valid state.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault04<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Choose...</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> </span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid zip.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationDefault05<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Zip<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>You must agree before submitting.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>invalidCheck<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Agree to terms and conditions<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-validation" tabindex="-1">Custom validation <a class="anchor-link" href="#custom-validation" aria-hidden="true">#</a></h2><p>In case you require custom or server-side validation, you can indicate invalid and valid form fields with <code>invalid</code> and <code>valid</code> boolean properties.</p><p>For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using <code>aria-describedby</code> (noting that this attribute allows more than one <code>id</code> to be referenced, in case the field already points to additional form text).</p>', 4);
-const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createBaseVNode("option", { disabled: "" }, "Choose...", -1);
-const _hoisted_20 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
-const _hoisted_21 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3 needs-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer01<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">valid</span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@surname.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Looks good!<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer02<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Repeat email<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">valid</span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name@surname.com<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServerUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend03<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">          <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please choose a username.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServerUsername<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">invalid</span></span>\n<span class="line">          <span class="token attr-name">required</span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer03<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>City<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid city.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer04<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>State<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please provide a valid zip.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationServer05<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zip<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>You must agree before submitting.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>invalidCheck<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">invalid</span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Agree to terms and conditions<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="supported-elements" tabindex="-1">Supported elements <a class="anchor-link" href="#supported-elements" aria-hidden="true">#</a></h2><p>Validation styles are available for the following form controls and components:</p><ul><li><code>&lt;CFormCheck&gt;</code>s</li><li><code>&lt;CFormInput&gt;</code>s</li><li><code>&lt;CFormSelect&gt;</code>s</li><li><code>&lt;CFormTextarea&gt;</code>s</li></ul>', 4);
-const _hoisted_25 = { class: "docs-example rounded-top p-4" };
-const _hoisted_26 = { class: "mb-3" };
-const _hoisted_27 = { class: "mb-3" };
-const _hoisted_28 = /* @__PURE__ */ createBaseVNode("option", {
-  selected: "",
-  value: ""
-}, " Open this select menu ", -1);
-const _hoisted_29 = /* @__PURE__ */ createBaseVNode("option", { value: "1" }, "One", -1);
-const _hoisted_30 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "Two", -1);
-const _hoisted_31 = /* @__PURE__ */ createBaseVNode("option", { value: "3" }, "Three", -1);
-const _hoisted_32 = { class: "mb-3" };
-const _hoisted_33 = { class: "mb-3" };
-const _hoisted_34 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">:validated</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormTextarea</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Please enter a message in the textarea.<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTextarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Required example textarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormTextarea</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationFormCheck1<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check this checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example invalid feedback text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">required</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio-stacked<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationFormCheck2<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Check this checkbox<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">required</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormCheck</span></span>\n<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio-stacked<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationFormCheck3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Or toggle this other radio<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>More example invalid feedback text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">required</span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example invalid select feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Open this select menu</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span></span>\n<span class="line">      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTextarea<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">feedbackInvalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Example invalid form file feedback<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file example<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">required</span></span>\n<span class="line">    <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="tooltips" tabindex="-1">Tooltips <a class="anchor-link" href="#tooltips" aria-hidden="true">#</a></h2><p>If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with <code>position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>', 3);
-const _hoisted_37 = { class: "docs-example rounded-top p-4" };
-const _hoisted_38 = /* @__PURE__ */ createBaseVNode("option", {
-  selected: "",
-  disabled: "",
-  value: ""
-}, " Choose... ", -1);
-const _hoisted_39 = /* @__PURE__ */ createBaseVNode("option", null, "...", -1);
-const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CForm</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row g-3 needs-validation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">novalidate</span> <span class="token attr-name">:validated</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validatedTooltip01<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmitTooltip01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip01<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip01<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mark<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">valid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Looks good!</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip02<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip02<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Otto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">valid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Looks good!</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltipUsername<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>has-validation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CInputGroupText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>@<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroupText</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltipUsername<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputGroupPrepend<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please choose a username.</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CInputGroup</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip03<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip03<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please provide a valid city.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip04<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormSelect</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip04<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Choose...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormSelect</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please provide a valid city.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormLabel</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip05<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormLabel</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormInput</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>validationTooltip05<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        Please provide a valid zip.</span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CFormFeedback</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-relative<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CForm</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>\n<span class="line">  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token literal-property property">validatedTooltip01</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>\n<span class="line">    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>\n<span class="line">      <span class="token function">handleSubmitTooltip01</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">        <span class="token keyword">const</span> form <span class="token operator">=</span> event<span class="token punctuation">.</span>currentTarget</span>\n<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>form<span class="token punctuation">.</span><span class="token function">checkValidity</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">          event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line">        <span class="token punctuation">}</span></span>\n<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>validatedTooltip01 <span class="token operator">=</span> <span class="token boolean">true</span></span>\n<span class="line">      <span class="token punctuation">}</span></span>\n<span class="line">    <span class="token punctuation">}</span></span>\n<span class="line">  <span class="token punctuation">}</span></span>\n<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing" aria-hidden="true">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables" aria-hidden="true">#</a></h3><p>CoreUI for Vue components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>', 4);
-const _hoisted_44 = /* @__PURE__ */ createBaseVNode("p", null, "These variables are also color mode adaptive, meaning they change color while in dark mode.", -1);
-const _hoisted_45 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "sass-variables",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("SASS variables "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#sass-variables",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_46 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "sass-mixins",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("SASS mixins "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#sass-mixins",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_47 = /* @__PURE__ */ createBaseVNode("p", null, "Two mixins are combined, through our loop, to generate our form validation feedback styles.", -1);
-const _hoisted_48 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "sass-maps",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("SASS maps "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#sass-maps",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_49 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("This is the validation Sass map from "),
-  /* @__PURE__ */ createBaseVNode("code", null, "_variables.scss"),
-  /* @__PURE__ */ createTextVNode(". Override or extend this to generate different or additional states.")
-], -1);
-const _hoisted_50 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("Maps of "),
-  /* @__PURE__ */ createBaseVNode("code", null, "$form-validation-states"),
-  /* @__PURE__ */ createTextVNode(" can contain three optional parameters to override tooltips and focus styles.")
-], -1);
-const _hoisted_51 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "sass-loops",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("SASS loops "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#sass-loops",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_52 = /* @__PURE__ */ createBaseVNode("p", null, [
-  /* @__PURE__ */ createTextVNode("Used to iterate over "),
-  /* @__PURE__ */ createBaseVNode("code", null, "$form-validation-states"),
-  /* @__PURE__ */ createTextVNode(" map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.")
-], -1);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CFormInput = resolveComponent("CFormInput");
-  const _component_CCol = resolveComponent("CCol");
-  const _component_CFormLabel = resolveComponent("CFormLabel");
-  const _component_CInputGroupText = resolveComponent("CInputGroupText");
-  const _component_CInputGroup = resolveComponent("CInputGroup");
-  const _component_CFormSelect = resolveComponent("CFormSelect");
-  const _component_CDateRangePicker = resolveComponent("CDateRangePicker");
-  const _component_CTimePicker = resolveComponent("CTimePicker");
-  const _component_CFormCheck = resolveComponent("CFormCheck");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CForm = resolveComponent("CForm");
-  const _component_CFormTextarea = resolveComponent("CFormTextarea");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_4, [
-      createVNode(_component_CForm, {
-        class: "row g-3 needs-validation",
-        novalidate: "",
-        validated: _ctx.validatedCustom01,
-        onSubmit: $options.handleSubmitCustom01
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackValid: "Looks good!",
-                id: "validationCustom01",
-                label: "First name",
-                required: "",
-                value: "Mark"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackValid: "Looks good!",
-                id: "validationCustom02",
-                label: "Email",
-                value: "Otto",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormLabel, { for: "validationCustomUsername" }, {
-                default: withCtx(() => [
-                  createTextVNode("Username")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CInputGroup, { class: "has-validation" }, {
-                default: withCtx(() => [
-                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend" }, {
-                    default: withCtx(() => [
-                      createTextVNode("@")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CFormInput, {
-                    id: "validationCustomUsername",
-                    "aria-describedby": "inputGroupPrepend",
-                    feedbackInvalid: "Please choose a username.",
-                    required: ""
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "6" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackInvalid: "Please provide a valid city.",
-                id: "validationCustom03",
-                label: "City",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "3" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormSelect, {
-                "aria-describedby": "validationCustom04Feedback",
-                feedbackInvalid: "Please select a valid state.",
-                id: "validationCustom04",
-                label: "State",
-                required: ""
-              }, {
-                default: withCtx(() => [
-                  _hoisted_5,
-                  _hoisted_6
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "3" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackInvalid: "Please provide a valid zip.",
-                id: "validationCustom05",
-                label: "Zip",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "8" }, {
-            default: withCtx(() => [
-              createVNode(_component_CDateRangePicker, {
-                feedbackInvalid: "Please select a valid date range.",
-                id: "validationCustom06",
-                label: "Date range",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CTimePicker, {
-                feedbackInvalid: "Please select a valid time.",
-                id: "validationCustom07",
-                label: "Time",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "12" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormCheck, {
-                feedbackInvalid: "You must agree before submitting.",
-                id: "invalidCheck",
-                label: "Agree to terms and conditions",
-                required: "",
-                type: "checkbox"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "12" }, {
-            default: withCtx(() => [
-              createVNode(_component_CButton, {
-                color: "primary",
-                type: "submit"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("Submit form")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["validated", "onSubmit"])
-    ]),
-    _hoisted_7,
-    createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CForm, { class: "row g-3" }, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackValid: "Looks good!",
-                id: "validationDefault01",
-                label: "First name",
-                required: "",
-                value: "Mark"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackValid: "Looks good!",
-                id: "validationDefault02",
-                label: "Email",
-                value: "Otto",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormLabel, { for: "validationDefaultUsername" }, {
-                default: withCtx(() => [
-                  createTextVNode("Username")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CInputGroup, { class: "has-validation" }, {
-                default: withCtx(() => [
-                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend" }, {
-                    default: withCtx(() => [
-                      createTextVNode("@")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CFormInput, {
-                    id: "validationDefaultUsername",
-                    "aria-describedby": "inputGroupPrepend",
-                    feedbackInvalid: "Please choose a username.",
-                    required: ""
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "6" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackInvalid: "Please provide a valid city.",
-                id: "validationDefault03",
-                label: "City",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "3" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormSelect, {
-                "aria-describedby": "validationDefault04Feedback",
-                feedbackInvalid: "Please select a valid state.",
-                id: "validationDefault04",
-                label: "State",
-                required: ""
-              }, {
-                default: withCtx(() => [
-                  _hoisted_12,
-                  _hoisted_13
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "3" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackInvalid: "Please provide a valid zip.",
-                id: "validationDefault05",
-                label: "Zip",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "12" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormCheck, {
-                feedbackInvalid: "You must agree before submitting.",
-                id: "invalidCheck",
-                label: "Agree to terms and conditions",
-                required: "",
-                type: "checkbox"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "12" }, {
-            default: withCtx(() => [
-              createVNode(_component_CButton, {
-                color: "primary",
-                type: "submit"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("Submit form")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_14,
-    createBaseVNode("div", _hoisted_18, [
-      createVNode(_component_CForm, { class: "row g-3 needs-validation" }, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedback: "Looks good!",
-                id: "validationServer01",
-                label: "Email",
-                required: "",
-                valid: "",
-                value: "name@surname.com"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedback: "Looks good!",
-                id: "validationServer02",
-                label: "Repeat email",
-                required: "",
-                valid: "",
-                value: "name@surname.com"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "4" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormLabel, { for: "validationServerUsername" }, {
-                default: withCtx(() => [
-                  createTextVNode("Username")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CInputGroup, { class: "has-validation" }, {
-                default: withCtx(() => [
-                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend03" }, {
-                    default: withCtx(() => [
-                      createTextVNode("@")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CFormInput, {
-                    "aria-describedby": "inputGroupPrepend03",
-                    feedback: "Please choose a username.",
-                    id: "validationServerUsername",
-                    invalid: "",
-                    required: ""
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "6" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedback: "Please provide a valid city.",
-                id: "validationServer03",
-                invalid: "",
-                label: "City",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "3" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormSelect, {
-                feedback: "Please provide a valid city.",
-                id: "validationServer04",
-                invalid: "",
-                label: "State"
-              }, {
-                default: withCtx(() => [
-                  _hoisted_19,
-                  _hoisted_20
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { md: "3" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedback: "Please provide a valid zip.",
-                id: "validationServer05",
-                invalid: "",
-                label: "zip",
-                required: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "12" }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormCheck, {
-                feedbackInvalid: "You must agree before submitting.",
-                id: "invalidCheck",
-                invalid: "",
-                label: "Agree to terms and conditions",
-                required: "",
-                type: "checkbox"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, { xs: "12" }, {
-            default: withCtx(() => [
-              createVNode(_component_CButton, {
-                color: "primary",
-                type: "submit"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("Submit form")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_21,
-    createBaseVNode("div", _hoisted_25, [
-      createVNode(_component_CForm, { validated: true }, {
-        default: withCtx(() => [
-          createBaseVNode("div", _hoisted_26, [
-            createVNode(_component_CFormTextarea, {
-              feedbackInvalid: "Please enter a message in the textarea.",
-              id: "validationTextarea",
-              label: "Textarea",
-              placeholder: "Required example textarea",
-              required: ""
-            })
-          ]),
-          createVNode(_component_CFormCheck, {
-            class: "mb-3",
-            id: "validationFormCheck1",
-            label: "Check this checkbox",
-            feedbackInvalid: "Example invalid feedback text",
-            required: ""
-          }),
-          createVNode(_component_CFormCheck, {
-            type: "radio",
-            name: "radio-stacked",
-            id: "validationFormCheck2",
-            label: "Check this checkbox",
-            required: ""
-          }),
-          createVNode(_component_CFormCheck, {
-            class: "mb-3",
-            type: "radio",
-            name: "radio-stacked",
-            id: "validationFormCheck3",
-            label: "Or toggle this other radio",
-            feedbackInvalid: "More example invalid feedback text",
-            required: ""
-          }),
-          createBaseVNode("div", _hoisted_27, [
-            createVNode(_component_CFormSelect, {
-              feedbackInvalid: "Example invalid select feedback",
-              "aria-label": "select example",
-              required: ""
-            }, {
-              default: withCtx(() => [
-                _hoisted_28,
-                _hoisted_29,
-                _hoisted_30,
-                _hoisted_31
-              ]),
-              _: 1
-            })
-          ]),
-          createBaseVNode("div", _hoisted_32, [
-            createVNode(_component_CFormInput, {
-              type: "file",
-              id: "validationTextarea",
-              feedbackInvalid: "Example invalid form file feedback",
-              "aria-label": "file example",
-              required: ""
-            })
-          ]),
-          createBaseVNode("div", _hoisted_33, [
-            createVNode(_component_CButton, {
-              type: "submit",
-              color: "primary",
-              disabled: ""
-            }, {
-              default: withCtx(() => [
-                createTextVNode("Submit form")
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_34,
-    createBaseVNode("div", _hoisted_37, [
-      createVNode(_component_CForm, {
-        class: "row g-3 needs-validation",
-        novalidate: "",
-        validated: _ctx.validatedTooltip01,
-        onSubmit: $options.handleSubmitTooltip01
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_CCol, {
-            md: "4",
-            class: "position-relative"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackValid: "Looks good!",
-                id: "validationTooltip01",
-                label: "First name",
-                required: "",
-                tooltipFeedback: "",
-                value: "Mark"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, {
-            md: "4",
-            class: "position-relative"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                feedbackValid: "Looks good!",
-                id: "validationTooltip02",
-                label: "Last name",
-                required: "",
-                tooltipFeedback: "",
-                value: "Otto"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, {
-            md: "4",
-            class: "position-relative"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormLabel, { for: "validationTooltipUsername" }, {
-                default: withCtx(() => [
-                  createTextVNode("Username")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CInputGroup, { class: "has-validation" }, {
-                default: withCtx(() => [
-                  createVNode(_component_CInputGroupText, { id: "inputGroupPrepend" }, {
-                    default: withCtx(() => [
-                      createTextVNode("@")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CFormInput, {
-                    "aria-describedby": "inputGroupPrependFeedback",
-                    feedbackInvalid: "Please choose a username.",
-                    id: "validationTooltipUsername",
-                    required: "",
-                    tooltipFeedback: ""
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, {
-            md: "6",
-            class: "position-relative"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                "aria-describedby": "validationTooltip03Feedback",
-                feedbackInvalid: "Please provide a valid city.",
-                id: "validationTooltip03",
-                label: "City",
-                required: "",
-                tooltipFeedback: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, {
-            md: "3",
-            class: "position-relative"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormSelect, {
-                "aria-describedby": "validationTooltip04Feedback",
-                feedbackInvalid: "Please select a valid state.",
-                id: "validationTooltip04",
-                label: "State",
-                required: "",
-                tooltipFeedback: ""
-              }, {
-                default: withCtx(() => [
-                  _hoisted_38,
-                  _hoisted_39
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, {
-            md: "3",
-            class: "position-relative"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CFormInput, {
-                "aria-describedby": "validationTooltip05Feedback",
-                feedbackInvalid: "Please provide a valid zip.",
-                id: "validationTooltip05",
-                label: "Zip",
-                required: "",
-                tooltipFeedback: ""
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(_component_CCol, {
-            xs: "12",
-            class: "position-relative"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CButton, {
-                color: "primary",
-                type: "submit"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("Submit form")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["validated", "onSubmit"])
-    ]),
-    _hoisted_40,
-    createVNode(_component_ScssDocs, {
-      file: "_root.scss",
-      capture: "root-form-validation-variables"
-    }),
-    _hoisted_44,
-    _hoisted_45,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-feedback-variables"
-    }),
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-validation-colors"
-    }),
-    createVNode(_component_ScssDocs, {
-      file: "_variables-dark.scss",
-      capture: "form-validation-colors-dark"
-    }),
-    _hoisted_46,
-    _hoisted_47,
-    createVNode(_component_ScssDocs, {
-      file: "mixins/_forms.scss",
-      capture: "form-validation-mixins"
-    }),
-    _hoisted_48,
-    _hoisted_49,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "form-validation-states"
-    }),
-    _hoisted_50,
-    _hoisted_51,
-    _hoisted_52,
-    createVNode(_component_ScssDocs, {
-      file: "forms/_validation.scss",
-      capture: "form-validation-states-loop"
-    })
-  ]);
-}
-const validation_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "validation.html.vue"]]);
-const data = JSON.parse('{"path":"/forms/validation.html","title":"Vue Form Validation","lang":"en-US","frontmatter":{"title":"Vue Form Validation","name":"Validation","description":"Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/forms/validation.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Browser defaults","slug":"browser-defaults","link":"#browser-defaults","children":[]},{"level":2,"title":"Custom validation","slug":"custom-validation","link":"#custom-validation","children":[]},{"level":2,"title":"Supported elements","slug":"supported-elements","link":"#supported-elements","children":[]},{"level":2,"title":"Tooltips","slug":"tooltips","link":"#tooltips","children":[]},{"level":2,"title":"Customizing","slug":"customizing","link":"#customizing","children":[{"level":3,"title":"CSS variables","slug":"css-variables","link":"#css-variables","children":[]},{"level":3,"title":"SASS variables","slug":"sass-variables","link":"#sass-variables","children":[]},{"level":3,"title":"SASS mixins","slug":"sass-mixins","link":"#sass-mixins","children":[]},{"level":3,"title":"SASS maps","slug":"sass-maps","link":"#sass-maps","children":[]},{"level":3,"title":"SASS loops","slug":"sass-loops","link":"#sass-loops","children":[]}]}],"filePathRelative":"forms/validation.md"}');
-export {
-  validation_html as comp,
-  data
-};
diff --git a/vue/docs/assets/virtual-scroller.html-Bi-h-EJZ.js b/vue/docs/assets/virtual-scroller.html-eMrz1664.js
similarity index 58%
rename from vue/docs/assets/virtual-scroller.html-Bi-h-EJZ.js
rename to vue/docs/assets/virtual-scroller.html-eMrz1664.js
index 64a2564dab1..297e8237e95 100644
--- a/vue/docs/assets/virtual-scroller.html-Bi-h-EJZ.js
+++ b/vue/docs/assets/virtual-scroller.html-eMrz1664.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode, F as Fragment, j as renderList, t as toDisplayString } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode, F as Fragment, j as renderList, t as toDisplayString } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("p", null, "Virtual scrollers work by only rendering the items that are currently visible on the screen, and as the user scrolls through the list, new items are dynamically loaded and added to the view. This helps to reduce the amount of data that needs to be loaded and processed at any given time, which can improve the performance and responsiveness of the UI.", -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -13,7 +13,7 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h2", {
   }, "#")
 ], -1);
 const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CVirtualScroller</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visibleItems</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in 10000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Option {{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CVirtualScroller</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cvirtualscroller" tabindex="-1">CVirtualScroller <a class="anchor-link" href="#cvirtualscroller" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CVirtualScroller <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CVirtualScroller <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/virtual-scroller/CVirtualScroller&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>visible-items</strong></td><td>Amount of visible items</td><td>number</td><td>-</td><td>10</td></tr></tbody></table>', 6);
+const _hoisted_4 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CVirtualScroller</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:visibleItems</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in 10000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Option {{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CVirtualScroller</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cvirtualscroller" tabindex="-1">CVirtualScroller <a class="anchor-link" href="#cvirtualscroller" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CVirtualScroller <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CVirtualScroller <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/virtual-scroller/CVirtualScroller&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>visible-items</strong></td><td>Amount of visible items</td><td>number</td><td>-</td><td>10</td></tr></tbody></table>', 6);
 function _sfc_render(_ctx, _cache) {
   const _component_CVirtualScroller = resolveComponent("CVirtualScroller");
   return openBlock(), createElementBlock("div", null, [
diff --git a/vue/docs/assets/widgets.html-DSUDFhA1.js b/vue/docs/assets/widgets.html-CX3InA_E.js
similarity index 54%
rename from vue/docs/assets/widgets.html-DSUDFhA1.js
rename to vue/docs/assets/widgets.html-CX3InA_E.js
index 43e59416ef7..c4c79983958 100644
--- a/vue/docs/assets/widgets.html-DSUDFhA1.js
+++ b/vue/docs/assets/widgets.html-CX3InA_E.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, b as createVNode, d as withCtx, e as createTextVNode, f as createStaticVNode } from "./app-Dv803XR0.js";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, b as createVNode, d as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-BoHWg5jI.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "widgetstatsa",
@@ -16,19 +16,19 @@ const _hoisted_3 = { class: "fs-6 fw-normal" };
 const _hoisted_4 = { class: "fs-6 fw-normal" };
 const _hoisted_5 = { class: "fs-6 fw-normal" };
 const _hoisted_6 = { class: "fs-6 fw-normal" };
-const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>26K</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (-12.4% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-bottom<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Users<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3 mx-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;transparent&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointBackgroundColor: &#39;#5856d6&#39;,</span>\n<span class="line">                data: [65, 59, 84, 84, 51, 55, 40],</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                border: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawBorder: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                min: 30,</span>\n<span class="line">                max: 89,</span>\n<span class="line">                display: false,</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                borderWidth: 1,</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 4,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>$6.200</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (40.9% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-top<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Income<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3 mx-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;transparent&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointBackgroundColor: &#39;#39f&#39;,</span>\n<span class="line">                data: [1, 18, 9, 17, 34, 22, 11],</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                border: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawBorder: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                min: -9,</span>\n<span class="line">                max: 39,</span>\n<span class="line">                display: false,</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                borderWidth: 1,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 4,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>2.49%</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (84.7% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-top<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Conversion Rate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.2)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                data: [78, 81, 80, 45, 34, 12, 40],</span>\n<span class="line">                fill: true,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                borderWidth: 2,</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 0,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>44K</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (-23.6% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-bottom<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Sessions<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3 mx-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">              &#39;August&#39;,</span>\n<span class="line">              &#39;September&#39;,</span>\n<span class="line">              &#39;October&#39;,</span>\n<span class="line">              &#39;November&#39;,</span>\n<span class="line">              &#39;December&#39;,</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.2)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                data: [</span>\n<span class="line">                  78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,</span>\n<span class="line">                  82,</span>\n<span class="line">                ],</span>\n<span class="line">                barPercentage: 0.6,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawTicks: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                border: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawBorder: false,</span>\n<span class="line">                  drawTicks: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsb" tabindex="-1">WidgetStatsB <a class="anchor-link" href="#widgetstatsb" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>26K</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (-12.4% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-bottom<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Users<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3 mx-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;transparent&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointBackgroundColor: &#39;#5856d6&#39;,</span>\n<span class="line">                data: [65, 59, 84, 84, 51, 55, 40],</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                border: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawBorder: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                min: 30,</span>\n<span class="line">                max: 89,</span>\n<span class="line">                display: false,</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                borderWidth: 1,</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 4,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>$6.200</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (40.9% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-top<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Income<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3 mx-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;transparent&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointBackgroundColor: &#39;#39f&#39;,</span>\n<span class="line">                data: [1, 18, 9, 17, 34, 22, 11],</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                border: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawBorder: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                min: -9,</span>\n<span class="line">                max: 39,</span>\n<span class="line">                display: false,</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                borderWidth: 1,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 4,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>2.49%</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (84.7% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-top<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Conversion Rate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.2)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                data: [78, 81, 80, 45, 34, 12, 40],</span>\n<span class="line">                fill: true,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                borderWidth: 2,</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 0,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsA</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span>44K</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fs-6 fw-normal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          (-23.6% <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-bottom<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>)</span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Sessions<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom-end<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownToggle</span></span>\n<span class="line">            <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transparent<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p-0 text-white<span class="token punctuation">&quot;</span></span></span>\n<span class="line">            <span class="token attr-name">:caret</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-options<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-high-emphasis-inverse<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownToggle</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CDropdownItem</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Something else here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownItem</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdownMenu</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CDropdown</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-3 mx-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 70px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">              &#39;August&#39;,</span>\n<span class="line">              &#39;September&#39;,</span>\n<span class="line">              &#39;October&#39;,</span>\n<span class="line">              &#39;November&#39;,</span>\n<span class="line">              &#39;December&#39;,</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                label: &#39;My First dataset&#39;,</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.2)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                data: [</span>\n<span class="line">                  78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,</span>\n<span class="line">                  82,</span>\n<span class="line">                ],</span>\n<span class="line">                barPercentage: 0.6,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawTicks: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                border: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">                grid: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                  drawBorder: false,</span>\n<span class="line">                  drawTicks: false,</span>\n<span class="line">                },</span>\n<span class="line">                ticks: {</span>\n<span class="line">                  display: false,</span>\n<span class="line">                },</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsA</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsb" tabindex="-1">WidgetStatsB <a class="anchor-link" href="#widgetstatsb" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_9 = { class: "docs-example rounded-top p-4" };
-const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsB</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;success&#39;, value: 75}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#text</span><span class="token punctuation">&gt;</span></span>Widget helper text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Widget title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span><span class="token punctuation">&gt;</span></span>89.9%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsB</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsB</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">inverse</span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ value: 75}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Widget helper text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Widget title<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12.124<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsc" tabindex="-1">WidgetStatsC <a class="anchor-link" href="#widgetstatsc" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_10 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsB</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;success&#39;, value: 75}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#text</span><span class="token punctuation">&gt;</span></span>Widget helper text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Widget title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#value</span><span class="token punctuation">&gt;</span></span>89.9%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsB</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsB</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">inverse</span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ value: 75}<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Widget helper text<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Widget title<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12.124<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsc" tabindex="-1">WidgetStatsC <a class="anchor-link" href="#widgetstatsc" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_12 = { class: "docs-example rounded-top p-4" };
-const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsC</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>87.500<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;info&#39;, value: 75 }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Visitors<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-people<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Visitors<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsC</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsC</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">inverse</span></span>\n<span class="line">      <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>385<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ value: 75 }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>New clients<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-user-follow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsC</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsd" tabindex="-1">WidgetStatsD <a class="anchor-link" href="#widgetstatsd" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsC</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>87.500<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ color: &#39;info&#39;, value: 75 }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Visitors<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-people<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Visitors<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsC</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsC</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">inverse</span></span>\n<span class="line">      <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>385<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">:progress</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ value: 75 }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>New clients<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-user-follow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsC</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsd" tabindex="-1">WidgetStatsD <a class="anchor-link" href="#widgetstatsd" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_15 = { class: "docs-example rounded-top p-4" };
-const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsD</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-4<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-card-cap-bg</span><span class="token punctuation">:</span> #3b5998</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">      <span class="token attr-name">:values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[</span>\n<span class="line">        { title: &#39;friends&#39;, value: &#39;89K&#39; },</span>\n<span class="line">        { title: &#39;feeds&#39;, value: &#39;459&#39; },</span>\n<span class="line">      ]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cib-facebook<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>52<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-4 text-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-absolute w-100 h-100<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.1)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointHoverBackgroundColor: &#39;#fff&#39;,</span>\n<span class="line">                borderWidth: 2,</span>\n<span class="line">                data: [65, 59, 84, 84, 51, 55, 40],</span>\n<span class="line">                fill: true,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 0,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">                hoverBorderWidth: 3,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsD</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsD</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-4<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-card-cap-bg</span><span class="token punctuation">:</span> #00aced</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">      <span class="token attr-name">:values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[</span>\n<span class="line">        { title: &#39;followers&#39;, value: &#39;973k&#39; },</span>\n<span class="line">        { title: &#39;tweets&#39;, value: &#39;1.792&#39; },</span>\n<span class="line">      ]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cib-twitter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>52<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-4 text-white<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-absolute w-100 h-100<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.1)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointHoverBackgroundColor: &#39;#fff&#39;,</span>\n<span class="line">                borderWidth: 2,</span>\n<span class="line">                data: [1, 13, 9, 17, 34, 41, 38],</span>\n<span class="line">                fill: true,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 0,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">                hoverBorderWidth: 3,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsD</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatse" tabindex="-1">WidgetStatsE <a class="anchor-link" href="#widgetstatse" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsD</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-4<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-card-cap-bg</span><span class="token punctuation">:</span> #3b5998</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">      <span class="token attr-name">:values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[</span>\n<span class="line">        { title: &#39;friends&#39;, value: &#39;89K&#39; },</span>\n<span class="line">        { title: &#39;feeds&#39;, value: &#39;459&#39; },</span>\n<span class="line">      ]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cib-facebook<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>52<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-4 text-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-absolute w-100 h-100<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.1)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointHoverBackgroundColor: &#39;#fff&#39;,</span>\n<span class="line">                borderWidth: 2,</span>\n<span class="line">                data: [65, 59, 84, 84, 51, 55, 40],</span>\n<span class="line">                fill: true,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 0,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">                hoverBorderWidth: 3,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsD</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsD</span></span>\n<span class="line">      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-4<span class="token punctuation">&quot;</span></span></span>\n<span class="line">      <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">--cui-card-cap-bg</span><span class="token punctuation">:</span> #00aced</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">      <span class="token attr-name">:values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[</span>\n<span class="line">        { title: &#39;followers&#39;, value: &#39;973k&#39; },</span>\n<span class="line">        { title: &#39;tweets&#39;, value: &#39;1.792&#39; },</span>\n<span class="line">      ]<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cib-twitter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>52<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-4 text-white<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#chart</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>position-absolute w-100 h-100<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>line<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            labels: [</span>\n<span class="line">              &#39;January&#39;,</span>\n<span class="line">              &#39;February&#39;,</span>\n<span class="line">              &#39;March&#39;,</span>\n<span class="line">              &#39;April&#39;,</span>\n<span class="line">              &#39;May&#39;,</span>\n<span class="line">              &#39;June&#39;,</span>\n<span class="line">              &#39;July&#39;,</span>\n<span class="line">            ],</span>\n<span class="line">            datasets: [</span>\n<span class="line">              {</span>\n<span class="line">                backgroundColor: &#39;rgba(255,255,255,.1)&#39;,</span>\n<span class="line">                borderColor: &#39;rgba(255,255,255,.55)&#39;,</span>\n<span class="line">                pointHoverBackgroundColor: &#39;#fff&#39;,</span>\n<span class="line">                borderWidth: 2,</span>\n<span class="line">                data: [1, 13, 9, 17, 34, 41, 38],</span>\n<span class="line">                fill: true,</span>\n<span class="line">              },</span>\n<span class="line">            ],</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">            elements: {</span>\n<span class="line">              line: {</span>\n<span class="line">                tension: 0.4,</span>\n<span class="line">              },</span>\n<span class="line">              point: {</span>\n<span class="line">                radius: 0,</span>\n<span class="line">                hitRadius: 10,</span>\n<span class="line">                hoverRadius: 4,</span>\n<span class="line">                hoverBorderWidth: 3,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            maintainAspectRatio: false,</span>\n<span class="line">            plugins: {</span>\n<span class="line">              legend: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">            scales: {</span>\n<span class="line">              x: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">              y: {</span>\n<span class="line">                display: false,</span>\n<span class="line">              },</span>\n<span class="line">            },</span>\n<span class="line">          }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsD</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatse" tabindex="-1">WidgetStatsE <a class="anchor-link" href="#widgetstatse" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_18 = { class: "docs-example rounded-top p-4" };
-const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsE</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1,123<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 40px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">    <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      labels: [&#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;, &#39;S&#39;, &#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;, &#39;S&#39;, &#39;M&#39;],</span>\n<span class="line">      datasets: [</span>\n<span class="line">        {</span>\n<span class="line">          backgroundColor: &#39;#321fdb&#39;,</span>\n<span class="line">          borderColor: &#39;transparent&#39;,</span>\n<span class="line">          borderWidth: 1,</span>\n<span class="line">          data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],</span>\n<span class="line">        },</span>\n<span class="line">      ],</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      maintainAspectRatio: false,</span>\n<span class="line">      plugins: {</span>\n<span class="line">        legend: {</span>\n<span class="line">          display: false,</span>\n<span class="line">        },</span>\n<span class="line">      },</span>\n<span class="line">      scales: {</span>\n<span class="line">        x: {</span>\n<span class="line">          display: false,</span>\n<span class="line">        },</span>\n<span class="line">        y: {</span>\n<span class="line">          display: false,</span>\n<span class="line">        },</span>\n<span class="line">      },</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsE</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsf" tabindex="-1">WidgetStatsF <a class="anchor-link" href="#widgetstatsf" aria-hidden="true">#</a></h2>', 2);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsE</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1,123<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CChart</span></span>\n<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 40px</span><span class="token punctuation">&quot;</span></span></span></span>\n<span class="line">    <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      labels: [&#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;, &#39;S&#39;, &#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;, &#39;S&#39;, &#39;M&#39;],</span>\n<span class="line">      datasets: [</span>\n<span class="line">        {</span>\n<span class="line">          backgroundColor: &#39;#321fdb&#39;,</span>\n<span class="line">          borderColor: &#39;transparent&#39;,</span>\n<span class="line">          borderWidth: 1,</span>\n<span class="line">          data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],</span>\n<span class="line">        },</span>\n<span class="line">      ],</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">    <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{</span>\n<span class="line">      maintainAspectRatio: false,</span>\n<span class="line">      plugins: {</span>\n<span class="line">        legend: {</span>\n<span class="line">          display: false,</span>\n<span class="line">        },</span>\n<span class="line">      },</span>\n<span class="line">      scales: {</span>\n<span class="line">        x: {</span>\n<span class="line">          display: false,</span>\n<span class="line">        },</span>\n<span class="line">        y: {</span>\n<span class="line">          display: false,</span>\n<span class="line">        },</span>\n<span class="line">      },</span>\n<span class="line">    }<span class="token punctuation">&quot;</span></span></span>\n<span class="line">  <span class="token punctuation">/&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsE</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="widgetstatsf" tabindex="-1">WidgetStatsF <a class="anchor-link" href="#widgetstatsf" aria-hidden="true">#</a></h2>', 2);
 const _hoisted_21 = { class: "docs-example rounded-top p-4" };
-const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
+const _hoisted_22 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>', 1);
 const _hoisted_23 = { class: "docs-example rounded-top p-4" };
-const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>font-weight-bold font-xs text-body-secondary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>noopener norefferer<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_blank<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          View more</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>font-weight-bold font-xs text-body-secondary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>noopener norefferer<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_blank<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          View more</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cwidgetstatsa" tabindex="-1">CWidgetStatsA <a class="anchor-link" href="#cwidgetstatsa" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsA <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsA <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsA&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>action</td><td>Location for action component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table><h3 id="cwidgetstatsb" tabindex="-1">CWidgetStatsB <a class="anchor-link" href="#cwidgetstatsb" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsB <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsB <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsB&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h3 id="cwidgetstatsc" tabindex="-1">CWidgetStatsC <a class="anchor-link" href="#cwidgetstatsc" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsC <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsC <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsC&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots-1" tabindex="-1">Slots <a class="anchor-link" href="#slots-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table><h3 id="cwidgetstatsd" tabindex="-1">CWidgetStatsD <a class="anchor-link" href="#cwidgetstatsd" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsD <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsD <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsD&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>values</strong></td><td>Values and titles for your component.</td><td>Value[]</td><td>-</td><td>() =&gt; []</td></tr></tbody></table><h4 id="slots-2" tabindex="-1">Slots <a class="anchor-link" href="#slots-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>icon</td><td>Location for icon component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table><h3 id="cwidgetstatse" tabindex="-1">CWidgetStatsE <a class="anchor-link" href="#cwidgetstatse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsE <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsE <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsE&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots-3" tabindex="-1">Slots <a class="anchor-link" href="#slots-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr></tbody></table><h3 id="cwidgetstatsf" tabindex="-1">CWidgetStatsF <a class="anchor-link" href="#cwidgetstatsf" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsF <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsF <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsF&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-5" tabindex="-1">Props <a class="anchor-link" href="#props-5" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>padding</strong></td><td>Set padding of your component.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots-4" tabindex="-1">Slots <a class="anchor-link" href="#slots-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table>', 36);
+const _hoisted_24 = /* @__PURE__ */ createStaticVNode('<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>font-weight-bold font-xs text-body-secondary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>noopener norefferer<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_blank<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          View more</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCol</span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CWidgetStatsF</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$1.999,50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CLink</span></span>\n<span class="line">          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>font-weight-bold font-xs text-body-secondary<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://coreui.io/<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>noopener norefferer<span class="token punctuation">&quot;</span></span></span>\n<span class="line">          <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_blank<span class="token punctuation">&quot;</span></span></span>\n<span class="line">        <span class="token punctuation">&gt;</span></span></span>\n<span class="line">          View more</span>\n<span class="line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CIcon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cil-arrow-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ms-auto<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>\n<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CLink</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  </span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CWidgetStatsF</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CCol</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CRow</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api" aria-hidden="true">#</a></h2><h3 id="cwidgetstatsa" tabindex="-1">CWidgetStatsA <a class="anchor-link" href="#cwidgetstatsa" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsA <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsA <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsA&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1">Props <a class="anchor-link" href="#props" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="anchor-link" href="#slots" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>action</td><td>Location for action component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table><h3 id="cwidgetstatsb" tabindex="-1">CWidgetStatsB <a class="anchor-link" href="#cwidgetstatsb" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsB <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsB <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsB&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-1" tabindex="-1">Props <a class="anchor-link" href="#props-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h3 id="cwidgetstatsc" tabindex="-1">CWidgetStatsC <a class="anchor-link" href="#cwidgetstatsc" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsC <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsC <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsC&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-2" tabindex="-1">Props <a class="anchor-link" href="#props-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>inverse</strong></td><td>Colors have been inverted from their default dark shade.</td><td>boolean</td><td>-</td><td>-</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots-1" tabindex="-1">Slots <a class="anchor-link" href="#slots-1" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table><h3 id="cwidgetstatsd" tabindex="-1">CWidgetStatsD <a class="anchor-link" href="#cwidgetstatsd" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsD <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsD <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsD&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-3" tabindex="-1">Props <a class="anchor-link" href="#props-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>values</strong></td><td>Values and titles for your component.</td><td>Value[]</td><td>-</td><td>() =&gt; []</td></tr></tbody></table><h4 id="slots-2" tabindex="-1">Slots <a class="anchor-link" href="#slots-2" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr><tr><td>icon</td><td>Location for icon component, ex. <code>&lt;CDropdown&gt;</code>.</td><td></td></tr></tbody></table><h3 id="cwidgetstatse" tabindex="-1">CWidgetStatsE <a class="anchor-link" href="#cwidgetstatse" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsE <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsE <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsE&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-4" tabindex="-1">Props <a class="anchor-link" href="#props-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots-3" tabindex="-1">Slots <a class="anchor-link" href="#slots-3" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>chart</td><td>Location for chart component.</td><td></td></tr></tbody></table><h3 id="cwidgetstatsf" tabindex="-1">CWidgetStatsF <a class="anchor-link" href="#cwidgetstatsf" aria-hidden="true">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> CWidgetStatsF <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue&#39;</span></span>\n<span class="line"><span class="token comment">// or</span></span>\n<span class="line"><span class="token keyword">import</span> CWidgetStatsF <span class="token keyword">from</span> <span class="token string">&#39;@coreui/vue/src/components/widgets/CWidgetStatsF&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props-5" tabindex="-1">Props <a class="anchor-link" href="#props-5" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>color</strong></td><td>Sets the color context of the component to one of CoreUI’s themed colors.</td><td>string</td><td><code>&#39;primary&#39;</code>, <code>&#39;secondary&#39;</code>, <code>&#39;success&#39;</code>, <code>&#39;danger&#39;</code>, <code>&#39;warning&#39;</code>, <code>&#39;info&#39;</code>, <code>&#39;dark&#39;</code>, <code>&#39;light&#39;</code></td><td>-</td></tr><tr><td><strong>padding</strong></td><td>Set padding of your component.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td><strong>title</strong></td><td>Title for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #title&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>text</strong></td><td>Helper text for your component. If you want to pass non-string value please use dedicated slot <code>&lt;template #text&gt;...&lt;/template&gt;</code></td><td>string</td><td>-</td><td>-</td></tr><tr><td><strong>value</strong></td><td>Value for your component. If you want to pass non-string or non-number value please use dedicated slot <code>&lt;template #value&gt;...&lt;/template&gt;</code></td><td>number|string</td><td>-</td><td>0</td></tr></tbody></table><h4 id="slots-4" tabindex="-1">Slots <a class="anchor-link" href="#slots-4" aria-hidden="true">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Name</th><th>Description</th><th>Bindings</th></tr></thead><tbody><tr><td>icon</td><td>Location for icon component.</td><td></td></tr></tbody></table>', 36);
 function _sfc_render(_ctx, _cache) {
   const _component_CIcon = resolveComponent("CIcon");
   const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
diff --git a/vue/docs/components/accordion.html b/vue/docs/components/accordion.html
index aa056f9fae3..11e204e609e 100644
--- a/vue/docs/components/accordion.html
+++ b/vue/docs/components/accordion.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Accordion Component | Vue UI Components · CoreUI</title><meta name="description" content="Build vertically collapsing accordions in combination with our Vue Collapse component.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/alert.html b/vue/docs/components/alert.html
index a1e4e8b4fb8..4258f4d5b93 100644
--- a/vue/docs/components/alert.html
+++ b/vue/docs/components/alert.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Alert Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/avatar.html b/vue/docs/components/avatar.html
index bed1c3a2077..efa541995b8 100644
--- a/vue/docs/components/avatar.html
+++ b/vue/docs/components/avatar.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -16,8 +16,8 @@
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Avatar Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Avatar Component | Vue UI Components · CoreUI</title><meta name="description" content="The Vue Avatar component is used to display circular user profile pictures. Vue avatars can portray people or objects and support images, icons, or letters.">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/badge.html b/vue/docs/components/badge.html
index 28e3f8a6b43..b4954e40559 100644
--- a/vue/docs/components/badge.html
+++ b/vue/docs/components/badge.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Badge Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue badge component is small count and labeling component.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/breadcrumb.html b/vue/docs/components/breadcrumb.html
index dc3b5ef861f..717ed7f4bc2 100644
--- a/vue/docs/components/breadcrumb.html
+++ b/vue/docs/components/breadcrumb.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Breadcrumb Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/button-group.html b/vue/docs/components/button-group.html
index ec00fc9dd48..626e1588613 100644
--- a/vue/docs/components/button-group.html
+++ b/vue/docs/components/button-group.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Button Group Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue button group component allows to group a series of buttons and power them with JavaScript.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/button.html b/vue/docs/components/button.html
index ed258246ced..e7f73cd0bb5 100644
--- a/vue/docs/components/button.html
+++ b/vue/docs/components/button.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Buttons Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue button component for actions in tables, forms, cards, and more. CoreUI for Vue.js provides various styles, states, and size. Ready to use and easy to customize.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/calendar.html b/vue/docs/components/calendar.html
index e45390295a9..89f6a96a824 100644
--- a/vue/docs/components/calendar.html
+++ b/vue/docs/components/calendar.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Calendar Component | Vue UI Components · CoreUI</title><meta name="description" content="Create consistent cross-browser and cross-device calendar">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/callout.html b/vue/docs/components/callout.html
index 16be054cba3..154f70dd7a6 100644
--- a/vue/docs/components/callout.html
+++ b/vue/docs/components/callout.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Callout Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/card.html b/vue/docs/components/card.html
index 283a34db615..8ea8a04e4ac 100644
--- a/vue/docs/components/card.html
+++ b/vue/docs/components/card.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Card Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/carousel.html b/vue/docs/components/carousel.html
index c19165fcb69..9037448c556 100644
--- a/vue/docs/components/carousel.html
+++ b/vue/docs/components/carousel.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Carousel Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/chart.html b/vue/docs/components/chart.html
index e92102ca16a..92eeac97a63 100644
--- a/vue/docs/components/chart.html
+++ b/vue/docs/components/chart.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Chart.js Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue wrapper for Chart.js 3.0, the most popular charting library.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/close-button.html b/vue/docs/components/close-button.html
index 221d32e6033..b222f84e783 100644
--- a/vue/docs/components/close-button.html
+++ b/vue/docs/components/close-button.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Close Button Component | Vue UI Components · CoreUI</title><meta name="description" content="A generic close button component for dismissing content like modals and alerts.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/collapse.html b/vue/docs/components/collapse.html
index dda826d86fc..6f0521def49 100644
--- a/vue/docs/components/collapse.html
+++ b/vue/docs/components/collapse.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Collapse Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/dropdown.html b/vue/docs/components/dropdown.html
index 0401b4b36d8..5caeb656123 100644
--- a/vue/docs/components/dropdown.html
+++ b/vue/docs/components/dropdown.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Dropdown Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/footer.html b/vue/docs/components/footer.html
index 322b9f7027d..30f2d767a48 100644
--- a/vue/docs/components/footer.html
+++ b/vue/docs/components/footer.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Footer Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/header.html b/vue/docs/components/header.html
index 8ca3f523cb0..6c5eb06d91f 100644
--- a/vue/docs/components/header.html
+++ b/vue/docs/components/header.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Header Component | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/icon.html b/vue/docs/components/icon.html
index d58371743ad..4670251fc19 100644
--- a/vue/docs/components/icon.html
+++ b/vue/docs/components/icon.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -16,8 +16,8 @@
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Icon Component | Vue UI Components · CoreUI</title><meta name="description" content="Official Vue.js component for CoreUI Icons and CoreUI Icons PRO.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Icon Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue icons library is a great resource for Vue developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/image.html b/vue/docs/components/image.html
index 3bc55a4327d..410e5a205b9 100644
--- a/vue/docs/components/image.html
+++ b/vue/docs/components/image.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Image Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue image component with responsive behavior (so it's never become larger than their parent element) and special styles.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/link.html b/vue/docs/components/link.html
index deff2aa8b58..687be7ffca1 100644
--- a/vue/docs/components/link.html
+++ b/vue/docs/components/link.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>CLink | Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/list-group.html b/vue/docs/components/list-group.html
index 2fd4bd7c58b..0b52374819c 100644
--- a/vue/docs/components/list-group.html
+++ b/vue/docs/components/list-group.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue List Group Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue List Group component allows displaying a series of content. Learn how to use Vue list group to build complex list structure on your website.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/loading-button.html b/vue/docs/components/loading-button.html
index 79d88b0dede..f5a81aa416a 100644
--- a/vue/docs/components/loading-button.html
+++ b/vue/docs/components/loading-button.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Loading Button Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/modal.html b/vue/docs/components/modal.html
index 0b3c2a31878..758fc603bb9 100644
--- a/vue/docs/components/modal.html
+++ b/vue/docs/components/modal.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Modal Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize Vue CoreUI Modals easily. Multiple examples and tutorial.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/navbar.html b/vue/docs/components/navbar.html
index c38e82d4db9..b206d703b91 100644
--- a/vue/docs/components/navbar.html
+++ b/vue/docs/components/navbar.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Navbar Component | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for the Vue navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/navs-tabs.html b/vue/docs/components/navs-tabs.html
index f6c23cb02a3..4a20a753459 100644
--- a/vue/docs/components/navs-tabs.html
+++ b/vue/docs/components/navs-tabs.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Navs & Tabs Components | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for how to use CoreUI's included Vue navigation components.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/offcanvas.html b/vue/docs/components/offcanvas.html
index e13891b9b7f..e507f6799fd 100644
--- a/vue/docs/components/offcanvas.html
+++ b/vue/docs/components/offcanvas.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Offcanvas Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue alert component allows build hidden sidebars into your project for navigation, shopping carts.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/pagination.html b/vue/docs/components/pagination.html
index e321d52bf97..736b4be9188 100644
--- a/vue/docs/components/pagination.html
+++ b/vue/docs/components/pagination.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Pagination Component | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/placeholder.html b/vue/docs/components/placeholder.html
index 217fc87afe8..b0d1c6a67ca 100644
--- a/vue/docs/components/placeholder.html
+++ b/vue/docs/components/placeholder.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Placeholder Component | Vue UI Components · CoreUI</title><meta name="description" content="Use loading vue placeholders for your components or pages to indicate something may still be loading.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/popover.html b/vue/docs/components/popover.html
index d788c59a50d..1da91c965f4 100644
--- a/vue/docs/components/popover.html
+++ b/vue/docs/components/popover.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Popover Component and Directive | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for adding Vue popovers, like those found in iOS, to any element on your site.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/progress.html b/vue/docs/components/progress.html
index eb45ccb2c6a..f2c8422a729 100644
--- a/vue/docs/components/progress.html
+++ b/vue/docs/components/progress.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Progress Component | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for using Vue progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/sidebar.html b/vue/docs/components/sidebar.html
index 7125f422af0..d8d9f6d84e1 100644
--- a/vue/docs/components/sidebar.html
+++ b/vue/docs/components/sidebar.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Sidebar Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/smart-pagination.html b/vue/docs/components/smart-pagination.html
index a9750cdd813..53762f207e4 100644
--- a/vue/docs/components/smart-pagination.html
+++ b/vue/docs/components/smart-pagination.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Smart Pagination Component | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for showing smart pagination to indicate a series of related content exists across multiple pages.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/smart-table.html b/vue/docs/components/smart-table.html
index 26ab8e18ee1..6747fbc60e0 100644
--- a/vue/docs/components/smart-table.html
+++ b/vue/docs/components/smart-table.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Smart Table Component (DataTable) | Vue UI Components · CoreUI</title><meta name="description" content="A Vue Smart Table provides a full set of features for displaying and manipulating tabular data. It allows you to easily create dynamic and interactive tables with features such as sorting, filtering, pagination, and searching. Vue Smart Table Component (DataTables) makes it easy to work with large datasets, and it is widely used in a variety of applications, including web-based applications, e-commerce sites, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/spinner.html b/vue/docs/components/spinner.html
index cd8ca439741..2e2086c229d 100644
--- a/vue/docs/components/spinner.html
+++ b/vue/docs/components/spinner.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Spinner Component | Vue UI Components · CoreUI</title><meta name="description" content="Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/table.html b/vue/docs/components/table.html
index 96a0a7d0a64..de12b87f6a0 100644
--- a/vue/docs/components/table.html
+++ b/vue/docs/components/table.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Table Component | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for opt-in styling of tables.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/tabs.html b/vue/docs/components/tabs.html
index 2c264ab589f..b0c80b54003 100644
--- a/vue/docs/components/tabs.html
+++ b/vue/docs/components/tabs.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Tabs Components | Vue UI Components · CoreUI</title><meta name="description" content="The CoreUI Vue Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/toast.html b/vue/docs/components/toast.html
index 34870cafb59..f2712779253 100644
--- a/vue/docs/components/toast.html
+++ b/vue/docs/components/toast.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Toast Component | Vue UI Components · CoreUI</title><meta name="description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/tooltip.html b/vue/docs/components/tooltip.html
index 8b6b5da92b0..683a2d3af91 100644
--- a/vue/docs/components/tooltip.html
+++ b/vue/docs/components/tooltip.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Tooltip Component and Directive | Vue UI Components · CoreUI</title><meta name="description" content="Documentation and examples for adding Vue Tooltips.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/virtual-scroller.html b/vue/docs/components/virtual-scroller.html
index 9ae7c9fcfc5..c4f2d794e26 100644
--- a/vue/docs/components/virtual-scroller.html
+++ b/vue/docs/components/virtual-scroller.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Virtual Scroller Component | Vue UI Components · CoreUI</title><meta name="description" content="A virtual scroller is a UI element that allows users to scroll through a list of items without requiring the entire list to be loaded into memory at once. This can be particularly useful for lists that are very large or that contain a lot of data, as it allows the user to view and interact with a subset of the list while the rest of the data is loaded in the background.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/widgets.html b/vue/docs/components/widgets.html
index 4cf9c8605e0..276fcac35b9 100644
--- a/vue/docs/components/widgets.html
+++ b/vue/docs/components/widgets.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Widgets Components | Vue UI Components · CoreUI</title><meta name="description" content="UI Components Library for Vue.js (Vue 3)">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/customize/css-variables.html b/vue/docs/customize/css-variables.html
index dc056a32b3c..044d6127cac 100644
--- a/vue/docs/customize/css-variables.html
+++ b/vue/docs/customize/css-variables.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>CSS variables | Vue UI Components · CoreUI</title><meta name="description" content="Use CoreUI's CSS custom properties for fast and forward-looking design and development.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/customize/options.html b/vue/docs/customize/options.html
index 52ae969d844..451ef11f85d 100644
--- a/vue/docs/customize/options.html
+++ b/vue/docs/customize/options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Options | Vue UI Components · CoreUI</title><meta name="description" content="Quickly customize CoreUI for Vue with built-in variables to easily toggle global CSS preferences for controlling style and behavior.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/customize/sass.html b/vue/docs/customize/sass.html
index 9877404ce16..1ab9f0af366 100644
--- a/vue/docs/customize/sass.html
+++ b/vue/docs/customize/sass.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Sass | Vue UI Components · CoreUI</title><meta name="description" content="Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/checkbox.html b/vue/docs/forms/checkbox.html
index 3678b205b91..6b422056236 100644
--- a/vue/docs/forms/checkbox.html
+++ b/vue/docs/forms/checkbox.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Checkbox Component | Vue UI Components · CoreUI</title><meta name="description" content="Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/checks-radios.html b/vue/docs/forms/checks-radios.html
index 780ae4e8140..e9081f8134a 100644
--- a/vue/docs/forms/checks-radios.html
+++ b/vue/docs/forms/checks-radios.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Radio Component | Vue UI Components · CoreUI</title><meta name="description" content="Create consistent cross-browser and cross-device radios with our Vue radio component.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/date-picker.html b/vue/docs/forms/date-picker.html
index 22b80054a0d..4d5249510c3 100644
--- a/vue/docs/forms/date-picker.html
+++ b/vue/docs/forms/date-picker.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Date Picker Component | Vue UI Components · CoreUI</title><meta name="description" content="The Vue Date Picker Component is an essential tool for any Vue-based application that requires date selection functionality.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/date-range-picker.html b/vue/docs/forms/date-range-picker.html
index baa06bf7f38..5ded1cbe8e5 100644
--- a/vue/docs/forms/date-range-picker.html
+++ b/vue/docs/forms/date-range-picker.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Date Range Picker Component | Vue UI Components · CoreUI</title><meta name="description" content="The Vue Date Range Picker component by CoreUI is a versatile tool for selecting date ranges. It is designed for compatibility across various browsers and devices, making it a reliable choice for diverse applications.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/floating-labels.html b/vue/docs/forms/floating-labels.html
index 05b541ded1d..402ee4ad8ab 100644
--- a/vue/docs/forms/floating-labels.html
+++ b/vue/docs/forms/floating-labels.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Floating labels | Vue UI Components · CoreUI</title><meta name="description" content="Vue floating label component. Create beautifully simple form labels that float over your input fields.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/form-control.html b/vue/docs/forms/form-control.html
index 8a7e965e09c..4f82503f8f4 100644
--- a/vue/docs/forms/form-control.html
+++ b/vue/docs/forms/form-control.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Form Controls | Vue UI Components · CoreUI</title><meta name="description" content="Vue input and textarea components. Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/input-group.html b/vue/docs/forms/input-group.html
index 60230903dfa..82319656b01 100644
--- a/vue/docs/forms/input-group.html
+++ b/vue/docs/forms/input-group.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Input Group Component | Vue UI Components · CoreUI</title><meta name="description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/input.html b/vue/docs/forms/input.html
index 63752ad7bc7..71b2338984c 100644
--- a/vue/docs/forms/input.html
+++ b/vue/docs/forms/input.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Form Input | Vue UI Components · CoreUI</title><meta name="description" content="Vue input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/layout.html b/vue/docs/forms/layout.html
index af36fc1949e..25d41fa5ce5 100644
--- a/vue/docs/forms/layout.html
+++ b/vue/docs/forms/layout.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Form Layout | Vue UI Components · CoreUI</title><meta name="description" content="Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/multi-select.html b/vue/docs/forms/multi-select.html
index 47654b158ce..2157c38f20a 100644
--- a/vue/docs/forms/multi-select.html
+++ b/vue/docs/forms/multi-select.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Multi Select | Vue UI Components · CoreUI</title><meta name="description" content="Customize the native <select>s with a powerful Vue Multi Select component that changes the element’s initial appearance and brings some new functionalities.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/overview.html b/vue/docs/forms/overview.html
index 32b6a6b8d98..0fa16015dc0 100644
--- a/vue/docs/forms/overview.html
+++ b/vue/docs/forms/overview.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Form Components | Vue UI Components · CoreUI</title><meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/radio.html b/vue/docs/forms/radio.html
index ba9dea93588..85ca23b14b0 100644
--- a/vue/docs/forms/radio.html
+++ b/vue/docs/forms/radio.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Checkbox & Radio Components | Vue UI Components · CoreUI</title><meta name="description" content="Create consistent cross-browser and cross-device checkboxes and radios with our Vue checkbox, radio, and switch components.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/range.html b/vue/docs/forms/range.html
index b760c197aa3..34cb3653e20 100644
--- a/vue/docs/forms/range.html
+++ b/vue/docs/forms/range.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Range Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/rating.html b/vue/docs/forms/rating.html
index 187c38a3fe8..e4955ecffe1 100644
--- a/vue/docs/forms/rating.html
+++ b/vue/docs/forms/rating.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Rating Component | Vue UI Components · CoreUI</title><meta name="description" content="A Vue star rating component allows users to rate and provide feedback on content or products by selecting a specified number of stars, typically ranging from one to five, representing their level of satisfaction or preference.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/select.html b/vue/docs/forms/select.html
index 13b099ca80a..09f1b2f3228 100644
--- a/vue/docs/forms/select.html
+++ b/vue/docs/forms/select.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Select Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/switch.html b/vue/docs/forms/switch.html
index 54ec6ad70c5..c2165bf9cbd 100644
--- a/vue/docs/forms/switch.html
+++ b/vue/docs/forms/switch.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Switch Component | Vue UI Components · CoreUI</title><meta name="description" content="Create consistent cross-browser and cross-device switch component.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/textarea.html b/vue/docs/forms/textarea.html
index 78afd6db0d1..54cbcee7371 100644
--- a/vue/docs/forms/textarea.html
+++ b/vue/docs/forms/textarea.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Form Text Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/time-picker.html b/vue/docs/forms/time-picker.html
index e91cef9a092..3b1a67ac2df 100644
--- a/vue/docs/forms/time-picker.html
+++ b/vue/docs/forms/time-picker.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Time Picker Component | Vue UI Components · CoreUI</title><meta name="description" content="Vue Time Picker is a customizable and user-friendly tool for selecting times in forms. It supports various locales, sizes, and states to enhance the user experience.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/validation.html b/vue/docs/forms/validation.html
index 441d0b449fc..52e735502d2 100644
--- a/vue/docs/forms/validation.html
+++ b/vue/docs/forms/validation.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Form Validation | Vue UI Components · CoreUI</title><meta name="description" content="Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/getting-started/accessibility.html b/vue/docs/getting-started/accessibility.html
index 54468102f5f..9b8db0c8883 100644
--- a/vue/docs/getting-started/accessibility.html
+++ b/vue/docs/getting-started/accessibility.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Accessibility | Vue UI Components · CoreUI</title><meta name="description" content="A brief overview of CoreUI for Vue features and limitations for the creation of accessible content.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/getting-started/introduction.html b/vue/docs/getting-started/introduction.html
index b8dd7058fa3..a8ef61bbcd3 100644
--- a/vue/docs/getting-started/introduction.html
+++ b/vue/docs/getting-started/introduction.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Introduction | Vue UI Components · CoreUI</title><meta name="description" content="CoreUI for Vue.js is UI Component library written in TypeScript, and ready for your next Vue.js project. Learn how to include CoreUI for Vue.js in your project.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/breakpoints.html b/vue/docs/layout/breakpoints.html
index ec40f497069..1978c347a51 100644
--- a/vue/docs/layout/breakpoints.html
+++ b/vue/docs/layout/breakpoints.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Breakpoints | Vue UI Components · CoreUI</title><meta name="description" content="Breakpoints are the triggers in CoreUI for Vue.js for how your layout responsive changes across device or viewport sizes.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/columns.html b/vue/docs/layout/columns.html
index 90916ffec9a..1303f93b59e 100644
--- a/vue/docs/layout/columns.html
+++ b/vue/docs/layout/columns.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Columns | Vue UI Components · CoreUI</title><meta name="description" content="Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/containers.html b/vue/docs/layout/containers.html
index 0af9eb5aa94..4b8c6c02be6 100644
--- a/vue/docs/layout/containers.html
+++ b/vue/docs/layout/containers.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Containers | Vue UI Components · CoreUI</title><meta name="description" content="Containers are a fundamental building block of CoreUI for Vue.js that contain, pad, and align your content within a given device or viewport.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/grid.html b/vue/docs/layout/grid.html
index 34f6f7e46b8..975ba9451c5 100644
--- a/vue/docs/layout/grid.html
+++ b/vue/docs/layout/grid.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Grid | Vue UI Components · CoreUI</title><meta name="description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/gutters.html b/vue/docs/layout/gutters.html
index a2a1bb40e0d..f44690d9af5 100644
--- a/vue/docs/layout/gutters.html
+++ b/vue/docs/layout/gutters.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Gutters | Vue UI Components · CoreUI</title><meta name="description" content="Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Vue.js grid system.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/migration/v4.html b/vue/docs/migration/v4.html
index 84839c32f44..7ac21fbfd67 100644
--- a/vue/docs/migration/v4.html
+++ b/vue/docs/migration/v4.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Migration to v4 | Vue UI Components · CoreUI</title><meta name="description" content="Track and review changes to the CoreUI for Vue.js components to help you migrate from v3 to v4.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/migration/v5.html b/vue/docs/migration/v5.html
index 91cbe32f1c6..2b654285b69 100644
--- a/vue/docs/migration/v5.html
+++ b/vue/docs/migration/v5.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Migration to v5 | Vue UI Components · CoreUI</title><meta name="description" content="Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/admin-dashboard.html b/vue/docs/templates/admin-dashboard.html
index 3ef76c525a3..4305c54822e 100644
--- a/vue/docs/templates/admin-dashboard.html
+++ b/vue/docs/templates/admin-dashboard.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Templates | Vue UI Components · CoreUI</title><meta name="description" content="Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize vue admin panels to cover any requirement.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/contents.html b/vue/docs/templates/contents.html
index 09db32c393e..26cf9710c50 100644
--- a/vue/docs/templates/contents.html
+++ b/vue/docs/templates/contents.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue templates contents | Vue UI Components · CoreUI</title><meta name="description" content="Discover what's included in CoreUI Vue Admin Template, including our precompiled and source code flavors.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/customize.html b/vue/docs/templates/customize.html
index 204ac616edc..764b6b1c215 100644
--- a/vue/docs/templates/customize.html
+++ b/vue/docs/templates/customize.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Customize vue templates | Vue UI Components · CoreUI</title><meta name="description" content="Learn how to theme, customize, and extend CoreUI Vue Templates with Sass, a boatload of global options.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/download.html b/vue/docs/templates/download.html
index d9a1c6b16d9..608348c7ad1 100644
--- a/vue/docs/templates/download.html
+++ b/vue/docs/templates/download.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Download vue templates | Vue UI Components · CoreUI</title><meta name="description" content="Download CoreUI Vue Admin Templates to get the source code that lets you customize and create your vue-based application.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/installation.html b/vue/docs/templates/installation.html
index c6bf09b3fa5..ceb5f70892d 100644
--- a/vue/docs/templates/installation.html
+++ b/vue/docs/templates/installation.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="generator" content="VuePress 2.0.0-rc.12" />
+    <meta name="generator" content="VuePress 2.0.0-rc.14" />
     <script>
       const userMode = localStorage.getItem('coreui-vue-docs-theme')
       const systemDarkMode =
@@ -17,7 +17,7 @@
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue templates installation | Vue UI Components · CoreUI</title><meta name="description" content="Learn how to use CoreUI Vue Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.">
-    <link rel="preload" href="/vue/docs/assets/style-DvqrglCp.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-DvqrglCp.css">
+    <link rel="preload" href="/vue/docs/assets/style-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
     <!--vuepress-ssr-resources-->
   </head>
   <body>
@@ -32,6 +32,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="app"><!--vuepress-ssr-app--></div>
-    <script type="module" src="/vue/docs/assets/app-Dv803XR0.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-BoHWg5jI.js" defer></script>
   </body>
 </html>

Prop name	Description	Type	Values	Default
active-item-key	The active item key.	number\|string	-	-
always-open	Make accordion items stay open when another item is opened	boolean	-	-
flush	Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.	boolean	-	-
Prop name	Description	Type	Values	Default
color	Sets the color context of the component to one of CoreUI’s themed colors.	string	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`	-
dismissible	Optionally add a close button to alert and allow it to self dismisss.	boolean	-	-
variant	Set the alert variant to a solid.	string	`'solid'`	-
visible	Toggle the visibility of alert component.	boolean	-	true
Prop name	Description	Type	Values	Default
as	Component used for the root node. Either a string to use a HTML element or a component.	string	-	'span'
color	Sets the color context of the component to one of CoreUI’s themed colors.	string	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`	-
position	Position badge in one of the corners of a link or button.	string	`'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'`	-
shape	Select the shape of the component.	string	`'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'`	-
size	Size the component small.	string	`'sm'`	-
text-bg-color 5.0.0+	Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.	string	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`	-
text-color	Sets the text color of the component to one of CoreUI’s themed colors.	string	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'`	-
Prop name	Description	Type	Values	Default
active	Toggle the active state for the component.	boolean	-	-
href	The `href` attribute for the inner link component.	string	-	-
Prop name	Description	Type	Values	Default
size	Size the component small or large.	string	`'sm'`, `'lg'`	-
vertical	Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.	boolean	-	-
Prop name	Description	Type	Values	Default
calendar-date	Default date of the component		-	-
calendars	The number of calendars that render on desktop devices.	number	-	1
day-format 4.6.0+	Set the format of day name. `@default` 'numeric'	func\|string	-	'numeric'
disabled-dates	Specify the list of dates that cannot be selected.	Date[] \| Date[][]	-	-
end-date	Initial selected to date (range).		-	-
first-day-of-week	Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday,	number	-	1
locale	Sets the default locale for components. If not set, it is inherited from the navigator.language.	string	-	'default'
max-date	Max selectable date.		-	-
min-date	Min selectable date.		-	-
navigation	Show arrows navigation.	boolean	-	true
nav-year-first 4.6.0+	Reorder year-month navigation, and render year first.	boolean	-	-
range	Allow range selection.	boolean	-	-
select-end-date	Toggle select mode between start and end date.	boolean	-	-
select-adjacement-days 4.9.0+	Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.	boolean	-	-
selection-type 5.0.0+	Specify the type of date selection as day, week, month, or year.	string	`day`, `week`, `month`, `year`	'day'
show-adjacement-days 4.9.0+	Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.	boolean	-	true
show-week-number 5.0.0+	Set whether to display week numbers in the calendar.	boolean	-	-
start-date	Initial selected date.		-	-
weekday-format	Set length or format of day name. `@type` number \| 'long' \| 'narrow' \| 'short'	func\|number\|string	-	2
week-numbers-label 5.0.0+	Label displayed over week numbers in the calendar.	string	-	-
Event name	Description	Properties
date-hover	Callback fired when the user hovers over the calendar cell.	date `Date \| null` - undefined
calendar-date-change	Callback fired when the calendar date changed.	date `Date \| null` - undefined
start-date-change	Callback fired when the start date changed.	date `Date \| null` - undefined
end-date-change	Callback fired when the end date changed.	date `Date \| null` - undefined
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	-	'img'
orientation	Optionally orientate the image to the top, bottom.	string	`'top'`, `'bottom'`	-
Prop name	Description	Type	Values	Default
controls	Adding in the previous and next controls.	boolean	-	-
dark	Add darker controls, indicators, and captions.	boolean	-	-
index	index of the active item.	number	-	0
indicators	Adding indicators at the bottom of the carousel for each item.	boolean	-	-
interval	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.	boolean\|number	-	5000
pause	If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.	boolean\|string	-	'hover'
transition	Set type of the transition.	string	`'crossfade'`, `'slide'`	'slide'
wrap	Set whether the carousel should cycle continuously or have hard stops.	boolean	-	true
Prop name	Description	Type	Values	Default
custom-tooltips	Enables custom html based tooltips instead of standard tooltips. `@default` true	boolean	-	true
data	The data object that is passed into the Chart.js chart (more info).	ChartData \| ((canvas: HTMLCanvasElement) => ChartData)	-	-
height	Height attribute applied to the rendered canvas. `@default` 150	number	-	150
id	ID attribute applied to the rendered canvas.	string	-	-
options	The options object that is passed into the Chart.js chartRef.value. {@link https://www.chartjs.org/docs/latest/general/options.html More Info}	ChartOptions	-	-
plugins	The plugins array that is passed into the Chart.js chart (more info) {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}	Plugin[]	-	-
redraw	If true, will tear down and redraw chart on all updates.	boolean	-	-
type	Chart.js chart type. `@type` 'line' \| 'bar' \| 'radar' \| 'doughnut' \| 'polarArea' \| 'bubble' \| 'pie' \| 'scatter'	ChartType	-	'bar'
width	Width attribute applied to the rendered canvas. `@default` 300	number	-	300
wrapper	Put the chart into the wrapper div element. `@default` true	boolean	-	true